blog

Vue Xiaokai bookkeeping フレックスレイアウトとフロートレイアウトのおさらい、センタリングテクニック

学んだcssレイアウトの内容はすべて忘れて、プロジェクトを書くことで、フレックスレイアウトとフロートレイアウトの使い方を再確認し、フレックスレイアウトとフロートレイアウトの使い方を理解できるようになり...

Nov 15, 2020 · 2 min. read
シェア

で書き込みます。

cssレイアウトを学んだ内容はすべて忘れ、執筆プロジェクトを通じて、フレックスレイアウトとフロートレイアウトの使い方を再確認し、フレックスレイアウトとフロートレイアウトの使い方を理解することができます。

フレックス・レイアウトについて復習しておきましょう:

まず、フレックスレイアウトはIE9と互換性がありません。

フレックス・レイアウトは、コンテナとアイテムを考慮する必要があります。

コンテナの場合,

  1. まず、コンテナの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.フレックスシュリンク

十分なスペースがない場合の条件要素の収縮の度合い、値が大きいほど収縮は小さい。

Read next

UIコンポーネントの初期アーキテクチャのアイデア

webpack-loader経由でdesign.mdからモデルオブジェクトを生成 コンポーネントモデルオブジェクト コンポーネントの開発と設計はうまく分離されています。コンポーネント設計はコンポーネント開発から切り離されますが、コンポーネントモデルはローダ経由で構築できます。コンポーネントモデルは、ビュー実装ライブラリから切り離されたコンポーネント化のアイデアにのみ依存します。このモデルは、任意のビューと組み合わせることができます。

Nov 15, 2020 · 2 min read