一、 彈性佈局
在平時的我們常用的佈局類型有以下幾種：
{:;
}
input{
:;
}-webkit-)，可以隨使用者的喜好進行調節，可以將任何一個容器指定為Flex佈局。
注意：當我們使用了彈性佈局，那麼在CSS裡的float、clear和vertical-align就會失效。
二、 彈性佈局的屬性
首先是作為彈性佈局的容器的屬性。
1.flex-direction屬性
flex-direction決定了容器的方向。div {
flex-direction: row | row-reverse | column | column-reverse;
}2.flex-wrap屬性
預設情況下的佈局一般在同一行，當設定了flex-wrap屬性之後將自動將排列不下的內容進行換行。div{
flex-wrap: nowrap | wrap | wrap-reverse;
}3.flex-flow屬性
flex-flow屬性是以上兩種屬性的簡寫形式，預設值是row nowrap。
div {
flex-flow: <flex-direction> || <flex-wrap>;
}4.justify-content屬性
# # justify-content屬性定義了在容器方向上的對齊方式。div {
justify-content: flex-start | flex-end | center | space-between | space-around;
}flex-start(預設值)：向左對齊。
flex-end：向右對齊。
center： 居中對齊。
space-between：兩端對齊，每個子元素等距離間隔，子元素與容器邊框無間隔。
space-around：每個子元素兩側的間隔相等。子元素之間的間隔比子元素與容器邊框的間隔大一倍。
5.align-items屬性
align-items屬性定義在垂直容器方向上的對齊方式。div {
align-items: flex-start | flex-end | center | baseline | stretch;
}flex-start：垂直方向的起點對齊。
flex-end：垂直方向的終點對齊。
center：垂直方向的中點對準。
baseline: 與第一個子元素中文字的基線對齊。
stretch(預設值)：如果子元素沒有設定高度或高度設為auto，那麼它將佔滿整個容器的高度。
6.align-content屬性
align-content屬性定義了子元素兩種方向上的對齊方式。div {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
} flex-start：当容器方向子元素刚好填满时，与垂直方向的起点对齐。
flex-end：当容器方向子元素刚好填满时，与垂直方向的终点对齐。
center：当容器方向子元素刚好填满时，与垂直方向的中点对齐。
space-between：当容器方向子元素刚好填满时，垂直方向两端对齐，子元素之间的等距离间隔。
space-around：两个方向两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：占满整个垂直方向。
下面就是具有弹性布局容器中子元素的属性
1.order属性
order属性定义了子元素的排列顺序，数值小的在前。
.son {
order: <integer>;
}
2.flex-grow属性
flex-grow属性定义了子元素的放大比例，默认值为0。
.son {
flex-grow: <number>; /* default 0 */}当给所有子元素设置该属性为1，那么将等分所有空间，如果单独给某一个子元素设置n倍，那么该子元素将占据的空间比其他子元素多n倍。
3.flex-shrink属性
flex-shrink属性定义了子元素的缩小比例，默认值为1。
.son {
flex-shrink: <number>; /* default 1 */}给所有子元素设置该属性为1，当空间不足时那么所有子元素将等比例缩小平分所有空间，如果单独给某一个子元素设置0，那么该子元素将在空间不足时不缩小。
4.flex-basis属性
该属性定义了给子元素分配空间时其占据的空间为多少，可以设置为与其width和height属性一样的值，那么它将被分配固定的空间大小。
5.flex属性
该属性为flex-grow, flex-shrink 和 flex-basis的简写。
6.align-self属性
该属性允许设置过的子元素有与其他子元素不一样的对齐方式，可以覆盖align-items属性。
.son {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}auto：預設值，表示預設繼承父級的align-items屬性。
flex-start：垂直方向的起點對齊。
flex-end：垂直方向的終點對齊。
center：垂直方向的中點對準。
baseline: 與第一個子元素中文字的基線對齊。
stretch(預設值)：如果子元素沒有設定高度或高度設為auto，那麼它將佔滿整個容器的高度。
flex佈局（彈性佈局）
1.容器具備的屬性有：flex-dirction:(決定主軸的方向)（即項目排列方向） 取值:row/row-reverse/column/column-reverse/ flex-wrap:（如果一條軸線排不了，如何換行） 取值：nowrap（預設）：不換行。 wrap：換行，第一行在上方。 wrap-reverse：換行，第一行在下方。 flex-flow :（flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap） justify-content:(justify-content屬性定義了項目在主軸上的對齊方式。) 取值：flex-start（預設值）：左對齊flex-end：右對齊center： 居中space-between：兩端對齊，項目之間的間隔都相等。 space-around：每個項目兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。 align-items (交叉軸上如何對齊) 取值:flex-start/flex-end/center/baseline/stretch align-content(定義了多根軸線的對齊方式。如果專案只有一條軸線，該屬性不起作用) 取值： flex-start：與交叉軸的起點對齊。 flex-end：與交叉軸的終點對齊。 center：與交叉軸的中點對齊。 space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。 space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。 stretch（預設值）：軸線佔滿整個交叉軸。 2.項目的屬性： order屬性定義項目的排列順序。數值越小，排列越前，預設為0 flex-grow屬性定義項目的放大比例，預設為0，即如果存在剩餘空間，也不放大flex-shrink屬性定義了項目的縮小比例，預設為1，即如果空間不足，該項目將會縮小。 flex-basis專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即項目的本來大 小。 flex align-self 讓單一項目有與其他項目不一樣的對齊方式，可涵蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬 性，如果沒有父元素，則等同於stretch。
以上是彈性佈局（Flex佈局）的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
