CSS レイアウトプロパティ_html/css_WEB-ITnose

1. フレキシブル ボックス モデルの概要

1. フレキシブル ボックス モデルの概要 - 基礎知識

フレキシブル ボックス モデル (フレキシブル ボックスまたはフレックスボックス) は、CSS フレキシブル ボックスと正式に呼ばれる CSS3 の新しいレイアウト モジュールです。レイアウト モジュール。 用途 コンテナ内の項目の配置、方向、並べ替えを実現するために使用されます (項目のサイズ、位置、および動的生成の場合も含む)。フレキシブル ボックス モデルの最大の特徴は、さまざまな画面サイズでの適切なレイアウトに合わせてサブ要素の幅と高さを動的に変更できることです。

＊フレックスコンテナ（フレックスコンテナ）

＊フレックスアイテム（フレックスアイテム）

スピンドル。

※フレキシブルコンテナのメインスタート（main start）、メインエンド（main end）、クロススタート（cross start）、クロスエンド（cross end）は、フレキシブルサブ要素配置の開始位置と終了位置を表します。

2. フレキシブルボックスモデルの紹介 - 属性分類

(1) フレキシブルコンテナ属性

(2) フレキシブルサブ要素属性

3. 属性の詳細な説明

(1) 構文:flex-direction ：row | row-reverse | column-reverse

意味：主軸の方向を設定し、弾性サブ要素の配置を決定します

（２）構文：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サブ要素の順序を設定します-要素。前に小さい値があり、負の値を指定できます。

(8) 構文: flex-grow:

意味: 弾性サブ要素の拡張率を設定します。負の値は許可されず、デフォルト値は 0 です。フレックスボックス要素によって比率として設定された拡張係数に従って残りのスペースを割り当てます

(9) 構文: flex-shrink:
意味: Elastic サブ要素の縮小率を設定します (負)値は許可されません。デフォルト値は 1 です

フレックス ボックス要素で設定された拡張率に従ってスペースを縮小します

(10) 構文: flex-basis: ベースライン値を負にすることはできません。 デフォルト値は auto で、特定の幅 (高さ) はありません。

(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. 基本的な構文

構文 [',' ]*]:[only | not] <式>]* | <式> [および<式>]* <式>:'('[:<値>]?)'

<式>: '( '<メディア特性>[: <値>]?')' <メディアクエリ>: []* : [[,]*]?

3. メディアの特性

4. メディア タイプ

6. メディア クエリの分析 - 画面サイズ

以下のように:

*古いスマートフォン: 320px-480px

*スマートフォン: ≥ 480px

* タブレット: ≥ 768px

* 中画面(デスクトップモニター): ≥ 992px
モバイルファースト原則に従って実装中