目次
I.はじめに
CSS Flexbox (Flexbox) は、Web ページのレイアウトの制御を簡素化し、さまざまなデバイスでのページの適応性を高める強力で柔軟なレイアウト モデルです。この記事では、フレキシブル ボックスのレイアウトをよりよく理解できるように、CSS フレキシブル ボックスの基本的な概念、プロパティ、使用方法を紹介します。
2. フレックスレイアウトとは何ですか
Flex は Flexible Box の略語で、「伸縮性のあるレイアウト」を意味し、ボックス モデルに最大限の柔軟性を提供するために使用されます。
1. 任意のコンテナを Flex レイアウトとして指定可能
.box{
display: flex;
}
2. インライン要素でも Flex レイアウトを使用できます
.box{
display: inline-flex;
}
3. Webkit カーネルを搭載したブラウザには、接頭辞として -webkit を付ける必要があります
.box{
display: -webkit-flex;
display: flex;
}
注: Flex レイアウトに設定した後、子要素の float、clear、およびvertical-align 属性は無効になります。
3. 基本的な概念
Flexレイアウトを採用した要素をFlexコンテナ（フレックスコンテナ）、略して「コンテナ」と呼びます。そのすべての子要素は自動的にコンテナのメンバーになり、「アイテム」と呼ばれるフレックス アイテム (フレックス アイテム) になります。
コンテナにはデフォルトで 2 つの軸があります。水平主軸 (main axis) と垂直クロス軸 (cross asix) です。主軸の開始位置 (境界線との交点) をmain start、終了位置をmain endと呼び、交差軸の開始位置をcross start、終了位置をcross endと呼びます。
デフォルトでは、項目は主軸に沿って配置されます。単一のアイテムが占める主軸のスペースはメイン サイズと呼ばれ、単一のアイテムが占める横軸のスペースはクロス サイズと呼ばれます
フレックスの一般的に使用される 4 つ、2 つのプロパティ
flex の一般的に使用されるプロパティについては、コンテナ プロパティとプロジェクト プロパティに分けることができます。
1. コンテナのプロパティ
- フレックス方向
- フレックスラップ
- フレックスフロー
- コンテンツの正当化
- アイテムの整列
- コンテンツの整列
2. プロジェクトのプロパティ
- 注文
- フレックスグロー
- フレックスシュリンク
- フレックスベース
- フレックス
- 整列自己
5. コンテナのプロパティ
1、フレックス方向
① 定義
主軸の方向 (つまり、項目が配置される方向) を決定します。
②、ステートメント
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
1)、属性値
- 行 (デフォルト値): 主軸は水平、開始点は左端です。
- row-reverse: 主軸は水平、開始点は右端です
- 列: 主軸は垂直で、開始点は上端にあります。
- 列反転: 主軸は垂直であり、開始点は下部にあります。
③、コード例
1）、フレックス方向：行
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.container {
display: flex;
flex-direction: row;
}
.item {
width: 100px;
height: 100px;
background-color: #f0f0f0;
margin: 10px;
}
2）、フレックス方向：行反転
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.container {
display: flex;
flex-direction: row-reverse;
}
.item {
width: 100px;
height: 100px;
background-color: #f0f0f0;
margin: 10px;
}
3）、フレックス方向：列
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.container {
display: flex;
flex-direction: column;
}
.item {
width: 100px;
height: 100px;
background-color: #f0f0f0;
margin: 10px;
}
4）、フレックス方向：カラムリバース
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.container {
display: flex;
flex-direction: column-reverse;
}
.item {
width: 100px;
height: 100px;
background-color: #f0f0f0;
margin: 10px;
}
2、フレックスラップ
① 定義
弾性要素は常に主軸に沿って配置されるため、主軸を配置できない場合は、flex-wrap を使用してコンテナ内の項目をラップできるかどうかを判断します。
②、ステートメント
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
1)、属性値
- nowrap (デフォルト): ラップしません
- 折り返し: 最初の行は以下です
- ラップリバース: 改行、上の最初の行
デフォルトではラインを折り返さないが、要素はコンテナを直接削除することはできない。これには要素の弾性的な拡張と収縮が必要となる。
③、コード例
1）、フレックスラップ：nowrap
<div class="content1">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
.content1 {
color: #fff;
font: 100 24px/100px sans-serif;
height: 150px;
width: 897px;
text-align: center;
}
.content1 div {
height: 50%;
width: 300px;
}
.content1 {
display: flex;
flex-wrap: nowrap;
}
2）、フレックスラップ：ラップ
<div class="content">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
.content {
color: #fff;
font: 100 24px/100px sans-serif;
height: 150px;
width: 897px;
text-align: center;
}
.content div {
height: 50%;
width: 300px;
}
.content {
display: flex;
flex-wrap: wrap;
}
3）、フレックスラップ：ラップリバース
<div class="content2">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
.content2 {
color: #fff;
font: 100 24px/100px sans-serif;
height: 150px;
width: 897px;
text-align: center;
}
.content2 div {
height: 50%;
width: 300px;
}
.content2 {
display: flex;
flex-wrap: wrap-reverse;
}
3、フレックスフロー
① 定義
これは、flex-direction 属性と flex-wrap 属性の短縮形であり、デフォルト値はrow nowrapです。
②、ステートメント
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
③、コード例
element {
flex-flow: column-reverse wrap;
}
4、コンテンツの正当化
① 定義
主軸上の項目の配置を定義します
②、ステートメント
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
1)、属性値
- flex-start (デフォルト): 左揃え
- フレックスエンド: 右揃え
- 中心: 中心
- spac-between: 両端を揃えて項目間の間隔を等しくします
- space-around: 2 つの項目が両側に等間隔に配置されます。
③、コード例
1）、justify-content：flex-start
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.container {
display: flex;
justify-content: flex-start;
}
.item {
width: 100px;
height: 100px;
background-color: #e18181;
margin: 10px;
}
2）、justify-content：フレックスエンド
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.container {
display: flex;
justify-content: flex-end;
}
.item {
width: 100px;
height: 100px;
background-color: #e18181;
margin: 10px;
}
3）、内容を揃える：中央
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.container {
display: flex;
justify-content: center;
}
.item {
width: 100px;
height: 100px;
background-color: #e18181;
margin: 10px;
}
4）、コンテンツの位置揃え：スペース間のスペース
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.container {
display: flex;
justify-content: space-between;
}
.item {
width: 100px;
height: 100px;
background-color: #e18181;
margin: 10px;
}
5)、コンテンツの位置調整：周囲のスペース
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.container {
display: flex;
justify-content: space-around;
}
.item {
width: 100px;
height: 100px;
background-color: #e18181;
margin: 10px;
}
5、項目を揃える
① 定義
項目を交差軸上にどのように配置するかを定義します
②、ステートメント
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
1)、属性値
- flex-start: 交差軸の開始点を揃えます
- flex-end: 交差軸の端を揃えます。
- center: 交差軸の中点を揃えます。
- ベースライン: アイテム内のテキストの最初の行のベースライン配置
- ストレッチ (デフォルト値): アイテムに高さが設定されていない場合、または自動に設定されている場合、アイテムはコンテナ全体の高さで覆われます。
6、コンテンツの整列
① 定義
複数の軸の位置合わせを定義します。項目に軸が 1 つしかない場合、このプロパティは効果がありません。
②、ステートメント
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
1)、属性値
- flex-start: 交差軸の開始点に位置合わせします。
- flex-end: 交差軸の端に位置合わせします。
- center: 交差軸の中点に位置合わせします。
- space-between: 交差軸の両端に位置合わせされ、軸間の間隔が均等に分散されます。
- space-around: 各軸の両側の間隔は等しいです。したがって、軸間の距離は軸とフレーム間の距離の 2 倍になります。
- ストレッチ (デフォルト): 軸が交差軸全体を埋める
6. プロジェクトのプロパティ
1、注文
① 定義
項目の並べ替え順序を定義します。値が小さいほど配置が高くなります。デフォルトは 0 です。
②、ステートメント
.item {
order: <integer>;
}
2、フレックスグロー
① 定義
前述のように、コンテナが flex-wrap:nowrap; に設定されている場合、行が折り返されておらず、コンテナの幅が十分でない場合、elastic 要素は flex-grow に従って定義された項目の拡大率を決定します。 (コンテナの幅 > 要素の合計幅の場合にストレッチする方法) 。デフォルトは 0 です。つまり、スペースが残っている場合はズームインしません。
②、ステートメント
.item {
flex-grow: <number>;
}
1)、属性値
- 0 (デフォルト): スペースが残っている場合はズームインしません。
- すべての項目の flex-grow プロパティが 1 の場合、残りのスペース (存在する場合) を均等に分割します。
- 1 つの項目の flex-grow プロパティが 2 で、他の項目が 1 の場合、前者が占める残りのスペースは他の項目の 2 倍になります。
注: フレキシブル コンテナの幅は要素の幅の合計とまったく同じであり、余分な幅はありません。このとき、flex-grow がどのような値であっても効果はありません。
3、フレックスシュリンク
① 定義
項目の縮小率 (コンテナーの幅 < 要素の幅の合計の場合にどのように縮小するか) を定義します。デフォルトは 1 です。つまり、スペースが不十分な場合、項目は縮小します。
②、ステートメント
.item {
flex-shrink: <number>; /* default 1 */
}
すべての項目の flex-shrink プロパティが 1 の場合、スペースが不足している場合は比例して縮小されます。
1 つのアイテムの flex-shrink プロパティが 0 で、他の項目が 1 の場合、スペースが不足している場合は前者が縮小されます。
コンテナの幅は縮みません余剰がある場合、フレックスシュリンクは効果がありません
4、フレックスベース
① 定義
設定されるのは、主軸上の要素の初期サイズです。いわゆる初期サイズは、flex-grow および flex-shrink が有効になる前の要素のサイズです。ブラウザは、主軸に余分なスペースがあるかどうかを計算します
。このプロパティに従って、デフォルト値は項目の元のサイズである auto で、幅が設定されている場合、要素のサイズは幅/高さ (主軸の方向) によって決定され、設定されていない場合は決定されます。内容によって
②、ステートメント
.item {
flex-basis: <length> | auto; /* default auto */
}
0に設定するとコンテンツに応じて拡大されます。
幅または高さの属性と同じ値（350pxなど）に設定でき、アイテムは固定スペースを占有します。
5、フレックス
① 定義
flex 属性は、flex-grow、flex-shrink、および flex-basis の短縮形であり、デフォルト値は 0 1 auto ですが、これも理解するのが難しい複雑な属性です。
②、ステートメント
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
1)、属性値
- フレックス: 1 = フレックス: 1 1 0%
- フレックス: 2 = フレックス: 2 1 0%
- フレックス: オート = フレックス: 1 1 オート
- flex: none = flex: 0 0 auto、伸縮せずに固定サイズによく使用されます。
flex:1 と flex:auto の違いは、flex-basis:0 と flex-basis:auto の違いに起因する可能性があります。0 (
絶対弾性要素) に設定すると、これは flex-grow と flex-shrink を指示するのと同じになります。 in I don't need to think my size when
伸びる
ブラウザが関連する値を推測するため、属性を個別に分離します。
6、整列自己
① 定義
単一の項目に他の項目とは異なる配置を許可し、align-items 属性をオーバーライドできます。デフォルト
値は auto で、これは親要素の align-items 属性を継承することを意味します。親要素がない場合は、ストレッチと同等
②、ステートメント
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
7. Flexbox モデル レイアウトの適用シナリオ
Flexbox エラスティック ボックス モデル レイアウトは、要素のレイアウトと配置を必要とするほぼすべてのシナリオに適用でき、特にレスポンシブ デザインで非常に重要です。いくつかのアプリケーション シナリオを次に示します。
- 要素を垂直方向と水平方向に中央揃えにする
- グリッドレイアウトを作成する
- アダプティブ レイアウトを作成する
- スペースの割り当てと配置を管理する
- 千鳥配置のレイアウトを作成する
- 複数列のレイアウトを作成する
- さまざまな画面サイズやデバイスに適応する
結論として、Flexbox モデル レイアウトは、単純なレイアウト ニーズと複雑なレイアウト ニーズの両方に使用できる、非常に柔軟なレイアウト方法です。グリッド レイアウトやレスポンシブ デザイン手法などの他の CSS プロパティとも併用できるため、Web 開発で非常に役立ちます。
8. Flexbox モデル レイアウトの利点
1. レイアウトを簡素化する
フレキシブル ボックス レイアウトを使用すると、Web ページ レイアウトの制御が大幅に簡素化され、位置決めやフローティングなどの属性の使用が削減されます。
2. レスポンシブデザイン
柔軟なボックス レイアウトは適応性が高く、さまざまなデバイスや画面サイズに応じてレイアウトを自動的に調整し、レスポンシブ デザインを実現します。
3. 強い柔軟性
フレキシブル ボックス レイアウトは非常に柔軟な拡張性を備え、さまざまな配置と位置合わせの要件に適応でき、より優れたレイアウト制御を提供します。
9. まとめ
Flex エラスティック レイアウトの登場は、ソフトウェア インターフェイスと機能に対するますます豊かかつ複雑になる市場の要求に応えるためのものです。その中心的な魅力は、子要素のサイズが親要素のサイズの変化に動的に対応でき、特定の構造を維持できることです。特徴。
1. 実施原則
実装原理に関しては、柔軟で変更可能なレイアウト方法に対応するために、フレックス レイアウトには非常に重要な一連の概念が導入されています。
- Main axis (主軸): フレックス項目の伸びる方向によって、次のフレックス項目の配置位置が決まります。
- 交差軸: 主軸に垂直な方向は、改行状況に遭遇したときの主軸の特定の動作の詳細を決定します。
2. レイアウト作業手順
フレックス コンテナーの場合、レイアウト作業全体は 3 つのステップに分割できます。
- ステップ 1: すべてのフレックス項目は、独自のサイズと主軸のサイズに従って行に分割されます。簡単に言うと、主軸のスペースがフレックス項目を収容できない場合、分岐が実行されます。
- ステップ 2: 前のステップで取得した分岐情報と各行のフレックス項目の特性に従って、この行のすべてのフレックス項目の主軸サイズとレイアウト情報を計算します。
- ステップ 3: align-content、align-items、および align-self の 3 つの属性を通じて、交差軸上のすべてのフレックス項目のサイズとレイアウト情報を計算します。
一般に、フレックス レイアウトの登場により、豊富で多様な Web ページ レイアウトが可能になる一方で、エンジニアの創造性が解放され、他方では、ますます厳しく複雑になる市場の要求を満たすことができます。