Flexbox屬性介紹

介紹

flexbox是HTML5中提出的新的佈局方式。
使用時，須要將父子節點的display都設置爲flex。
每一個參賽的效果能夠參考這裏

父節點屬性

flex-direction

控制子界點的方向。一共有4個值：

.container {
  flex-direction: row;   // default 從左往右，靠父節點左邊
  flex-direction: row-reverse;  // 從右往左，靠父節點右邊
  flex-direction: column;  //  從上往下，靠父節點頂部
  flex-direction: column-reverse;   //  從下往上，靠父節點底部
}

flex-wrap

控制子元素是不是如今在一行中。若是設置爲顯示到一行中，可是子元素的寬度和大於父節點寬度，那麼子元素會對應縮小。

.container {
  flex-wrap: nowrap;  // default 顯示到一行中
  flex-wrap: wrap;   //  多行顯示，行順序順序顯示
  flex-wrap: wrap-reverse;   //  多行顯示，行順序倒序顯示
}

flex-flow

flex-direction和flex-wrap兩個的簡寫。

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

超出父容易後的收縮比率。 舉個例子：父容器400px；有三個子元素，都是200px；當設置第三個子元素flex-shrink爲3時，子元素的收縮比率就是1:1:3。
一共超出父元素200px;那麼收縮的比率是40px:40px:120px; 也就是說子元素的實際展現寬是160px, 160px, 80px。

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

flex-basis

若是全部子元素的基準值之和大於剩餘空間，則會根據每項設置的基準值，按比率伸縮剩餘空間

.item {
  flex-basis: 10px;
}

flex

flex-grow, flex-shrink, flex-basis三者的簡寫。

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

order

控制子元素的順序。order會改變子元素排序的前後。

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