自動行折り返し機能付き CSS Flex レイアウトのサンプルコード

フレックスコンテナーを作成するには、要素に display: flex プロパティを追加するだけです。
デフォルトでは、すべての直接の子はフレックスアイテムと見なされ、左から右に一列に配置されます。
フレックスアイテムの合計幅がコンテナーよりも大きい場合、フレックスアイテムはフレックスコンテナーの幅に収まるまで比例して縮小されます。デモ: ページを見つけて F12 キーを押し、div 内の複数の div 要素の組み合わせを見つけて、flex を宣言し、width: 900px; を設定して固定幅を指定します。これにより、自動改行機能が後で練習できるようになります。

同様に、コンソールのCSSでスタイルを調整します。

取得：明らかに、フレックスアイテムが縮小されることが確認されています

この時点で、親要素にflex-flow: wrapを追加する必要があります。詳細は次のとおりです。

最終結果

その他の参考文献

ディスプレイ: フレックス;
 
/* flex-direction は主軸の行の方向を決定します (デフォルト) | row-reverse | column | column-reverse*/
/* フレックス方向: 行; */
 
/* flex-wrap は、行を折り返すかどうか、また配置が合わない場合に行を折り返す方法を決定します。nowrap (デフォルト) | wrap | wrap-reverse */
/* flex-wrap:ラップ; */
 
/* flex-flow は、lex-direction および flex-wrap の短縮形です (例: row wrap | column wrap-reverse など)。デフォルト値は row nowrap で、これは改行なしの水平配置を意味します*/
flex-flow:行折り返し;
 
/* !主軸が水平の場合! justify-content は、主軸上のアイテムの配置を決定します。可能な値は、flex-start (デフォルト)、flex-end、center、space-between、space-around です */
コンテンツを中央揃えにする。
/* !主軸が水平の場合!交差軸上のアイテムの配置を決定します。可能な値はflex-start|flex-end|center|baseline|stretchです */
アイテムを中央揃えにします。

例: CSS Flex エラスティックレイアウト (複数の div は自動的に折り返されます)

<!DOCTYPE html>
<html>
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>フレックスレイアウト</title>
    <スタイル>
        .con {
            /* フレックス コンテナーを作成するには、要素に display: flex プロパティを追加するだけです。 */
            /* デフォルトでは、すべての直接の子要素はフレックス アイテムと見なされ、左から右に一列にレイアウトされます。 */
             /*フレックスアイテムの合計幅がコンテナよりも大きい場合、フレックスアイテムはフレックスコンテナの幅に収まるまで比例して縮小されます*/
            ディスプレイ: フレックス;
            /* flex-direction は主軸の行の方向を決定します (デフォルト) | row-reverse | column | column-reverse*/
            /* フレックス方向: 行; */
            /* flex-wrap は、行を折り返すかどうか、また配置が合わない場合に行を折り返す方法を決定します。nowrap (デフォルト) | wrap | wrap-reverse */
            /* flex-wrap:ラップ; */
            /* flex-flow は、lex-direction および flex-wrap の短縮形です (例: row wrap | column wrap-reverse など)。デフォルト値は row nowrap で、これは改行なしの水平配置を意味します*/
            flex-flow: 行折り返し;
            /* !主軸が水平の場合! justify-content は、主軸上のアイテムの配置を決定します。可能な値は、flex-start (デフォルト)、flex-end、center、space-between、space-around です */
            コンテンツの中央揃え: 中央;
            /* !主軸が水平の場合!交差軸上のアイテムの配置を決定します。可能な値はflex-start|flex-end|center|baseline|stretchです */
            アイテムの位置を中央揃えにします。
        }

            .con > div {
                幅: 100ピクセル;
                高さ: 100px;
                背景: #8DB6CD;
                境界線: 1px 黒一色;
                左マージン: 10px;
                テキスト配置: 中央;
                行の高さ: 100px;
            }
    </スタイル>
</head>
<本文>
    <div クラス = 'con'>
        <!-- order の値は整数で、デフォルトは 0 です。整数が小さいほど、アイテムの順位が高くなります。ここでは、item1 と item4 のみに order 属性が設定されています。1 と 4 は最後にランク付けされ、4 は 1 の前にあります。 -->
        <div style="order: 2">アイテム 1</div>
        <div style="height: 300px;">アイテム 2</div>
        <!-- flex-grow は、フレックス コンテナーに余分なスペースがある場合にアイテムを拡大し、flex-shrink を縮小するかどうかを定義します -->
        <div style="flex-grow:2">項目 3</div>
        <div style="order: 1">アイテム 4</div>
        <div style="flex-basis:60px">項目 5</div>
        <div>項目 6</div>
        <div>項目 7</div>
        <div>項目 8</div>
        <div>項目 9</div>
        <div>項目 10</div>
        <div>項目 11</div>
    </div>
</本文>
</html>

CSS フレックスレイアウトオーバーロング自動ラップのサンプルコードに関するこの記事はこれで終わりです。CSS フレックスオーバーロング自動ラップの関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: Centos8 は kdc 暗号化に基づいて nfs を構築します

>>: JavaScript でサウンド効果付きの花火効果を実装する