CSS flexible Boxフレキシブルボックスモデル

ユーザインタフェースの設計を最適化し,弾性容器のサブ要素を任意の方向に配置できた.エレメントは伸縮可能です.
これにより、サブエレメントは未使用のスペースを満たすためにサイズを大きくすることができ、親エレメントのオーバーフローを回避するためにサイズを縮小することができ、親エレメントのサイズに適応することができます.
flexの利点:1.エレメントの整列が容易です.

.box {
        /*    flex contianer*/
	display: flex;
        /*      ，row   （ ，    ）， column    */
        flex-direction:row
}

containerと主軸プロパティ
display:flex/inline-flex
displayはflex containerを定義します.container内のすべてのサブ要素はflex itemsになります.
flex-direction:row/column/row-reverse/column-reverse
flex-direction:主軸方向を定義し、主軸に垂直な軸を交差軸と呼びます.
整列のプロパティの制御
justify-content:主軸上のすべての要素の位置合わせを制御する
align-items:交差軸上のすべての要素の位置合わせを制御する
align-self:交差軸上の単一flex itemの位置合わせを制御する
align-content:交差軸の位置合わせを制御するflex items
flex items(サブエレメント)プロパティ、
flex-grow,flex-shrinkは元素の充填または収縮の速度サイズとすることができる.
flex-grow:(余分なスペースがある場合)0、余分なスペースを埋めない;正数は、各サブ要素のflex-grow数値の割合に従って、余分な空間を割り当て、充填します.
(eg:3つのサブエレメント、第1のサブエレメントflex-grow=2、第2、第3のサブエレメントflex-grow=1であると、余分な空間の1/2が第1のサブエレメントに割り当てられる)
flex-shrink:(スペースが足りない場合)0、サイズを収縮しません.正数は、各サブエレメントのflex-shrink数値の割合に従って、異なる倍数の寸法を収縮します.
flex-basis:サブエレメントの初期寸法.
デフォルトはautoです.値がautoの場合、ブラウザはまず現在の要素に絶対寸法属性(width/height)設定があるかどうかを確認し、ある場合はflex-basis値として使用します.現在の要素が適応寸法(auto-sized)である場合、max-contentプロパティ寸法を要素サイズとして使用します.すなわち,その要素の内容にどれだけの空間が必要かに応じて,その要素にどれだけの空間が割り当てられるかである.要素の内容が空の場合、割り当てられたスペースのサイズは0です.
flex-grow、flex-shrink、flex-basisはflexプロパティと略記できます.
flex:initial = flex: 0 1 auto
flex: auto = flex: 1 1 auto
flex:none = flex : 0 0 auto

一般的な適用シーン

1.ナビゲーションバーは要素の位置合わせを簡単にコントロールできる

nav ul {
  display: flex;
}

nav li {
  flex: auto ;
}

2.エレメントの中央揃え

.box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.box div {
  width: 100px;
  height: 100px;
}

3.固定位于container底部的footer元素

.card {
    display: flex;
    flex-direction: column;
}

.card .content {
    flex: 1 1 auto;
}

    

        

            
This card doesn't have much content.
        
        
    
    

        

            
This card has a lot more content which means that it defines the height of the container the cards are in. I've laid the cards out using grid layout, so the cards themselves will stretch to the same height.
        
        
    

contentの内容にかかわらず、contentは自動的に余分な空間を埋め、footerは常にcontainerの下部に位置します.
4.マルチメディア要素(私はあまり使わない)
5.フォーム管理

.wrapper {
  display: flex;

}

.wrapper input[type="text"] {
    flex: 1 1 auto;
  }

        

            Label
            
            
        

      

リファレンス

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout