这是我参与 2022 首次更文挑战的第 6 天，活动详情查看：2022 首次更文挑战
Q ** なぜFlexレイアウトを使用するのか **
答え：良いからです。
面接で、面接官がなぜフレックスレイアウトを使用するのかと尋ねるとき、まず最初に理解する必要があります。面接官は何を知りたいのか？簡単な答えは“良い”ではなく、任意のスキームや技術の出現は、以前の欠陥を補うことであるため、従来のレイアウトスキームの痛み点と比較して、フレックスレイアウトは確かに利点と価値を持っています。次に、従来のレイアウトがどのような形式であるか、フレックスレイアウトがどのような形式であるかを説明する必要があります。
レイアウトの従来のソリューションはボックスモデルに基づいており、display、position、floatなどのプロパティに依存します。これらの特別な場所には非常に不快です。
例えば、垂直方向の配置は容易ではない。位置+変換を行う必要があります。
<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);
}
新しいソリューションフレックスレイアウトは、さまざまなページレイアウトを簡単、完全、レスポンシブに実装できます。
フレックスレイアウトを使用したボックスモデルの垂直方向の中央配置は非常に簡単で、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;
}
フローティング要素はページ内のドキュメントフローから外れ、独自の場所を持たず、後続の要素はフローティング要素によって上書きされ、マージンまたはパディングによって拡張されます。
1.2方法 2。
左はfloat left、右はoverflow hidden。
.left {
float: left;
width: 200px;
}
.right {
overflow: hidden;
}
また、overflow hidden;を使用してフローティングをクリアすることもできます。
1.3メソッド3。
ポジションの使用
.wrap {
position: relative;
}
.left {
width: 200px;
}
.right {
position: absolute;
top: 0;
left: 200px;
}
1.4方法 4。
フレックスの使用
.wrap {
display: flex;
}
.left {
width: 200px;
}
.right {
flex: 1;
}
2. プロパティ
Q：**align-itemsとjustify-contentの違い **
フレックスレイアウトを採用したエレメントで、フレックスコンテナflex container、略してコンテナ"と呼ばれます。コンテナには既定で2つの軸があります。水平の主軸main axisと垂直の交差軸cross axisです。
flex-directionプロパティは、主軸の方向（つまり配置方向）を決定します。設定できる属性値は4種類あります。
- row既定は水平方向で、は左端にあります。
- row-reverse主軸は水平方向で、始点は右端にあります。
- n
- 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の場合、スペースが不足すると、すべての項目が等しい割合で縮小されます。1つの項目のflex-shrinkプロパティが0で、他の項目がすべて1である場合、スペースが不足している場合、前者は縮小しない。
flex-basisプロパティは、余分なスペースを割り当てる前にアイテムが占有する主軸スペースを定義します。ブラウザは、このプロパティに基づいて、主軸に余分なスペースがあるかどうかを計算します。デフォルト値はautoで、プロジェクトの元のサイズです。
flex 属性属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
ブラウザーは関連する値を推測するため、3つの別々のプロパティを書くよりも、このプロパティを優先します。
したがって、flex 1は、剰余空間を等分することを意味する。