Flexboxプロパティの説明

紹介する
flexboxはHTML 5で提案された新しいレイアウト方式です.使用する場合は、親子ノードのdisplayをflexに設定する必要があります.各参加の効果はこちらを参考にすることができます
親ノードのプロパティ
flex-direction
サブ境界点の方向を制御します.合計4つの値があります.

.container {
  flex-direction: row;   // default     ，      
  flex-direction: row-reverse;  //     ，      
  flex-direction: column;  //      ，      
  flex-direction: column-reverse;   //      ，      
}

flex-wrap
サブエレメントが現在1行にあるかどうかを制御します.行に表示するように設定されているが、子要素の幅が親ノードの幅より大きい場合、子要素は縮小に対応します.

.container {
  flex-wrap: nowrap;  // default       
  flex-wrap: wrap;   //      ，       
  flex-wrap: wrap-reverse;   //      ，       
}

flex-flow flex-directionとflex-wrapの2つの略語.

flex-flow: [flex-direction] [flex-wrap]

align-items
サブエレメントの上下揃えを制御します.全部で5つの値があります.

.container {
  align-items: flex-start;   //       
  align-items: flex-end;   //       
  align-items: center;   //      
  align-items: baseline;   //      baseline  
  align-items: stretch;   //     ，         
}

justfy-content
親コンテナの同方向の余分な空間の表示方法.6つの値があります.

.container {
  justfy-content: flex-start;   //      ，      
  justfy-content: flex-end;   //      ，      
  justfy-content: center;   //      ，         
  justfy-content: space-between;   //           
  justfy-content: space-around;    //           
}

align-content justfy-contentと同様に、親コンテナの垂直方向の余分な空間の表示を管理します.6つの値.

.container {
   align-content: flex-start;   //      ，
   align-content: flex-end;   //      
   align-content: center;   //      ，       
   align-content: stretch;   //           
   align-content: space-between;   //           
   align-content: space-round;   //           
}

サブノードのプロパティ
algin-self
同じalgin-itemですが、algin-selfはサブエレメント自体に作用します.6つの値があるはずです

.item {
  align-self: auto;   // default     ，      algin-item   
  align-self: flex-start;  //     
  align-self: flex-end;  //     
  align-self: center;  //     
  align-self: baseline;  // baseline  
  align-self: stretch;  //    
}

flex-grow
サブエレメント間のサイズスケール.

.item {
  width: 100px;
}
.item01 {
  flex-grow: 1;
}
.item02 {
  flex-grow: 2;
}

flex-shrink
親の収縮率を超えています.例を挙げると、親容器400 px;3つのサブ要素があり、いずれも200 pxです.第3のサブエレメントflex-shrinkが3に設定されると、サブエレメントの収縮率は1:1:3である.親要素200 pxを超えています.収縮の割合は40 px:40 px:120 pxである.すなわち,サブエレメントの実際の展示幅は160 px,160 px,80 pxである.

.container {
  width: 400px; 
}
.item {
  width: 200px;
}
.item03 {
  flex-shrink: 3;
}

flex-basis
すべてのサブエレメントのデータム値の合計が余剰スペースより大きい場合、各設定のデータム値に基づいて余剰スペースが比率で伸縮します.

.item {
  flex-basis: 10px;
}

flex flex-grow,flex-shrink,flex-basisの3つの略語.

.item {
  flex-grow: [flex-grow] [flex-shrink] [flex-basis];
}

order
サブエレメントの順序を制御します.orderはサブ要素のソートの前後を変更します.

.item01 {
  order: 2;
}
.item02 {
  order: 1;
}