フレキシブル ボックス モデル (フレキシブル ボックスまたはフレックスボックス) は、CSS フレキシブル ボックスと正式に呼ばれる CSS3 の新しいレイアウト モジュールです。レイアウト モジュール。 用途 コンテナ内の項目の配置、方向、並べ替えを実現するために使用されます (項目のサイズ、位置、および動的生成の場合も含む)。フレキシブル ボックス モデルの最大の特徴は、さまざまな画面サイズでの適切なレイアウトに合わせてサブ要素の幅と高さを動的に変更できることです。
＊フレックスコンテナ（フレックスコンテナ）
＊フレックスアイテム（フレックスアイテム）
スピンドル。
※フレキシブルコンテナのメインスタート（main start）、メインエンド（main end）、クロススタート（cross start）、クロスエンド（cross end）は、フレキシブルサブ要素配置の開始位置と終了位置を表します。
(1) フレキシブルコンテナ属性
(2) フレキシブルサブ要素属性
3. 属性の詳細な説明
（２）構文：flex-wrap:nowrap | Wrap | Wrap-reverse
意味: フレキシブルサブ要素がフレキシブルコンテナのスコープを超えたときにラップするかどうかを設定します
(3) 構文: flex-flow: [ flex-direction ] || [ flex -wrap ]
意味: 複合属性 (flex-direction と flex-wrap)、伸縮性のあるサブ要素の配置を設定します(4) 構文: justify-content: flex-start | space-between | | space-around
意味: 主軸上の弾性サブ要素の配置を設定します
(5) 構文: align-items: flex-end |stretch
意味:サイド軸上の弾性サブ要素の配置を設定します
文法 ：align-content：flex-start | space-around | space-around |側軸が空白で複数行ある場合、側軸上のElasticサブ要素の配置を設定します
(7) 構文: order:
意味: Elasticサブ要素の順序を設定します-要素。前に小さい値があり、負の値を指定できます。
意味: 弾性サブ要素の拡張率を設定します。負の値は許可されず、デフォルト値は 0 です。フレックスボックス要素によって比率として設定された拡張係数に従って残りのスペースを割り当てます
(9) 構文: flex-shrink:
意味: Elastic サブ要素の縮小率を設定します (負)値は許可されません。デフォルト値は 1 です
(10) 構文: flex-basis:
(11) 構文: flex: none |[ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
意味: 複合属性、elastic サブ要素にスペースを割り当てる方法を設定します。
(12) 構文: align-self: auto | flex-start | flex-end center | baselinestretch
意味: align-itemと同様に、横軸上の弾性サブ要素の配置を設定します。 flex 子要素の独立した配置を設定します。
2. Flexbox メニュー項目の練習
1. 要件:
中画面下:
２．
1 <ul class="menu">2 <li><a href="#">HTML</a></li>3 <li><a href="#">CSS</a></li>4 <li><a href="#">Javascript</a></li>5 <li><a href="#">Sass</a></li>6 <li><a href="#">Ruby</a></li>7 <li><a href="#">Mongo</a></li>8 </ul>
3. CSS スタイル部分:
1 <style> 2 *{ 3 padding: 0; 4 margin: 0; 5 border: none; 6 } 7 html{ 8 font-size: 12px; 9 }10 .menu{11 width: 100%;12 border: 1px solid rgba(0,0,0,.1);13 display: flex; /*激活弹性布局*/14 flex-flow: row wrap; /*设置主轴方向以及是否换行*/15 }16 .menu li{17 list-style-type: none;18 text-align: center;19 height: 40px;20 line-height: 40px;21 flex: 1 1 100%;22 }23 .menu li:nth-child(1){24 background-color: #39ADD1;25 }26 .menu li:nth-child(2){27 background-color: #3079AB;28 }29 .menu li:nth-child(3){30 background-color: #982551;31 }32 .menu li:nth-child(4){33 background-color: #E15258;34 }35 .menu li:nth-child(5){36 background-color: #CC6699;37 }38 .menu li:nth-child(6){39 background-color: #52AC43;40 }41 .menu a{42 text-decoration: none;43 color: #fff;44 font-size: 2rem;45 }46 @media (max-width: 768px) {47 .menu{48 flex-wrap: wrap;49 }50 .menu li{51 flex: 1 1 50%;52 }53 }54 @media (max-width: 480px) {55 .menu{56 flex-direction: column;57 }58 .menu li{59 flex: 1 1 100%;60 }61 }62 </style>3. メディアクエリ分析
1.
レスポンシブWebデザインとは、Web開発プロセス中にさまざまなデバイス向けにWebサイトを開発し、ユーザーの行動やデバイス環境（システムプラットフォーム、画面サイズ、画面の向きなど）に基づいて異なるレイアウトを適応的に表示することを指します。 レスポンシブ レイアウトの中核はメディア クエリです。メディアクエリとは、ユーザーの行動やデバイス環境を取得し、対応するCSSルールを提供するプロセスの略称です。 メディア クエリにより、CSS は異なるメディア タイプや同じメディア上の異なる条件に対してより正確に動作できるようになります。
2. 基本的な構文
構文
<式>: '( '<メディア特性>[: <値>]?')' <メディアクエリ>: []* : [[,]*]?
3. メディアの特性
4. メディア タイプ
6. メディア クエリの分析 - 画面サイズ
以下のように:
*古いスマートフォン: 320px-480px*スマートフォン: ≥ 480px
* タブレット: ≥ 768px * 中画面(デスクトップモニター): ≥ 992px
モバイルファースト原則に従って実装中
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
