学習目標: 柔軟なレイアウトのケース
- 柔軟なレイアウトについて学ぶ
- 柔軟なレイアウトを使用する
- 模倣事件
1. フレキシブルレイアウト（フレキシブルレイアウトとは）
-
フレキシブル ボックス
フレキシブル ボックスは、フレキシブル コンテナ (Flex コンテナ) とフレキシブル サブ要素 (Flex アイテム) で構成されます。
-
フレキシブル コンテナ: フレキシブル レイアウトの親要素を追加する必要があります。
-
柔軟な子要素: 柔軟なレイアウト コンテナー内の子要素。アイテムとも呼ばれます。
- 主軸: 柔軟なレイアウトでは、属性で指定された水平方向または垂直方向を主軸 [X/Y 軸] として使用します。
- 交差軸: 交差軸に垂直な別の軸 (主軸の垂直線として理解できます)
柔軟なレイアウトの例
<body>
<style>
.box {
height: 400px;
background-color: #000;
}
.box div {
/* 使用子代选择器 */
width: 400px;
height: 100px;
background-color: blue;
/* 设置背景 */
color: white;
font-size: 30px;
}
</style>
<div class="box">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
</div>
</body>
柔軟なレイアウトを親要素に追加する
キーコード:ディスプレイ: フレックス;
<body>
<style>
.box {
display: flex;
/*将父元素改为弹性容器 flex*/
height: 400px;
background-color: #000;
}
.box div {
/* 使用子代选择器 */
width: 400px;
height: 100px;
background-color: blue;
/* 设置背景 */
color: white;
font-size: 30px;
}
</style>
<div class="box">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
</div>
</body>
演算結果
2. フレキシブルレイアウトの特徴
1. 親コンテナに作用するプロパティ
この形式は非常に重要なので、暗記する必要はありませんが、必ずよく読んでください。もっと見てください！もっと見てください！
| 価値 | 説明する |
|---|---|
| フレックス方向 | フレキシブルコンテナ内の子要素の配置を指定する |
| フレックスラップ | フレキシブル ボックスの子要素が親コンテナを超えたときにラップするかどうかを設定します。 |
| フレックスフロー | flex-direction および flex-wrap の略称 |
| コンテンツの正当化 | フレックスボックス要素の主軸（横軸）方向の配置を設定します。 |
| アイテムの整列 | 横軸にフレックスボックス要素を設定（縦軸方向の位置合わせ） |
| コンテンツの整列 | align-items と同様に、flex-wrap 属性の動作を変更しますが、要素の配置を設定する代わりに、行の配置を設定します。 |
1-1. flex- direction属性
flex-**direction 属性は、フレキシブル コンテナ内のサブ要素の配置を指定するために使用され、主軸の方向を決定します。
| 価値 | 説明する |
|---|---|
| 行(デフォルト) | 主軸は水平、始点は左端 |
| 行反転 | 主軸は水平、始点は右端 |
| カラム | 主軸は垂直であり、始点は上端にあります |
| 列反転 | 主軸は垂直であり、始点は下端にあります |
1-2. flex-wrap属性
flex-wrap プロパティは、フレックス コンテナーが単一行であるか複数行であるかを指定し、水平軸 (X 軸) の方向によって新しい行が積み重ねられる方向が決まります。flex-wrap 属性は、フレックス ボックスの子要素が親コンテナを超えたときにラップするかどうかを設定します。
| 価値 | 説明する |
|---|---|
| ナラップ (デフォルト) | コンテナの幅が足りない場合、各項目は 1 行に詰め込まれます。 |
| 包む | 最初の行がコンテナの上部になるように行を折り返す |
| ラップリバース | 行の折り返し、最初の行はコンテナの下部にあります |
I .nowrap (デフォルト) 値
II. ラップ値
「wrap」は行を折り返し、最初の行はコンテナの先頭になります。
III. ラップリバース値
行の折り返し、最初の行はコンテナの下部にあります
1-3. フレックスフロー属性
Flex-flow は、flex-direction と flex-wrap の略語で、デフォルト値は次のとおりです: flex-flow: row nowrap; (最も一般的に使用されます)
- フレックス方向: 行 (デフォルト)|行の反転|列|列の反転;
- flex-wrap:nowrap (デフォルト)|wrap|wrap-reverse;
1-4. justify-content 属性
| 価値 | 説明する |
|---|---|
| フレックススタート (デフォルト) | 子要素は主軸の始点にあります |
| フレックスエンド | 子要素は主軸の端にあります |
| セント | 中心 |
| 間のスペース | 両端で、アイテム間のスペースは等しいです。(最初と最後の項目、親コンテナとのギャップなし) |
| 周囲の空間 | 各項目は両側に等間隔に配置され、項目間の間隔は項目と境界線の間の間隔の 2 倍になります (先頭と末尾は親コンテナの端から一定の間隔があります)。 |
1-5 .align-items プロパティ
横軸にフレックスボックス要素を設定（縦軸方向の位置合わせ）
| 価値 | 説明する |
|---|---|
| フレックススタート | 十字軸の始点の位置合わせ |
| フレックスエンド | 交差軸終点位置合わせ |
| セント | 交差軸の中点を揃えます |
| ベースライン | アイテムのテキストの最初の行のベースラインの配置 (テキストの高さとフォント サイズは各行のベースラインに影響します)。 |
| ストレッチ (デフォルト) | 項目に高さが設定されていない場合、または自動に設定されている場合、その項目はコンテナーの高さ全体を占めます。 |