フレックスレイアウトとフレックスの6つの属性

次の2つの属性Flexを理解する必要があることに精通している。Flex6CSS

/* 设置 Flex 模式 */
display: flex;

/* 决定元素是横排还是竖着排，要不要倒序 */
flex-direction: column;

/* 决定元素换行格式，一行排不下的时候如何排 */
flex-wrap: wrap;

/* flex-flow = flex-direction + flex-wrap */
flex-flow: column wrap;

/* 同一排下对齐方式，空格如何隔开各个元素 */
justify-content: space-between;

/* 同一排下元素如何对齐，顶部对齐、中部对齐还是其他 */
align-items: center;

/* 多行对齐方式 */
align-content: space-between;

以下では、これらの要素の状況を詳細に分析します。

ナレッジポイント1。flex-direction：スピンドルの方向を決定します

row -（デフォルト）水平方向、開始点は左端です
row-reverse -水平方向、開始点は右端です
column -垂直方向、開始点は上端です
column-reverse -垂直方向、開始点は下端にあります

display: flex;

flex-direction: row | row-reverse | column | column-reverse;

[外部リンク画像の転送に失敗しました。ソースサイトにヒル防止リンクメカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします（img-nPz4cAoX-1608025314220）（../../ public-repertory / img / css-layout-flex-1 .png）]

知識ポイント2。flex-wrap：一方の軸（行）が劣ら解決方法よりも行ありません

nowrap -（デフォルト）改行なし
wrap -改行、上の最初の行
wrap-reverse -改行、下の最初の行

display: flex;

flex-wrap: nowrap | wrap | wrap-reverse;

[外部リンクの画像転送に失敗しました。ソースサイトにホットリンク防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします（img-fXGrbJBC-1608025314223）（../../ public-repertory / img / css -layout-flex-2 .png）]

[外部リンク画像の転送に失敗しました。ソースサイトにヒル防止リンクメカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします（img-wNPn4xlf-1608025314224）（../../ public-repertory / img / css-layout-flex-3 .png）]

知識。3。flex-flow：=フロー-フレックスフレックスフレックス+-方向ラップ。つまり、フレックスフローはこれら2つのプロパティのコレクションです

row nowrap -（デフォルト）水平方向、左端の開始点、改行なし

display: flex;

flex-flow: <flex-direction> || <flex-wrap>;

詳細なリファレンス1と2

ナレッジポイント4。justify-content：スピンドルアライメントでプロジェクトを定義する

flex-start -左揃え
flex-end -右揃え
center -センターアライメント
space-between -両端を中央のスペースに揃えます
space-around -周囲の空間

display: flex;

justify-content: flex-start | flex-end | center | space-between | space-around;

[外部リンク画像の転送に失敗しました。ソースサイトにヒル防止リンクメカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします（img-Lkevw3pF-1608025314226）（../../ public-repertory / img / css-layout-flex-4 .png）]

ナレッジポイント5。align-items：軸の交点でプロジェクトの定義を調整する方法

flex-start -上部に揃えます。つまり、テキストと画像の上部が同じ行にあります。
flex-end -下部を揃えます。つまり、テキストや画像などの下部が同じ行にあります。
center -中央が揃えられます。つまり、テキスト画像の高さに関係なく、中央を同じ行に配置します。
stretch -コンテナ全体の高さをテキストと画像で埋め、均一性を強制します
baseline -各アイテムの最初の行を同じ行に揃えます

display: flex;

align-items: flex-start | flex-end | center | stretch | baseline;

[外部リンクの画像転送に失敗しました。ソースサイトにヒル防止チェーンメカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします（img-crPlbDaC-1608025314227）（../../ public-repertory / img / css-layout-flex-5 .png）]

6知識。align-content：配置は複数の軸を定義します。軸が1つ（線のみ）の場合、この属性は効果がありません

flex-start -これらの線は上部に配置されます
flex-end -これらの線は下部に配置されます
center -これらの線は中央に配置されます
stretch -これらの線を拡大またはズームして、コンテナの高さを埋めます
space-between -これらの行の中央を埋めるためにスペースを使用します
space-around -これらの線の側面と中央を塗りつぶします

display: flex;

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

[外部リンクの画像転送に失敗しました。ソースサイトにホットリンク防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします（img-SvvLP3RP-1608025314228）（../../ public-repertory / img / css -layout-flex-6 .png）]

このドキュメントはYuDieyouから引用されています– Liangsirは彼自身の学習経験+ドキュメント補足でもあります
Liang sirGitアドレス：https：//github.com/LiangJunrong/document-library

フレックスレイアウトとフレックスの6つの属性

おすすめ