一剥汤、基本概念
-
理解基本概念
Flex 布局(彈性布局)，是一種用于在頁(yè)面上布置元素的布局模式排惨，使得當(dāng)頁(yè)面布局必須適應(yīng)不同的屏幕尺寸和不同的顯示設(shè)備時(shí)吭敢，元素可預(yù)測(cè)地運(yùn)行。
-
相關(guān)詞匯
圖中是一個(gè) flex-direction 屬性為 row 的彈性容器暮芭，意味著其內(nèi)的彈性項(xiàng)目將根據(jù)既定書寫模式沿主軸水平排列鹿驼，其方向?yàn)樵氐奈谋玖鞣较颍谶@個(gè)例子里辕宏，為從左到右畜晰。
"flex axis"-
彈性容器(Flex container)
彈性項(xiàng)目的父元素。通過設(shè)置
display:flex;或者display:inline-flex;來定義彈性容器瑞筐。 -
彈性項(xiàng)目(Flex item)
彈性容器的每個(gè)子元素都稱為彈性項(xiàng)目凄鼻。彈性容器直接包含的文本將被包覆成匿名彈性單元。
-
軸(Axis)
每個(gè)彈性框布局包含兩個(gè)軸聚假。彈性項(xiàng)目沿其依次排列的那根軸稱為主軸(main axis)块蚌。垂直于主軸的那根軸稱為側(cè)軸(cross axis)。
-
方向(Direction)
彈性容器的主軸起點(diǎn)(main start)/主軸終點(diǎn)(main end)和側(cè)軸起點(diǎn)(cross start)/側(cè)軸終點(diǎn)(cross end)描述了彈性項(xiàng)目排布的起點(diǎn)與終點(diǎn)魔策。它們具體取決于彈性容器的主軸與側(cè)軸中匈子，由 writing-mode 確立的方向（從左到右、從右到左闯袒，等等）虎敦。
-
行(Line)
根據(jù) flex-wrap 屬性游岳，彈性項(xiàng)目可以排布在單個(gè)行或者多個(gè)行中。此屬性控制側(cè)軸的方向和新行排列的方向其徙。
-
代碼示例
下述代碼使用了 flex 布局胚迫，使本來在文檔流布局中獨(dú)占一行的塊級(jí)元素 div ，變成了兩個(gè)同處一行之中唾那。
<!--
例一
-->
<style>
.parent{
border:solid 1px red;
display:flex;
background:#dde
}
.child{
border:solid 1px black;
height:50px;
width:100px;
background:#ddd;
margin:10px;
}
</style>
<div class="parent">
<div class="child child1"></div>
<div class="child child2"></div>
</div>
例一結(jié)果如下：
- flex 特點(diǎn)
- 塊級(jí)布局側(cè)重垂直方向访锻、行內(nèi)布局側(cè)重水平方向，flex布局是與方向無(wú)關(guān)的闹获。
- flex 布局可以實(shí)現(xiàn)空間自動(dòng)分配期犬、自動(dòng)對(duì)齊（flexible：彈性、靈活）避诽。
- flex 適用于簡(jiǎn)單的線性布局龟虎， 更復(fù)雜的布局要交到 grid 布局（還沒發(fā)布）。
二沙庐、flex container 的六個(gè)屬性
<!--
例二
為了便于理解鲤妥，用代碼實(shí)踐了這六個(gè)屬性
-->
<style>
* {
margin: 0px;
border:0px;
padding:0px;
}
.container {
display: flex;
border: 1px solid;
background: red;
}
.items {
border: 5px solid;
height:50px;
width:100px;
background:white;
}
</style>
<div class="container">
<div class="items item1">div1</div>
<div class="items item2">div2</div>
<div class="items item3">div3</div>
<div class="items item4">div4</div>
<div class="items item5">div5</div>
<div class="items item6">div6</div>
<div class="items item7">div7</div>
<div class="items item8">div8</div>
<div class="items item9">div9</div>
</div>
例二頁(yè)面展示結(jié)果：display:flex
-
flex-direction(方向)
這個(gè)屬性表明flex布局與方向無(wú)關(guān)，它有四個(gè)取值：
-
column
讓元素一列一列的展示拱雏。源代碼 flex-container 中由上到下排列的元素棉安，在頁(yè)面中展示為從頁(yè)面上方開始往下排列。
在例二中 .container 加上
flex-direction:column之后铸抑，頁(yè)面展示效果如下:flex-direction:column -
column-reverse
讓元素一列一列的展示贡耽。源代碼 flex-container 中由上到下排列的元素，在頁(yè)面中展示為從頁(yè)面下方開始往上排列羡滑。
在例二中 .container 加上
flex-direction:column-reverse之后菇爪，頁(yè)面展示效果如下:flex-direction:column-reverse -
row——默認(rèn)值
讓元素一行一行的展示。源代碼 flex-container 中由上到下排列的元素柒昏，在頁(yè)面中展示為從頁(yè)面左側(cè)開始往右排列凳宙。
在例二中 .container 加上
flex-direction:row之后，頁(yè)面展示效果如下:flex-direction:row -
row-reverse
讓元素一行一行的展示职祷。源代碼 flex-container 中由上到下排列的元素氏涩，在頁(yè)面中展示為從頁(yè)面右側(cè)開始往左排列。
在例二中 .container 加上
flex-direction:row-reverse之后有梆，頁(yè)面展示效果如下:flex-direction:row-reverse
-
-
flex-wrap(換行)
讓元素?fù)Q行是尖，默認(rèn)值為不換行 nowrap 。
在例二中 .container 加上
flex-wrap:wrap;之后泥耀，頁(yè)面展示效果如下:flex-wrap:wrap -
flex-flow(上面兩個(gè)的簡(jiǎn)寫)
flex-flow:row wrap; /*相當(dāng)于下面的css寫法*/ flex-direction:row; flex-wrap:wrap; -
justify-content(主軸方向?qū)R方式)
flex-container 中 items 主軸的對(duì)齊方式饺汹，主軸的方向即 flex-direction 的方向，它有五種取值:
-
align-items(側(cè)軸對(duì)齊方式)
flex-container 中 items 側(cè)軸的對(duì)齊方式凶硅，側(cè)軸方向即主軸方向的垂直方向，有五種取值:
align-content(多行/列內(nèi)容對(duì)齊方式---用的比較少)
三、flex item 的六個(gè)屬性
-
flex-grow ——增長(zhǎng)比例(空間過多時(shí))
flex-container 的空間減去 items 的空間之后剩余的空間衩匣，用 flex-grow 屬性分配給 item。
flex-shrink——收縮比例(空間不夠時(shí))
flex-basis——默認(rèn)大小(一般不用)
-
flex——上面三個(gè)的縮寫
.container{ display:flex } .items:nth-child(1) { flex:1 3 100px; } /* 用于表示：如果 container 有剩余空間是將剩余空間全部給 item1, 如果 container 的空間不夠時(shí)將 item1 按3的比例縮小粥航，如果空間剛剛好則設(shè)置 item 在主軸方向的長(zhǎng)度為 100px */ -
order——順序(代替雙飛翼)
使用 order 可以自定義的安排 items 的順序 琅捏，使用時(shí)要求每個(gè) item 寫入order，否則不生效递雀。
-
align-self——自身的對(duì)齊方式
使用 align-self 可以自定義某一個(gè) item 的對(duì)齊方式柄延，不然對(duì)齊方式繼承父級(jí)元素的對(duì)齊方式。
四缀程、例子
實(shí)現(xiàn)的頁(yè)面為：http://js.jirengu.com/pavux/3/edit?html,output
參考自http://codepen.io/team/css-tricks/pen/jqzNZq/?editors=1100
