フレックスボックス/フレックスプロパティ

Flexbox/Flexは、CSSの重要な部分であり、興味深いです.しかし初心者には理解しにくい.flexboxはモジュール全体であり、単一のプロパティと混同されない.したがって、できるだけモジュールを単純化する試み.

TOC:

1. What is Flexbox?
2. Flex Container and Flex Items
3. Layout of a Flex container
4. Properties of Parent(Flex Container)
5. Properties of Children(Flex Items)

フレックスボックスとは

フレックスボックスは、レイアウトの効率的な方法を提供し、配置の項目の間のスペースを配布している場合でも、アイテムのサイズが不明または動的に自然です.
Flexboxの主な考えは、コンテナーは、使用可能なスペースを最適に満たすために、アイテムの幅と高さを変更することができ、ディスプレイデバイスと画面サイズのすべてのタイプに対応することです.
Flexboxは自由空間を埋めるために展開することができるか、オーバーフローを防ぐために縮小するので、それらはアプリケーションまたは小規模レイアウトのコンポーネントのために最も適している.これは、複雑なアプリケーションを作成するのに本当に役立つ.

フレックスコンテナとフレックスアイテム

親コンテナに設定されているプロパティは、Flexコンテナです.同様に、子に設定されているプロパティをFlex項目と呼びます.

フレックスコンテナのレイアウト

フレックスコンテナのレイアウトは、フレックスフロー方向に基づいています.項目は主軸または十字軸に従って配置される.

メイン軸:フレックスコンテナーの主軸は、フレックスアイテムがレイアウトされた主軸です.これは、水平方向または垂直方向のいずれかである可能性があります.
メインメインスタート/メインエンド:フレックスアイテムは、この境界の内側に配置されます.
主な大きさ:フレックス項目の幅または高さのいずれかの主な次元にある主なサイズと呼ばれます.上の図では容器の幅です.
交叉軸:主軸に垂直な軸は十字軸である.この軸の方向は主軸に依存する.
クロススタート/クロスエンド:アイテムはクロススタートからフレックスコンテナのクロスエンドに向かって満たされます.
クロスサイズ:クロスアイテムの幅または高さのいずれかのクロス次元では、クロスサイズと呼ばれます.上の図では容器の高さです.

親の特性

1 :ディスプレイ:フレックスコンテナを定義します.それは直接の子供のためのflexのコンテキストを提供します.

.container{
    display: flex;
}

2フレックス方向:主軸を設定し、方向項目を定義する.

.container{
    flex-direction:row|row-reverse|column|column-reverse;
}

3 flexwrap wrap :デフォルトで、項目は1行でレイアウトされます.だからラップは、より視覚的に魅力的な表現のための複数行を作ることができます.

.container{ 
   flex-wrap:nowrap|wrap|wrap-reverse;
 } 

/*nowrap: items are laid in one line(default value)
wrap: items are laid in multiple lines from top to bottom
wrap-reverse: items are laid in multi-line from bottom to top */ 

4フレックスフロー:それは、屈曲方向と屈曲ラップの組合せです.この短縮を使用して、両方のプロパティを一度に定義し、そのデフォルト値を「行Nowrap」に設定します.
5 Binary - content :メイン軸に沿った位置合わせを定義します.彼らが柔軟性があるか柔軟であるが、彼らの最大サイズに達したならば、資産はアイテムに自由空間を分配します.また、容器から溢れ出るアイテムも防ぎます.

.container{
    justify-content: flex-start|flex-end|center|space-evenly|space-between|space-around;
}

6.1アライメント:それは、十字軸でフレックスアイテムの振舞いを定義します.

.container{
 align-items:center|flex-start|flex-end|stretch|baseline
}

7アライメント内容:コンテンツを正当化するのと同じですが、クロス軸で.それはフレックスフローがラップまたはラップをラップするように設定されているマルチライン柔軟なコンテナにのみ効果を取ります.

子供のためのプロパティ(フレックスアイテム)

1:それはどのようにアイテムがフレックスコンテナに表示されるかを制御します.デフォルト値は0です

.item {
  order: 4; 
}

2フレキ-成長:それはアイテムが必要に応じてコンテナに成長することができます.値は、アイテムがどのくらいのスペースを取るかを示します.デフォルト値は0で、負の数は無効です.

.item {
  flex-grow: 3; 
}

3フレックス縮小:フレックスアイテムが必要に応じて縮小する能力.デフォルト値は1で、負の数は無効です.

.item {
  flex-shrink: 4; 
}

4フレックスベース:残りのスペースが分配される前に、それは要素のデフォルトサイズを定義します.

.item {
  flex-basis:  | auto; /* default auto */

/* If set to 0, the extra space around content isn’t factored in. If set to auto, the extra space is distributed based on its flex-grow value*/
}

フレックス:フレックス成長、フレックス収縮とフレックスベースの組合せです.個々のプロパティを設定するのではなく、この短縮プロパティを使用することをお勧めします.

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

6.1 Love - self : Align項目で指定された既定のアライメントまたは指定された項目を個々のフレックス項目でオーバーライドすることができます.

 .item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

私が理解したことは、いくつかのそれはまだ混乱している可能性がありますし、プロジェクトでこれらのプロパティを実装する場合にのみクリアすることができます.
参考文献
CSS-Tricks
W3schools.com
すべてのプロパティを学ぶ楽しい方法
FlexBox Froppy
私はブログであなたの考えを知って、私とLinkedIn handlesに従ってください.