1. フレックスレイアウトとは
FlexとはFlexible Boxの略で、「柔軟なレイアウト」を意味し、ボックス型モデルに最大限の柔軟性を持たせるために使用されます。ページの大きさが変わっても、ページレイアウトを適応させることができます。現在、すべてのブラウザでサポートされています。
2.フレックスレイアウトの設定方法
ブロック-レベル要素: .box{ display:flex; }.
.box{ display:inline-flex; } インライン要素をフレックス・レイアウトに設定することもできます。
** Flex layoutに設定すると、子要素のfloat, clear, vertical-align属性は無効になります。
3.いくつかの共通の特性を曲げます
フレックス方向
Flexスピンドルの向きを指定するために使用し、Flexコンテナ内のFlexチャイルドの位置を決定します：
justify-コンテンツ
以下の 5 つの値を使用して、スピンドル方向の Flex 子のアライメントを指定します：
アイテム
以下の5つの値を使用して、Flexの子項目の横軸のアライメントを指定します：
フレックスラップ
次の3つの値は、Flex項目が改行であるかどうかを指定するために使用されます：
アラインコンテンツ
この属性は、複数行の整列のために複数行の場合に使用されます。
align-content:stretch|flex-start|flex-end|center|space-between|space-around
アラインセルフ
このプロパティは、Flex の子アイテムの配置を個別に指定するために使用します。
align-self: auto | flex-start | flex-end | center | baseline | stretch；
フレックスコンポジット
この属性は、Flex 子アイテムの領域割り当て方法を指定するために使用されます。
html<ul> <li style="flex:1;">1111</li> <li style="flex:1;">2222</li> <li style="flex:1;">3333</li> </ul>
その場合、3つのliは、親要素のスペースを割り当てるために1:1:1の比率に従うことになります。
フレックスレイアウトは、一般的にボックスの垂直方向の水平方向のセンタリングを設定する際に使用され、これもテストの内容である親要素の直上に設定表示：フレックス;justify -コンテンツ：センター;align -項目：センター;OKを押します！ だからFlexレイアウトは本当に非常に便利なコンテンツです！
次のセクションでは、ボックスの水平方向と垂直方向のセンタリングに焦点を当てましょう！
