css3中新增一種彈性布局模型：flexbox。網上關於flex的介紹很多，這裡介紹下常用的幾個屬性。彈性布局的特點是非常靈活。可根據剩餘的寬高，靈活布局。
先用說明flex具有哪些屬性。（網上盜的圖）
上圖中flex容器即是父元素，flex專案為子元素。
屬性說明
1.首先在父元素中定義display:flex;
2.flex-direction:屬性用來控制伸縮容器中主軸的方向，同時也決定了伸縮專案子元素的方向。
flex-direction：row | row-reverse | column | column-reverse
效果如下:
3. justify-content: 設定子元素在橫軸上的對齊方式。
justify-content：flex-start | flex-end | center | space-between | space-around
效果如下：
4. align-items：定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。
align-items：
flex-start | flex-end | center | baseline | stretch
效果如下：
5. align-content：當伸縮容器的側軸還有多餘空間時，本屬性可以用來調準「伸縮行」在伸縮容器裡的對齊方式，這與調準伸縮專案在主軸上對齊方式的 屬性類似。
align-content：flex-start | flex-end | center | space-between | space-around | stretch
效果同justify-content屬性。
6.flex-wrap：該屬性控制flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向。
參考：
flex布局簡單總結
flex 是 flexible box 的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。注意 屬性名屬性值 備註display flex 定義了乙個flex容器，它的直接子元素會接受這個flex環境 flex direction row,row reverse,column,column r...
Flex布局簡單總結
複習到flex，總結一下方便檢視 以下6個屬性設定在容器上。屬性描述 值flex direction 決定主軸的方向 即專案的排列方向 row 預設值 row reverse column column reverse flex wrap 定義如何換行。nowrap 預設值 wrap wrap re...
flex布局 Flex布局
摘要 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序 以最佳方式填充可用空間 主要是為了適應所有型別的顯示裝置和螢幕大小 作者 星星 flex 是 flexible box 的縮寫，意為 彈性布局 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序...