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

自動行折り返し機能付き 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 でサウンド効果付きの花火効果を実装する

推薦する

Tomcatの動作原理を分析する

SpringBoot は巨大な Python のようで、ゆっくりと私たちの周りを巻きつき、麻痺させま...

CSS3 のメディアクエリと rem レイアウトを組み合わせてモバイル画面に適応

CSS3 構文: (750 ピクセルのデザインの場合、1rem = 100 ピクセル) @media...

MySQL 5.7.27 のダウンロード、インストール、設定に関する詳細なチュートリアル

目次1. ダウンロード手順2. 環境変数を設定する3. my.iniファイルを設定する4. MySQ...

CSS3 テキストシャドウ text-shadow プロパティの詳細な説明

テキストシャドウ text-shadow プロパティの効果: 1. 右下隅の影、左下隅の影、左上隅の...

vue-tableは追加と削除を実装します

この記事では、vue-table の追加と削除の具体的なコードを参考までに紹介します。具体的な内容は...

Vue はカスタム「モーダル ポップアップ ウィンドウ」コンポーネントのサンプル コードを実装します

目次序文レンダリングサンプルコード要約する序文ダイアログ ボックスは非常に一般的なコンポーネントであ...

Node.jsをゼロから学ぶ

目次URL モジュール1. 解析メソッド2. フォーマット方法3. 解決方法イベントモジュール(イベ...

Docker コンテナの正常なシャットダウン前にトラップを使用して環境のクリーンアップを実行する

実行中のコンテナが終了したときに、コンテナが完全に終了する前に環境をクリーンアップするなど、いくつか...

更新とデータ整合性処理のためのMySQLトランザクション選択の説明

MySQL のトランザクションはデフォルトで自動的にコミットされます (autocommit = 1...

ログインインターセプションを実装するためのVueルーティング

目次1. 概要2. ログインインターセプションを実装するためのルーティングナビゲーションガード1. ...

CSS3+HTML5+JSでブロックの縮小・拡大アニメーション効果を実現

最近、あるプロジェクトに取り組んでいたとき、自分のプロジェクトでは CSS3 のアニメーション技術を...

シンプルなリスト機能を実装するミニプログラム

この記事の例では、参考のために簡単なリスト機能を実装するアプレットの具体的なコードを共有しています。...

CentOS 6.5 の設定 ssh キーフリーログインで pssh コマンドを実行する方法の説明

1. psshを確認してインストールします。yum list pssh 2. キーレスログインが設定...

モバイル適応型ウェブページ効果は、小さな表示ページの問題を解決します

仕事上、携帯電話に適応した Web ページ効果を作成する必要があります。ようやく完成しました。まずは...

HTML減量 HTMLタグを合理化してWebページを作成する

HTML4 についてHTML (XHTML ではありません)、MIME タイプは text/html...