flex 佈局

flex佈局就是彈性佈局，任何一個容器均可以指定flex佈局

display: flex； /* 定義容器爲彈性佈局，該容器表現爲塊級元素 */

display: inline-flex;  /* 定義容器爲行內彈性佈局,能夠爲它設置高度 */

div, span都是塊級彈性佈局:

div, span{ 
  display: flex;
}

div,span都是行內佈局(不換行,但能夠設置高度):

div, span{
  display: inline-flex;
}

彈性佈局分爲兩大塊:

彈性容器(父)的屬性  和 項目(子)元素的屬性；

父容器的屬性：

1. flex-direction  規定了子元素的排列方向:

  row 默認值,從左到右水平排列

  row-reverse 從右到左水平排列

  column 從上到下垂直排列

  column-reverse 從下到上垂直排列

div{
  display: flex;
  flex-direction: row | row-reverse | column | column-reverse;
}

 2. flex-wrap 規定了若是子元素在改排列方向排不下改怎麼換行:

  nowrap 默認值,不換行,若是子元素排不下會自動縮小該方向的值

  wrap 換行,排不下的子元素會另起一行

  wrap-reverse 換行,排不下的元素另起一行,而且排在以前元素的前邊

div{
  display: flex;
  flex-direction: row | row-reverse | column | column-reverse;
  flex-wrap: nowrap | wrap | wrap-reverse;
}

3. flex-flow 是 flex-direction、flex-wrap的簡寫 

4. justify-content 規定了子元素在該排列方向的對齊方式

  flex-start 默認值,從排列方向的起始方向對齊

  flex-end 起始方向的反方向對齊

  center 居中對齊

  space-between 兩端對齊

  space-around 子元素間隔相等,也就是說每一個子元素的margin相等(除了行末最後一項)

div{
  display: flex;
  flex-direction: row | row-reverse | column | column-reverse;
  flex-wrap: nowrap | wrap | wrap-reverse；
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

5.align-items  規定了子元素在該排列方向上的另一個軸的對齊方式(flex-direction規定從左到右排列，那麼align-items就是規定子元素從上到下怎麼對齊的)

  stretch 默認值，子元素未設置(或者設爲auto)高度或者寬度時該屬性將佔滿整個父容器的高或者寬

  flex-start 起始方向對齊(和子元素中的第一項的方向對齊)

  flex-end 終點方向對齊(和子元素中的最後一項的方向對齊)

  center 居中對齊

  baseline 和子元素的第一行文字對齊

div{
  display: flex;
  flex-direction: row | row-reverse | column | column-reverse;
  flex-wrap: nowrap | wrap | wrap-reverse；
  justify-content: flex-start | flex-end | center | space-between | space-around;
  align-items: stretch | flex-start | flex-end | center | baseline;
}

 

6.align-content  規定了當子元素有多行的時候對齊方式

  stretch 默認值，佔滿，剩餘空間平均分

  flex-start 起點對齊

  flex-end 終點對齊

  center 居中對齊

  space-between 兩端對齊

  space-around 子元素間隔相等,也就是說每一個子元素的margin相等(除了行末最後一項)

div{
  display: flex;
  flex-direction: row | row-reverse | column | column-reverse;
  flex-wrap: nowrap | wrap | wrap-reverse；
  justify-content: flex-start | flex-end | center | space-between | space-around;
  align-items: stretch | flex-start | flex-end | center | baseline;
  align-content: stretch | flex-start | flex-end | center | space-between | space-around
}

 

 

子項目屬性(容器內元素):

1.order 數值 默認爲0,排序越小排列越靠前

2.flex-grow 數值 默認值0不放大, 規定子元素的放大比例(每一個子元素都設置爲1就是等分父容器的剩餘空間，若是有剩餘空間的話)

3.flex-shrink 數值  默認值1縮小, 父容器不夠大的時候是否縮小子元素,默認是縮小,當有子元素設爲0的時候它自己不縮小，其餘值爲1的等比縮小

4.flex-basis  默認值爲auto, 根據這個屬性的值來計算父容器剩餘空間

5.flex  前面2.3.4的簡寫形式 默認值  0 1 auto 該屬性有兩個直接值 auto (1,1,auto)就是根據父容器來伸縮，none(0,0,auto) 不伸縮

6.align-self  能夠更改父容器align-items規定的值