基礎篇3.4 align-items 設定側軸上的子元素排列方式（單行 ）
3.5 align-content 設定側軸上的子元素的排列方式（多行）
3.6 align-content 和align-items區別
3.7 flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的復合屬性
高階篇flex布局, 永遠滴神 !
示例1
class
="father"
>
>
div>
>
div>
>
div>
>
div>
>
div>
>
div>
div>
.father
.father>div
/*將父盒子元素修改為*/
flex-wrap
: wrap;
/*換行*/
.father
.father
.father>div
示例4 align-content : stretch(拉伸)
.father
.father>div
flex-direction
:row;
flex-wrap
:wrap;
乙個頂倆, 美汁汁
flex-flow
:row wrap;
class
="father"
>
>
div>
>
div>
>
div>
div>
flex 屬性定義子專案分配剩餘空間，用flex來表示佔多少份數。
.item
.father
.father>div
.father>div:nth-of-type(1)
.father>div:nth-of-type(2)
.father>div:nth-of-type(3)
預設值為 auto，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同於 stretch。
span:nth-child(2).father
.father>div
.father>div:nth-of-type(3)
注意：和 z-index 不一樣。
CSS3 Flex布局（容器）
item1 item2 item3 item4 item5 flex flow屬性是flex direction屬性和flex wrap屬性的簡寫形式，預設值為row nowrap。justify content屬性定義了專案在主軸上的對齊方式。align items屬性定義專案在交叉軸上如何對齊。...
CSS3 flex 布局 解析
今天整理下最近對flex的理解 flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。設為flex布局以後，子元素的float clear和vertical align屬性將失效。它即可以應用於容器中，也可以應用於行內元素，2009年，w3c提出了一種新的方案 f...
css3 Flex 布局教程
flex教程 flex例項篇 聖杯布局的實現 上部 header 和下部 footer 各自占領螢幕所有寬度。上下部之間的部分 container 是乙個三欄布局。三欄布局兩側寬度不變，中間部分自動填充整個區域。中間部分的高度是三欄中最高的區域的高度。header left left content...