 前言FlexibleBox 通常稱為“flexbox”，是一種一維的布局模型，俗稱“彈性布局”。它給flexbox的子元素之間提供了空間分布、對齊能力。 特點1、任何一個容器都可以指定flex 布局。 2、設置為flex容器后，子元素的float clear和vertical-align屬性將失效。 3、彈性容器直接包含的文本將被包覆成匿名彈性單元。 相關教程文章阮一峰(語法篇)：http://www./blog/2015/07/flex-grammar.html 阮一峰(實例篇)：http://www./blog/2015/07/flex-examples.html Flex相關屬性介紹示例代碼： <style>
ul {
display: flex;
list-style: none;
padding: 0;
}
li {
height: 100px;
width: 100px;
background-color: blueviolet;
text-align: center;
line-height: 100px;
margin: 10px;
color: white;
}
</style>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>一、display ul {
/* 塊級元素 */
dispaly: flex;
/* 內聯(lián)元素 */
dispaly: inline-flex;
}1.1、flex-direction(元素方向) row：默認左邊 ul {
flex-direction: row;
}
1.2、row-reverse 翻轉，從右邊位置開始
1.3、column 垂直方向,子元素由上向下排列
1.4、column-reverse 翻轉，子元素垂直排列。
二、flex-wrap(換行元素)2.1、nowrap 默認值，不進行換行。如果子元素累加寬度超過父元素，子元素會被擠扁。 ul {
// 這里設置的寬度比子元素加起來小
width: 310px;
flex-wrap: nowrap;
} 2.2、wrap 子元素總寬度超過父元素寬度 ，換行顯示。 ul {
flex-wrap: wrap;
}
2.3、flex-flow（復合屬性） flex-flow屬性是flex-direction和flex-wrap屬性簡寫形式，默認值：row nowrap; ul {
/* 屬性順序不受限制 */
flex-flow: wrap row;
flex-flow: row wrap;
}
三、 justify-content（水平對齊）針對主軸上的項目，設置一個水平對齊方式。根據主軸的方向不同，所表現的對齊形式是不同的，認準主軸方向即可，下面案例都是按水平方向排列的。 3.1、flex-start（左對齊） ul {
width: 600px;
background: rgb(186, 243, 128);
justify-content: flex-start;
} 3.2、flex-end（右對齊） ul {
justify-content: flex-end;
} 3.3、center（居中對齊） ul {
justify-content: center;
} 3.4、space-evenly（均勻分布） ul {
justify-content: space-evenly;
}3.5、space-around（項目間距） 中間項目的間距看起來要寬一些，是以為跟另一個項目的間距加在了一起。 ul {
justify-content: space-around;
}3.6、space-between （兩端對齊） 讓項目之間的間距相等，所以兩側的項目會緊緊挨著容器邊框。 ul {
justify-content: space-between;
}四、align-items（垂直對齊）作用于交叉軸上項目的對齊方式。下面案例的項目都是基于水平方向的主軸進行排列的。 4.1、flex-start（頂部對齊） ul {
height: 200px;
align-items: flex-start;
}
4.2、center（垂直居中） ul {
align-items: center;
}
五、align-content（整體內容垂直對齊）屬性需要設置flex-warp: wrap才起效果，這樣說明會有多跟軸線。主要用來設置整體內容在容器中的垂直對齊方式。 5.1、flex-start（頂部對齊） ul {
align-content: flex-start;
}5.2、center（垂直居中） ul {
align-content: center;
}
5.3、space-around（均勻分布） 多條軸線上的項目進行均勻分布，上下兩側的間距相等。 ul {
align-content: space-around;
}
5.4、space-between（兩端對齊） 基于交叉軸，頂部與底部進行對齊，中間的項目均勻分布。 ul {
align-content: space-between;
}六、擴大縮小比例6.1、flex-grow（擴大比例） 默認值為0，負數無效。當該值設置大于0時，元素寬度就會進行擴大，具體比例視實際情況而定。當只有兩個元素的時候，該值設置多大都1是一樣的效果。 <li style="flex-grow: 100;">A</li> <li>B</li>
當存在多個元素時，根據flex-grow的值大小來決定寬度的占比。 <li>A（默認值）</li> <li style="flex-grow: 1;">B（1）</li> <li style="flex-grow: 2;">C（2）</li>
6.2、flex-shrink（縮小比例） 默認值為 1 ，正數有效，設置負數無效。多個元素的值都為 1 時，等比例進行縮小。如果你設置了元素的寬度，當容器寬度不夠時，元素都是會跟著等比例縮小。
6.3、flex-basis（基礎寬度） <li>A</li> <li style="flex-basis: 100px; flex-grow: 1;">C</li> 七、flex（復合屬性）7.1、建議使用flex屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。 .item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}默認值為 0 1 auto 對應每個屬性的默認值。還可以設置為 none ，對應 0 0 auto 。 7.2、algn-self（垂直對齊） 用于覆蓋父容器的 align-items 屬性。align-self 的默認值為 auto ，其實就是繼承父容器的 align-items 屬性，所以 auto 等于 stretch 。 /* 可設置的屬性值 */
li {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}ul {
align-items: center;
}
li:first-child {
align-self: flex-start;
}
總結主要講述了flex布局，相比以前css寫法更高效，控制元素對齊更方便。flex布局一些常用屬性，如flex默認布局方向(橫向)、元素垂直居中justify-content、內容垂直居中align-content，元素占用比例flex-grop，盡量使用復合元素寫法flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]。 |
|
|
