で書き込みます。
cssレイアウトを学んだ内容はすべて忘れ、執筆プロジェクトを通じて、フレックスレイアウトとフロートレイアウトの使い方を再確認し、フレックスレイアウトとフロートレイアウトの使い方を理解することができます。
フレックス・レイアウトについて復習しておきましょう:
まず、フレックスレイアウトはIE9と互換性がありません。
フレックス・レイアウトは、コンテナとアイテムを考慮する必要があります。
コンテナの場合,
- まず、コンテナのdisplay:flex(またはinline-flex)を調整してフレックスボックスにする必要があります。
6.複数行のコンテンツでは、行間を空ける必要があります! そこでalign-contentを使います。
align-content:flex-start; //余分な行の高さはすべて下に置く。
align-content:flex-end; //余分な行の高さをすべて上に置く。
align-content:center; //余分な行の高さをすべて両側に置く。
align-content:space-between; //真ん中、上、下にスペースを入れる。
値を大きくすると縮みは小さくなる。
次のような書き方は不適切です。枠線をつけると、行の高さが失われ、テキストが中央に配置されなくなる可能性があるからです。
直接使用します:
> li {
display:flex;
justify-content:center;
align-item:center;
}
//
II.
1. 注文
各項目の順序を使用して、項目を並べ替えます。
2.フレックスグロウ
要素の長さを太くし、デフォルトは0、一般的に行に3つの要素がある場合、最初と最後を1、真ん中を2に設定し、1:2:1の行全体に分割することができます。
** 注意ナビゲーションバーの場合!通常、真ん中のコンテンツはflex-grow:1,ロゴとアバターは0に設定されます。**
3.フレックスシュリンク
十分なスペースがない場合の条件要素の収縮の度合い、値が大きいほど収縮は小さい。