1. 伸縮容器 display

• 語法

display: flex | inline-flex
flex: 塊伸縮容器
inline-flex:內(nèi)聯(lián)伸縮容器

注意：float,clear,vertical-align在伸縮項目上沒有效果

2. 伸縮流方向 flex-direction

主要用來定義主軸，從而定義了伸縮項目在容器中的伸縮方向

• 語法

flex-direction: row | row-reverse | column | column-reverse

• 參數(shù)功能

  • row：ltr排版下從左向右排列，rtl排版下從右向左

  • row-reverse：與row排列相反

  • column：類似row迎瞧，方向是從上到下

  • column-reverse：類似于row-reverse割捅，方向是從下到上

3. 伸縮換行flex-wrap

主要用來定義伸縮容器里是單行顯示還是多行顯示，側(cè)軸的方向決定了新行堆放的方向

• 語法

flex-wrap: nowrap | wrap | wrap-reverse

• 參數(shù)功能
  • nowrap：伸縮容器單行顯示忙灼，ltr從左到右，rtl從右到左
  • wrap：伸縮容器多行顯示，ltr從左到右棍弄，rtl從右到左
  • wrap-reverse：伸縮容器多行顯示，ltr從右到左疟游，rtl從左到右（與wrap相反）

4. 伸縮流方向與換行flex-flow

這是flex-direction和flex-wrap屬性的簡寫版,同時定義主軸和側(cè)軸

flex-flow: <'flex-direction'> | <'flex-wrap'>

• 參數(shù)功能
  • flex-direction：主軸
  • flex-wrap：側(cè)軸

注意：flex-flow與writing-mode有直接聯(lián)系,當(dāng)使用writing-mode: vertical-rl時轉(zhuǎn)向垂直布局呼畸，flex-flow:row將垂直排列伸縮項目，column將水平排列項目

5. 主軸對其justify-content

主要用來設(shè)置伸縮項目沿主軸線的對齊方式

• 語法

justify-content: flex-start | flex-end | center | space-between | space-around

• 參數(shù)功能
  • flex-start：伸縮項目向一行的起始位置靠齊
  • flex-end：伸縮項目向一行的結(jié)束位置靠齊
  • center：伸縮項目向一行中間位置靠齊
  • space-between：伸縮項目會平均地分布在行里颁虐，第一個項目在開始位置蛮原，最后一個項目在終點位置
  • space-around：伸縮項目會平均分布在行里，兩端保留一半的空間
    
    justify-content

6. 側(cè)軸對齊align-items和align-self

align-items控制伸縮項目在側(cè)軸的對齊方式另绩，align-self控制伸縮項目自身在側(cè)軸的對齊方式

align-items

• 語法

align-items: flex-start | flex-end | center | baseline | stretch

• 參數(shù)功能：
  • flex-start：伸縮項目靠側(cè)軸起始邊
  • flex-end：伸縮項目在側(cè)軸終點邊的外邊距靠住該行在側(cè)軸終點邊
  • center：伸縮項目的外邊距盒在該行的側(cè)軸上居中放置
  • baseline：伸縮項目根據(jù)伸縮項目的基線對齊
  • stretch：默認(rèn)值儒陨，伸縮項目拉伸填充整個伸縮容器
    
    align-items

align-self

align-self屬性主要用來設(shè)置單獨伸縮項目在側(cè)軸的對齊方式∷褡眩可以覆蓋該伸縮項目的伸縮容器的align-items屬性蹦漠。

• 語法

align-self: flex-start | flex-end | center | baseline | stretch

如果伸縮項目的任一個側(cè)軸上的外邊距為auto，則align-self沒有效果

align-self

align-content屬性會更改flex-wrap的行為车海，它和align-items相似笛园。主要來調(diào)準(zhǔn)伸縮行在伸縮容器中的對齊方式，與調(diào)準(zhǔn)伸縮項目在主軸上對齊方式的justify-content類似侍芝。

• 語法

align-content: flex-start | flex-end | center | space-between | space-around | stretch

• 參數(shù)功能
  • flex-start：各行向伸縮容器起點位置堆疊
  • flex-end:各行向伸縮容器結(jié)束位置堆疊
  • center：各行向伸縮容器的中間位置堆疊
  • space-between：各行在伸縮容器中平均分布
  • space-around：各行在在伸縮容器中平均分布喘沿，兩邊處各有一般的空間
  • stretch：默認(rèn)值，各行將會伸展以占用額外的空間