CSSを理解する

Flexbox、レイアウトを設計する私たちの心に来る最初のもの.レイアウトのデザインは、これが簡単にFlexBox前に導入されていませんでした.
非常に複雑なUIに簡単なNavbarを設計することから、Flexboxは、その単純な構造と自然を維持するために簡単です.
簡単なコンセプトにダイビングする前に、HTML 5とCSSの基本的なビルディングブロックを知っていることを確認します.

基本的なビルディングブロック：

フレックスボックスには2つの主要な部分があります.最初はflex containerで、2番目はflex itemsです.フレックスコンテナは、フレックスアイテムとフレックスアイテムのラッパーです.

<section>
 <article>
  <p>lorem ipsum dolor ip somet</p>
 </article>
 <article>
  <p>lorem ipsum dolor ip somet</p>
 </article>
 <article>
  <p>lorem ipsum dolor ip somet</p>
 </article>
</section>

ここでは、セクションでは、フレックスコンテナとすべての記事フレックスアイテムです.このレイアウトをスタイルするには、Flex ContainerでFlexプロパティを使用する必要があります.

display: flex;
flex-direction: row;

このコードの可能な出力は、記事が列に表示されます.
デフォルトでは、flex方向は行として設定されます.また、フレックス方向の別のプロパティが列です.この背後にある主要な概念は、レイアウトを表示する2つの主要軸です.1である.メインアクシス2 .十字軸.
主な軸:主軸は、フレックス項目が(例えば、ページの向こう側の行、またはページの下の列として)レイアウトされた方向に動いている軸ですこの軸の開始と終了はメインスタートとメインエンドと呼ばれます.
十字軸:クロス軸は、フレックス項目がレイアウトされている方向に垂直に動いている軸です.この軸の開始と終了はクロススタートとクロスエンドと呼ばれます.

ラッピング

記事の数が10かそこらで増加するならば、行だけは、屈曲アイテムを正しく表示することができません.そして、それは包みが救世主として来るところです.それはすべてのアイテムが利用可能な幅の最小幅を取るような方法でフレックスアイテムを整理し、スペースがないときにフレックスアイテムの残りの部分に新しいラインにラップされる可能です.ラッピングは、ドキュメントがあふれるのを防ぎます.flex-wrap: wrapフレックス方向とフレックスラップの短縮flex-flow: column wrap

水平および垂直の配置：

これまでのところ、レイアウト要素を行または列に配置し、レイアウト要素がオーバーフローした場合、ラップを使用して防止できます.
Flexboxの最大の利点は、それは利用可能なスペースを計算し、均等にWebページの画面の幅に関係なくそれらを分割します.この利用可能なスペースは、水平および垂直軸の両方に合わせられることができます.
水平にしてスペース全体を等間隔で分割したい場合は、Definfy Contentプロパティを使用します.

section{
 display: flex;
 justify-content: center;
 flex-flow: row wrap;
}

これに加えて、垂直方向にそれらを整列させる必要があるかもしれません.これを行うには、上記のコードでプロパティalign-items: centerを追加する必要があります.
ここでは、行としてフレックス方向を使用して、ここでは、列としての方向を試してみるといいです.
その他のjustify-contentプロパティ:スペースの周り、スペース間、フレックススタートとフレックスエンドalign-itemsの特性:センター、屈曲開始、屈曲端、ストレッチ、ベースライン

制御フレックス項目：

今まで、我々はフレックスコンテナで働いているだけでなく、フレックスアイテムのいくつかのプロパティは、フレックスアイテムをより多くの電力を与える.
フレックス
Flexプロパティには、次の3つの値が指定されています
アイテムがどれくらいのスペースを取るかを表すUnitlessな値
オーバーフローを防ぐためにアイテムがどれほど縮小するかを表すもう一つのUnitless値
最後の値はアイテムが取る最小の幅です.
3つの値から成る速記がある.Flexの縮小は、高度なケースのために使用されるので、我々は今それを省略します.

article {
  flex: 1 200px;
}

article:nth-of-type(3) {
  flex: 2 200px;
}

これらのコードブロックは、全体の幅が4(1 + 1 + 2)分数の合計されることを示唆し、最初の2つの要素は、200 px幅の最小値を取得し、より多くの幅が利用可能であれば、彼らは残りのスペースの1/4を取るでしょう.三番目の要素だけが合計空間の半分を取得します.
セルフアライン
Flexコンテナで使用されるflex-growプロパティに加えて、flex-shrinkプロパティをオーバーライドします.
フレックス項目でflex-basisが指定されます.

align-self: flex-end;

フレックスアイテムの注文
デフォルトでは、各フレックス項目は0の順序を持ち、順序はその宣言位置に従って行われます.この順序は、flex項目のorderプロパティを使用して変更できます.

article:first-child{
 order:1
}

これは最終的に最後にフレックス項目の最初の要素を移動します.順序の値は負である.その場合、負の値が初期位置になります.
それで、これらはあなたがflexboxから始めるために知っている必要があることです.より明確でより簡単な考えを得るために、私はMDN's CSS layout documentationを提案します.