css3彈性布局，可以輕鬆的排控制元素的排列、對齊和順序的控制。上篇利用css彈性布局中的justify-content和align-self屬性很便捷的完成了骰子點數的布局。在flex彈性布局中還有很多常用的屬性，下面來依次看看吧~
宣告彈性盒子
定義為彈性盒子（容器）display: flex;定義為內聯級彈性盒子display:inline-flex;
在不定義彈性容器寬度時，在彈性容器受到縮小時，容器裡的元素也會縮小。內聯級盒子與彈性盒子不同在容器大小會根據容器內容（容器元素）寬度自適應初始寬度。
注意：1、定義彈性容器後不能使用float和clear屬性 。2、彈性元素均為塊級元素。3、絕對定位的彈性元素不參與彈性布局。
flex-direction（用於控制盒子元素排列方向）
分別有四個值
row: 主軸方向從左到右水平排列元素（預設值）
row-reverse ： 主軸方向從右向左排列元素
column： 主軸方向從上到下垂直排列元素
column-reverse 主軸方向從下到上垂直排列元素
flex-wrap 規定flex容器是單行或者多行，同時主軸的方向決定了新行堆疊的方向
nowrap： 元素不拆行或不拆列（預設值）元素大小會被縮小
wrap： 容器元素在必要的時候拆行或拆列。元素的大小不會變
wrap-reverse 容器元素在必要的時候拆行或拆列，但是以相反的順序
flex-flow 是 flex-direction 與 flex-wrap 的組合簡寫模式。例flex-flow:row wrap;
justify-content用於控制元素在主軸上的排列方式（所有元素）
flex-start 元素緊靠主軸起點
flex-end 元素緊靠主軸終點
center 元素從彈性容器中心開始（居中）
space-between 第乙個元素靠起點，最後乙個元素靠終點，餘下元素平均分配空間
space-around 每個元素兩側的間隔相等
space-evenly 元素間距離平均分配
align-items用於控制容器元素在交叉軸上的排列方式
stretch 元素被拉伸以適應容器（預設值）
center 元素位於容器的中心（常用）
flex-start 元素位於容器的交叉軸開頭
flex-end 元素位於容器的交叉軸結尾
align-content適用於多行顯示的彈性容器，用於控制行
stretch 將空間平均分配給元素
flex-start 元素緊靠交叉軸起點
flex-end 元素緊靠交叉軸終點
center 元素從彈性容器中心開始
space-between 第乙個元素靠起點，最後乙個元素靠終點，其他元素平均分配空間
space-around 每個元素兩側的間隔相等
space-evenly 元素間距離平均分配
不同align-items的是align-items控制容器中所有元素的排列，content是控制行
align-self用於控制單個元素在交叉軸上的排列方式
stretch 將空間平均分配給元素
flex-start 元素緊靠主軸起點
flex-end 元素緊靠主軸終點
center 元素從彈性容器中心開始
例如控制元素一單個居中顯示
flex-grow用於將 彈性盒子的可用空間
分配給彈性元素可以使用整數或者小數，計算公式為：將可用空間分成若干份若干份是依據flex-grow後面填寫數字的總和每個填寫樣式元素根據原始寬度+所佔比例得出新的寬度
CSS3 彈性布局
掌握傳統布局與css3新增彈性布局方式的實現和應用 彈性布局 彈性伸縮布局 事實上它是一種新型別的盒子模型，也有書上稱作彈性伸縮盒布局。比較新的布局方式 旨在提供乙個更加有效的方式來布置，對齊和分布在容器之間的各項內容，即使它們的大小是未知或者動態變化的。彈性布局的主要思想是讓容器有能力來改變專案的...
CSS3彈性布局flex
彈性盒子由彈性容器 flex container 和彈性子元素 flex item 組成。彈性容器通過設定 display 屬性的值為 flex 或 inline flex將其定義為彈性容器。彈性容器內包含了乙個或多個彈性子元素。注意 彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素...
CSS3彈性盒布局
使用自適應的視窗彈性盒布局 可以使div總寬度等於瀏覽器寬度，而且可以隨著瀏覽器的改變而改變。12 zh cn 33536 container 37 left sidebar 示例文字，頁面中比較長的示例文字。示例文字，頁面中比較長的示例文字。示例文字，頁面中比較長的示例文字。示例文字，頁面中比較長...