これは私が2022年初のチャレンジ投稿に参加した6日目の記事です。詳細はこちら：2022年初のチャレンジ投稿
質問：なぜflexレイアウトを使うべきか？
答え：便利だからです。
面接で、なぜflexレイアウトを使うのかと聞かれたとき、まず理解すべきは、この質問で面接官が何を知りたいのかということです。単に「便利だから」と答えるのは不十分です。どんな解決策や技術も、以前の欠点を補うために生まれます。従来のレイアウト手法にあった課題と比べて、flexレイアウトには明確な利点と価値があります。そのため、従来のレイアウトがどのような形式だったか、そしてflexレイアウトを使うとどう変わるかを説明する必要があります。
従来のレイアウト解決策は、ボックスモデルに基づいており、display、position、floatなどのプロパティに依存していました。これらは特殊なレイアウトには非常に不便です。
例えば、垂直方向の中央寄せは簡単ではありません。position + transform を組み合わせる必要があるかもしれません。
<div class="wrap">
<div class="box"></div>
</div>
.wrap {
width: 300px;
height: 300px;
border: 1px solid red;
position: relative;
}
.box {
height: 100px;
width: 100px;
border: 1px solid blue;
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
}
新しい解決策であるflexレイアウトは、簡潔で完全、かつレスポンシブに様々なページレイアウトを実現できます。
flexレイアウトを使ったボックスモデルでは、垂直方向の中央寄せが非常に簡単で、align-items: center; プロパティを設定するだけです。
.wrap {
width: 300px;
height: 300px;
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center;
}
.box {
height: 100px;
width: 100px;
border: 1px solid blue;
}
FlexはFlexible Boxの略で、「弾性レイアウト」を意味し、ボックスモデルに最大の柔軟性を提供します。
1. 2カラムレイアウト
ページで2カラムレイアウト（一方は固定幅、もう一方は可変）を実現する必要がある場合。
1.1 方法1
左側に float: left、右側に margin-left。
.left {
float: left;
width: 200px;
}
.right {
margin-left: 200px;
}
フロート要素はページ内でドキュメントフローから外れ、自身の位置を失います。そのため後続の要素がフロート要素に重なりますが、marginやpaddingでスペースを確保します。
1.2 方法2
左側に float: left、右側に overflow: hidden。
.left {
float: left;
width: 200px;
}
.right {
overflow: hidden;
}
overflow: hidden; でフロートを解除することもできます。
1.3 方法3
positionを利用する。
.wrap {
position: relative;
}
.left {
width: 200px;
}
.right {
position: absolute;
top: 0;
left: 200px;
}
1.4 方法4
フレックスボックスflexを利用する。
.wrap {
display: flex;
}
.left {
width: 200px;
}
.right {
flex: 1;
}
2. プロパティ
質問：align-items と justify-content の違い
Flexレイアウトを採用した要素は、Flexコンテナ（flex container）と呼ばれ、略して「コンテナ」と呼びます。コンテナにはデフォルトで2本の軸があります：水平の主軸（main axis）と垂直の交差軸（cross axis）です。
flex-direction プロパティは主軸の方向（つまり配置方向）を決定します。4つのプロパティ値を設定できます。
row（デフォルト）：主軸が水平方向、起点は左端。row-reverse：主軸が水平方向、起点は右端。column：主軸が垂直方向、起点は上端。column-reverse：主軸が垂直方向、起点は下端。
注意：面接時に「水平方向が主軸です」と言うのは不正確です。主軸は水平にも垂直にもなり得るからです。なぜなら
flex-directionプロパティが主軸の方向を決定するからです。
align-itemsプロパティは、アイテムが交差軸上でどのように整列するかを定義します。justify-contentプロパティは、アイテムが主軸上でどのように配置されるかを定義します。
質問：flex: 1; は何を意味するか
flex プロパティは flex-grow、flex-shrink、flex-basis の省略形で、デフォルト値は 0 1 auto です。後ろの2つのプロパティは省略可能です。
flex-growプロパティはアイテムの拡大比率を定義します。デフォルトは0で、余白があっても拡大しません。すべてのアイテムのflex-growが1なら、余白を均等に分割します。あるアイテムのflex-growが2で他が1なら、そのアイテムは他のアイテムの2倍の余白を占めます。flex-shrinkプロパティはアイテムの縮小比率を定義します。デフォルトは1で、スペースが不足すると縮小します。すべてのアイテムのflex-shrinkが1なら、均等に縮小します。あるアイテムのflex-shrinkが0で他が1なら、スペース不足時にそのアイテムは縮小しません。flex-basisプロパティは、余白を分配する前にアイテムが占める主軸のスペースを定義します。ブラウザはこのプロパティに基づいて主軸に余白があるかを計算します。デフォルトはautoで、アイテム本来のサイズです。
flex プロパティには2つのショートカット値があります：auto (1 1 auto) と none (0 0 auto) です。
可能な限り、個別の3つのプロパティを書くよりもこのプロパティを優先して使うことをお勧めします。ブラウザが関連する値を自動計算するからです。
したがって、flex: 1 は余白を均等に分割することを意味します。