CSS関連、フレックスレイアウトはオールパスです！

ルート探索ソースのレイアウト

すべては質問から始まります：CSSを使用して水平方向と垂直方向のセンタリングを同時に簡単かつエレガントに実現する方法。

CSSの学習の始まりを覚えて、参照floatプロパティは、ヘルプ感が輝くことができませんでした、整列に使用するWord文書のレイアウトを左に考えることが論理的、右揃えと中心。

しかし、すぐには存在しないCSSを見つけるために失望しfloat: center、その後、書き込みtext-align: center、verticle-align: centerそれが実現可能かどうか？答えはノーです。

これらの2つの属性はインライン要素にのみ使用でき、ブロックレベルの要素のレイアウトには無効です。

年齢はほとんどでCSSレイアウトのページレイアウトを入力していなかったtableで実装要素tableユニットが簡単にジェリーを使用することができalign、valign徐々に文言によって忘れセマンティックウェブの有病率は、と、水平方向と垂直方向の配置を達成するために。

CSSの標準は、レイアウトの3種類を提供してくれます：标准文档流、浮动布局と定位布局。これらの方法を組み合わせると、PCサイドページの一般的なニーズを簡単に解決できます。たとえば、水平方向の中央揃えを使用しmargin: 0 autoたり、水平方向および垂直方向の中央揃えを次のように設定したりできます。

.dad { 
    位置：相対 ; 
} 
.son { 
    位置：絶対 ; 
    マージン：自動 ; 
    上：0 ; 
    右：0 ; 
    下部：0 ; 
    左：0 ; 
}

.dad { 
    位置：相対 ; 
} 
.son { 
    width：100px ; 
    高さ：100px ; 
    位置：絶対 ; 
    上：50％ ; 
    左：50％ ; 
    margin-top：-50px ; 
    margin-left：-50px ; 
}

これらの書き込み方法にはいくつかの欠点があります。セマンティクスの欠如と十分な柔軟性の欠如です。

必要なのは、1つの属性を通じて子要素の中央揃えまたは均一な分布を実現し、ウィンドウのズームに自動的に適応することです。

そんな要望のもと、CSSの4つ目のレイアウト方法が誕生しましたが、これが今日注目するフレックスレイアウトです。

フレックスの基本的な概念

フレックスレイアウトを使用するには、まず親コンテナ display: flexを設定してから justify-content: center 、水平方向の中央揃えを設定し、最後にalign-items: center 垂直方向の中央揃えを設定します。

#dad { 
    display：flex ; 
    justify-content：center ; 
    align-items：center
 }

とても簡単です。これで完了です。

アメリカからjustify-content と align-items 話二つの基本的な概念について始めます。

これは、概念は、フレックスの中核である、非常に困難だったコンテナとの軸。

外側容器が含む親コンテナと内側副容器を含むシャフト主軸と交差軸は、フレックスのレイアウトのすべての特性は、二つの概念に基づいて構築されていると言うことができます。

フレックスレイアウトにはdisplay: flex、6つの親コンテナと6つの子コンテナを含む12のCSS属性（含まれていません）が含まれます。ただし、一般的に使用される属性は4つしかなく、2つは親コンテナ用で、2つは子コンテナ用です。まず、一般的に使用されるものから始めましょう。

1. 容器

コンテナには次のような特徴があります。親コンテナは子コンテナの配置を均一に設定でき、子コンテナも独自の配置を設定できます。両方を同時に設定すると、子コンテナの設定が優先されます。

1.1親コンテナ

サブコンテナを主軸に沿って配置するように設定します：justify-content

justify-content この属性は、主軸に沿ってサブコンテナを配置する方法を定義するために使用されます。

サブコンテナが交差軸に沿ってどのように配置されるかを設定します：align-items

align-items 属性は、交差軸に沿ってサブコンテナーの間隔をどのように配分するかを定義するために使用されます。

ベースライン：ベースラインの配置。ここでのベースラインは、デフォルトではテキストの最初の行、つまり最初のベースラインを指します。すべてのサブコンテナはベースラインに配置されます。クロス軸の始点から要素のベースラインまでの距離が最大のサブコンテナは、クロス軸の始点に接して、ベースラインを決定します。

ストレッチ：子コンテナの軸方向に沿ったサイズは、親コンテナと一致するようにストレッチされます。

1.2 子容器

スピンドルでストレッチする方法：フレックス

サブ容器はフレキシブル（フレックスすなわち弾性）であり、それらは自動的にサブの延伸比で容器の残りの空間を充填するflex決定属性。

flex値が（例えば：1、2、3）無単位数であってもよい、一桁があってもよい（例：15ピクセル、30px、60PX）、それがあってもよいnoneキーワード。

サブタンクによるであろうflex値であれば、自動的に、定義されたサイズ比をリトラクタブルnoneリトラクタブルありません。

なお、flex連動値に3が、通常は図の全てを参照して書き込むことができる値でのニーズを満たすために- 1を可能にする略語プロパティの装置。

サブコンテナが交差軸に沿ってどのように配置されるかを個別に設定します：align-self

各子コンテナは、交差軸に沿って配置されるように個別に定義することもできます。このプロパティのオプション値は、親コンテナalign-items プロパティとまったく同じです。2つが同時に設定されている場合、子コンテナ align-self プロパティが優先されます。

2.シャフト

示されるように、シャフトが備えるスピンドルと交差軸を、我々は知っているjustify-content属性は、サブタンクの主軸に沿って配置を決定します。

align-items 属性は、交差軸に沿った子コンテナーの配置を決定します。

では、軸自体はどのように決定されるのでしょうか？フレックスレイアウトでは、flex-direction属性によって主軸の方向が決まり、交差軸の方向は主軸によって決まります。

スピンドル

スピンドルの開始端はで flex-start 示され、終了セグメントはでflex-end 示されます。異なるスピンドル方向に対応する開始セグメントと終了セグメントの位置も異なります。

交差軸

スピンドルは、交差軸を与えるために回転反時計回りに90°、交差軸とも始端段落の終わりであるflex-startとflex-end図。

上記のいくつかの属性は、フレックスレイアウトの最も一般的に使用される部分です。一般的に、これらの属性はほとんどのニーズを満たすことができます。複雑なレイアウトを実装する場合は、属性について詳しく知る必要があります。

フレックスアドバンスドコンセプト

改行モードを設定します：flex-wrap

サブコンテナを行で折り返すかどうかを決定します。順番に折り返すだけでなく、反転することもできます。

逆順の改行は、交差軸の反対方向に沿った改行を指します。

アキシャルとラインフィードの組み合わせ設定：フレックスフロー

即ちすなわちサブタンクの流れる方向に、流れへの流れ、例えば、改行の端部に流れることができるflex-flow: row wrap、flex-flow必要に応じて値を以下、フレックス方向フレックスラップの組み合わせに対応する、複合プロパティです。
- row、column等、別々主軸方向を設けてもよいです
- wrap、nowrap等、個別にラップモードを提供することができます
- row nowrap、column wrapなど、またはその両方
交差軸に沿って複数の線を揃えます：align-content

サブコンテナが複数の行に配置されている場合は、行間の配置を設定します。