flex 屬性用於設定或檢索彈性盒模型物件的子元素如何分配空間。
flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性。
比如：
#main#main div:nth-of-type(1)
#main div:nth-of-type(2)
#main div:nth-of-type(3)
#main div:nth-of-type(4)
#main div:nth-of-type(5)
那麼第二個div的寬度是其他的div的3倍，總共有1+1+1+1+3 = 7,那麼第二個佔150，其他幾個各佔50；
再比如：
<ul class
="flex"
>
<
li>a
li>
<
li>b
li>
<
li>c
li>
ul>
.flex
.flex :nth-child(1)
.flex :nth-child(2)
.flex :nth-child(3)
本例定義了父容器寬（即主軸寬）為800px，由於子元素設定了伸縮基準值flex-basis，相加300+200+400=900，那麼子元素將會溢位900-800=100px；
由於同時設定了收縮因子，所以加權綜合可得300*1+200*2+400*3=1900px；於是我們可以計算a,b,c將被移除的溢位量是多少：
a被移除溢位量：(300*1/1900)*100，即約等於16px
b被移除溢位量：(200*2/1900)*100，即約等於21px
c被移除溢位量：(400*3/1900)*100，即約等於63px
最後a,b,c的實際寬度分別為：300-16=284px, 200-21=179px, 400-63=337px
flex布局學習總結 阮一峰
基本概念 容器預設存在兩根軸 水平的主軸 main axis 和垂直的交叉軸 cross axis 主軸的開始位置 與邊框的交叉點 叫做main start，結束位置叫做main end 交叉軸的開始位置叫做cross start，結束位置叫做cross end。專案預設沿主軸排列。單個專案佔據的主...
flex布局知識點（阮一峰部落格）
任何乙個容器都可以指定為flex布局 行內元素也可以使用flex布局 設為flex布局以後，子元素的float,clear,vertical align屬性都將失效 flex容器的屬性 1 flex direction 2flex wrap 3flex flow 4justify content 5...
轉阮一峰大神的自適應網頁設計
隨著3g的普及，越來越多的人使用手機上網。移動裝置正超過桌面裝置，成為訪問網際網路的最常見終端。於是，網頁設計師不得不面對乙個難題 如何才能在不同大小的裝置上呈現同樣的網頁？手機的螢幕比較小，寬度通常在600畫素以下 pc的螢幕寬度，一般都在1000畫素以上 目前主流寬度是1366 768 有的還達...