彈性布局定義

CSS3 彈性盒子（ Flexible Box） 也叫 彈性布局是一種當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時(shí)確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健?/p>

引入彈性盒布局模型的目的是提供一種更加有效的方式來對(duì)一個(gè)容器中的子元素進(jìn)行排列、對(duì)齊和分配空白空間。

優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：1 、布局方式多種多樣，包含了很多其他布局方式的特性

? ? ? ? ? ? 2、相對(duì)于使用浮動(dòng)，更加方便，也少了清除浮動(dòng)等麻煩

? ? ? ? ? ?3、?應(yīng)用恰當(dāng)?shù)膹椥圆季謱?duì)用戶十分友好。頁面中所有的元素可以隨著用戶的偏好縮放。

缺點(diǎn)：

? ? ? ? ? ? 1、因?yàn)椴季謽邮降亩喾N多樣，就需要花很多時(shí)間去理解和測試。布局難度相對(duì)較大

彈性盒子內(nèi)容

彈性盒子可以簡單分為彈性容器和容器成員

? ? ?容? 器：給一個(gè)盒子設(shè)置display:flex屬性或?inline-flex 后，它就變成了彈性容器（flex?container）

容器成員：它的所有子元素自動(dòng)成為容器成員，稱為flex彈性元素?（不包括孫元素和絕對(duì)定位元素），彈性布局只會(huì)修改子元素的布局方式

一、容器

彈性布局也可以大體分為主軸方向和輔軸方向

1、flex元素在輔軸之間的排列方式

①、主軸排列方向：flex-direction?

flex-direction: row? ?---默認(rèn)，?主軸方向?yàn)樗剑琭lex元素從左往右排列

flex-direction: row-reverse --- 主軸方向?yàn)樗剑琭lex元素從右往左排列

flex-direction:?column ---主軸方向?yàn)榇怪?，flex元素從上往下排列

flex-direction:column-reverse ---主軸方向?yàn)榇怪保琭lex元素從下往上排列

②、主軸方向的換行

flex-wrap:?nowrap ---默認(rèn)，flex元素的總寬度超過flex容器時(shí)不會(huì)換行，flex元素的寬度會(huì)自動(dòng)伸縮

flex-wrap: wrap ---flex元素的總寬度超過flex容器時(shí)會(huì)換行，flex元素寬度不變

flex-wrap:wrap-reverse ---反轉(zhuǎn)換行，（較少使用）

③、簡寫

flex-direction:?row;? ? ? flex-wrap:?wrap;? ?等同于flex-flow:?row?wrap;

flex-flow?是flex-direction和flex-wrap的簡寫形式，默認(rèn)值為row?nowrap

④、控制子盒子在主軸上的分布

justify-content：---flex元素在主軸上的分布

justify-content:?flex-start; ---(默認(rèn)) 從主軸前面開始

justify-content: flex-end;???---從主軸的后面開始

justify-content:?center;? ---在主軸的中間居中排列

justify-content:?space-between;? ---兩端分布盒子與盒子之間留有相同空白

justify-content:?space-around; ---兩端分布每個(gè)盒子左右兩邊都有相同的外間隔，且兩個(gè)子盒子之間的外間隔不會(huì)重疊

justify-content:?space-evenly; ---均勻分布，每個(gè)flex元素的間隔相等

2、?flex元素在輔軸之間的排列方式

align-content：flex元素在輔軸上的分布（以下例子主軸排列為 justify-content:?flex-start;）

align-content:?stretch; ---當(dāng)flex元素沒有設(shè)置高度或高度設(shè)置為auto時(shí),將flex元素的高度伸展

align-content:?flex-start; ---從輔軸開頭開始

align-content:?flex-end; ---從輔軸后面開始

align-content:?center; ---在輔軸上居中排列

align-content:?space-between; ---兩端分布盒子與盒子之間留有相同空白

align-content:?space-around; ---兩端分布每個(gè)盒子左右兩邊都有相同的外間隔，且兩個(gè)子盒子之間的外間隔不會(huì)重疊

align-content:?space-evenly; ---均勻分布，每個(gè)flex元素的間隔相等

3、flex元素之間的對(duì)齊方式

align-items?:flex元素之間的對(duì)齊方式

align-items:?stretch; ---當(dāng)flex元素沒有設(shè)置高度或高度設(shè)置為auto時(shí),將flex元素的高度伸展

（如果其中有一個(gè)設(shè)置了高度，則伸展長度為設(shè)置高度中的最大值）

align-items:?flex-start; ---頂部對(duì)齊

align-items:?flex-end; ---底部對(duì)齊

align-items:?center; ------居中對(duì)齊

align-items:?baseline; ---沿第一行文字的基線對(duì)齊

align-self: ---設(shè)置單個(gè)flex元素的對(duì)齊方式，可以覆蓋align-items的屬性

auto? ---默認(rèn)值。元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則為 "stretch"。

stretch? ---元素被拉伸以適應(yīng)容器。如果指定側(cè)軸大小的屬性值為'auto'，則其值會(huì)使項(xiàng)目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時(shí)會(huì)遵照'min/max-width/height'屬性的限制。

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

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

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

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

order? ---定義flex元素的排列順序，數(shù)值越小排列越靠前，默認(rèn)為0，?只能是整數(shù)?

flex-grow ---當(dāng)flex容器有剩余空間時(shí)，?flex元素如何分配剩余的空間 ，默認(rèn)0，?不放大，不占據(jù)剩余空間/1，?放大，占據(jù)剩余空間

flex-shirnk ---當(dāng)flex容器空間不足時(shí)，?flex元素是否縮小,默認(rèn)1，?flex元素等比例縮小 / 0，?不縮小

flex-basis ---flex元素本來的大小

?簡寫：? flex-grow:?1;? flex-shrink:?1;? ? flex-basis:?auto? 簡寫： flex:?1?1?auto;