flex彈性盒模型

flex 意思是彈性佈局，用來給盒模型提供最大的靈活度，指定容器中的項目爲彈性佈局，相似於float:left;

比float的好處是容器沒有設置高度，會根據項目來自適應高度，咱們都知道，設置float屬性，若是沒有設置高度，那麼容器會脫離文檔流，須要清除浮動，才能夠根據項目的高度規定高度。

父元素稱之爲容器，子元素稱之爲項目

水平的方向叫主軸， 水平和垂直交叉點，稱之爲交叉軸

flex中若是子元素中的總寬度不超過父級，那麼就正常排列，

flex中若是子元素中的總寬度超過父元素，那麼就按照父級的寬度均分，並且不受邊框和內邊距的影響

下面是代碼，設置了display:flex，容器中的項目則自動左浮動，且ul沒有設置高度，

 

效果

 flex-direction 改屬性決定了項目（即子元素）排列的方向

 

row(默認值)水平方向左以左邊爲起點排列

row-reverse 水平方向以右邊終點爲起點排列

代碼

效果

column 垂直方向，起點在左上角

代碼

效果

column-reverse 垂直方向，起點在下邊，相似於把子元素翻轉了

代碼

效果

flex-wrap:wrap 設置了該屬性，若是子元素的寬度超出了父元素的寬度，則會換行

上面說了設置了dispay:flex，flex中若是子元素中的總寬度不超過父級，那麼就正常排列（按照實際像素排列），

flex中若是子元素中的總寬度超過父元素，那麼就按照父級的寬度（按百分比）均分，並且不受邊框和內邊距的影響

 

咱們有時候想即便子元素的寬度超過了父元素的寬度，想讓子元素不按照百分比，按照實際像素換行，那麼咱們能夠設置flex-wrap；wrap

 下面的子元素的總寬度明顯超出了父元素的總寬度，超出則按照父元素寬度的百分比排列，子元素的實際寬度失效。

 

效果

 

那麼我想讓子元素的寬度即便超出了父元素的寬度，不須要按照百分比，則是按照子元素的實際寬度排列，咱們這裏能夠設置flex-wrap:wrap屬性就能夠

 

效果以下

能夠看出設置了flex-wrap:wrap，子元素的寬度超出了父元素的寬度，就按照子元素的實際寬度排列，就會換行。