最近開始對flex布局進行乙個重新的認識。
首先。flex布局適用於所有元素
但是注意一點的就是，一旦父級元素設定flex布局的時候，子元素的傳統布局屬性
, float,clear,vertical-align
屬性都會失效的。
一.父容器的屬性
1.flex-direction
是決定元素主軸的方向
row:預設值，由左到右正序。
row-reverse:有右到左的逆序
column:有上倒下的正序
column-reserve:由下到上的逆序
2.flex-wrap
是否換行
nowrap:預設值，不換行
(當元素數量和寬度超出父級，就會縮短自身寬度
)wrap:換行
(保留當前寬度，換行。且行高等於父級元素的一半
)wrap-reverse:由下向上換行，同
wrap
一樣，但如果父級寬度過低，那行高就為
13.justify-content
定義元素在父級x軸對齊方式
flex-start:預設值，元素左對齊。
flex-end:元素右對齊
center:元素中間對齊
space-between:元素等分兩邊對齊
space-around:元素等分，兩邊有間隔。且間隔是元素之間間隔的一半
4.align-items
定義元素在父級y軸對齊的方式
flex-start:元素上對齊
flex-end:元素下對其
center:元素居中顯示
stretch:預設值，如果沒設定高度，那麼高度就為
100%
；5.align-centent
當超過兩行的時候，上下對齊方式
flex-start:元素上對其
fled-end:元素下對其
center:元素劇中對齊
stretch:預設值，佔滿整個交叉軸
space-between:元素等分上下對齊
space-around:元素等分，上下又間隔，且間隔是元素之間間隔的一半
二、子元素的屬性
1.order
order預設值為
0，屬性定義元素的排列順序，最小越前
2.flex-grow
flex-grow預設值為
0，屬性定義元素寬高增大佔比，值越大佔比越大
3.flex-shrink
flex-shrink預設值為
1，屬性定義元素寬高縮小佔比，值越大縮小越大，負值無效
4.flex-basis
flex-basis預設值為
auto
，屬性意義和
width
相同，但是優先順序高於
width
5.align-self
align-self預設值是
flex-start,
屬性的定義和
align-items
相同，但是會覆蓋其樣式單獨定義
三、疑難點
1.align-items和
align-content
之間文字的區別？
很多人對這兩個屬性又一些不解，同樣都是操縱子元素y軸但是，
align-content
只能操作多
行，單行是無效的。而且align-content會重置
flex
專案元素對自身等分的行高問題。
話不多說乙個圖能代表一切：
這樣是不是就了解了
2.align-self和
align-items
之間的區別
相對於第乙個問題，這個就更簡單了，align-items是給子元素規定乙個統一樣式，而
align-self
是單獨的自己給自己樣式。
暫且有這麼多。以後在有問題在補充
flex布局 Flex布局
摘要 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序 以最佳方式填充可用空間 主要是為了適應所有型別的顯示裝置和螢幕大小 作者 星星 flex 是 flexible box 的縮寫，意為 彈性布局 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序...
布局（flex布局）
彈性盒模型 display flex，排列方式根據主軸方向排列。子元素超出預設不換行，而是進行壓縮 flex direction 彈性盒模型主軸方向設定 row 預設 從左到右 側軸 從上到下 row reverse 從右到左 側軸 從上到下 column 從上到下 側軸 從左到右 column r...
flex 平鋪布局 Flex 布局教程
網頁布局 layout 是 css 的乙個重點應用。布局的傳統解決方案，基於盒狀模型，依賴 display 屬性 position屬性 float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。2009年，w3c 提出了一種新的方案 flex 布局，可以簡便 完整 響應式地實現各種頁...