Flex布局

彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。彈性容器通過設(shè)置 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。彈性容器內(nèi)包含了一個或多個彈性子元素。

flex-direction屬性

flex-direction屬性決定主軸的方向（即項目的排列方向）

row：橫向從左到右排列（左對齊），默認的排列方式。

flex-direction: row

row-reverse:反轉(zhuǎn)橫向排列（右對齊，從后往前排，最后一項排在最前面

flex-direction: row-reverse

column：縱向排列

flex-direction: column;

column-reverse：反轉(zhuǎn)縱向排列，從后往前排，最后一項排在最上面。

flex-direction: column-reverse

justify-content 屬性

內(nèi)容對齊（justify-content）屬性應用在彈性容器上，把彈性項沿著彈性容器的主軸線（main axis）對齊。

flex-start：(默認值)?左對齊

justify-content: flex-start

flex-end：右對齊

justify-content: flex-end

center：居中

justify-content: center

space-between：兩端對齊，項目之間的間隔相等

justify-content: space-between

space-around：彈性項目平均分布在該行上，兩邊留有一半的間隔空間。如果剩余空間為負或者只有一個彈性項，則該值等同于center。否則，彈性項目沿該行分布，且彼此間隔相等（比如是20px），同時首尾兩邊和彈性容器之間留有一半的間隔（1/2*20px=10px）。

justify-content: space-around

align-items 屬性

align-items?設(shè)置或檢索彈性盒子元素在側(cè)軸（縱軸）方向上的對齊方式。

flex-start：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界。

align-items: flex-start

flex-end：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界。

align-items: flex-end

center：彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。

align-items: center

baseline：如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。

align-items: baseline

stretch：如果項目未設(shè)置高度或設(shè)置為auto，將占滿整個容器的高度

align-items:stretch

flex-wrap 屬性

flex-wrap?屬性用于指定彈性盒子的子元素換行方式。

nowrap?- 默認， 彈性容器為單行。該情況下彈性子項可能會溢出容器。

flex-wrap: nowrap

wrap?- 彈性容器為多行。該情況下彈性子項溢出的部分會被放置到新行，子項內(nèi)部會發(fā)生斷行

flex-wrap: wrap

wrap-reverse?-反轉(zhuǎn) wrap 排列。

flex-wrap: wrap-reverse

align-content 屬性

align-content?屬性用于修改?flex-wrap?屬性的行為。類似于?align-items, 但它不是設(shè)置彈性子元素的對齊，而是設(shè)置各個行的對齊。定義多根軸線的對齊方式，如果項目只有一根，那么該屬性不起作用。

stretch?- 默認。各行將會伸展以占用剩余的空間。

flex-start?- 各行向彈性盒容器的起始位置堆疊。

flex-end?- 各行向彈性盒容器的結(jié)束位置堆疊。

center?-各行向彈性盒容器的中間位置堆疊。

space-between?-各行在彈性盒容器中平均分布。

space-around?- 各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半。

order?屬性設(shè)置彈性容器內(nèi)彈性子元素的屬性:

整數(shù)值來定義排列順序，數(shù)值小的排在前面?？梢詾樨撝?/p>

設(shè)置了?margin-right: auto;?。 它將剩余的空間放置在元素的右側(cè)：

margin: auto;?可以使得彈性子元素在兩上軸方向上完全居中:

練習：

垂直居中

水平居中

兩邊固定寬/高中間占滿剩余寬/高

兩邊占滿剩余寬/高中間固定寬/高

部分固定寬/高另一部分占滿剩余寬/高