フレックス コンテナーを作成するには、要素に display: flex プロパティを追加するだけです。 同様に、コンソールの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 でサウンド効果付きの花火効果を実装する
SpringBoot は巨大な Python のようで、ゆっくりと私たちの周りを巻きつき、麻痺させま...
CSS3 構文: (750 ピクセルのデザインの場合、1rem = 100 ピクセル) @media...
目次1. ダウンロード手順2. 環境変数を設定する3. my.iniファイルを設定する4. MySQ...
テキストシャドウ text-shadow プロパティの効果: 1. 右下隅の影、左下隅の影、左上隅の...
この記事では、vue-table の追加と削除の具体的なコードを参考までに紹介します。具体的な内容は...
目次序文レンダリングサンプルコード要約する序文ダイアログ ボックスは非常に一般的なコンポーネントであ...
目次URL モジュール1. 解析メソッド2. フォーマット方法3. 解決方法イベントモジュール(イベ...
実行中のコンテナが終了したときに、コンテナが完全に終了する前に環境をクリーンアップするなど、いくつか...
MySQL のトランザクションはデフォルトで自動的にコミットされます (autocommit = 1...
目次1. 概要2. ログインインターセプションを実装するためのルーティングナビゲーションガード1. ...
最近、あるプロジェクトに取り組んでいたとき、自分のプロジェクトでは CSS3 のアニメーション技術を...
この記事の例では、参考のために簡単なリスト機能を実装するアプレットの具体的なコードを共有しています。...
1. psshを確認してインストールします。yum list pssh 2. キーレスログインが設定...
仕事上、携帯電話に適応した Web ページ効果を作成する必要があります。ようやく完成しました。まずは...
HTML4 についてHTML (XHTML ではありません)、MIME タイプは text/html...