大家好，這里是demo鎖屏面試題，今天為大家分享的是flex布局。

flex布局：CSS3 彈性盒子(Flexible Box 或 Flexbox)，是一種用于在頁面上布置元素的布局模式，使得當(dāng)頁面布局必須適應(yīng)不同的屏幕尺寸和不同的顯示設(shè)備時，元素可預(yù)測地運行行/列。

對于學(xué)習(xí)flex布局我們得首先知道以下技術(shù)點：

--什么是容器，什么是項目，什么是主軸，什么是側(cè)軸？

--項目永遠(yuǎn)排列在主軸的正方向上

--彈性盒子模型分老版與新版：

??????老版本的我們通常稱之為box：-webkit-box

新版本的我們通常稱之為flex：-webkit-flex / flex

以下為大家介紹新版本flex布局

flex-direction：控制主軸是哪一根，控制主軸的方向，即控制容器的布局方向及排列方向。

row：從左往右的x軸

row-reverse：從右往左的x軸

column從上往下的y軸

column-reverse：從下往上的y軸

?

富?？臻g的管理：(只決定富?？臻g的位置，不會給項目區(qū)分配空間)

主軸justify-content

flex-start：在主軸的正方向

flex-end: 在主軸的反方向

center：在兩邊

space-between：在項目之間

space-around：在項目兩邊 ? ? ?

側(cè)軸align-items

flex-start：在側(cè)軸的正方向

flex-end：在側(cè)軸的反方向

center：在兩邊

baseline：基線對齊

stretch：等高布局（項目沒有高度）

?

彈性空間的管理：將富?？臻g按比例分配到各個項目上

flex-grow屬性定義彈性盒子項（flex item）的拉伸因子，默認(rèn)值為0。

可用空間 = (容器大小 - 所有相鄰項目flex-basis的總和)

可擴(kuò)展空間 = (可用空間/所有相鄰項目flex-grow的總和)

每項伸縮大小 = (伸縮基準(zhǔn)值 + (可擴(kuò)展空間 x flex-grow值))

?

flex-shrink屬性指定了 flex 元素的收縮因子? 默認(rèn)值為1，只有在 flex-wrap:nowrap時才有作用

?

flex-basis指定了 flex 元素在主軸方向上的初始大小

默認(rèn)值 ：auto ?不可繼承，注意：在flex簡寫屬性中flex-basis的默認(rèn)值為0

?

flex-wrap屬性控制了容器為單行/列還是多行/列。并且定義了側(cè)軸的方向，新行/列將沿側(cè)軸方向堆砌。

默認(rèn)值：nowrap?不可繼承

值：nowrap | wrap | wrap-reverse?

?

align-content屬性定義彈性容器的側(cè)軸方向上有額外空間時，如何排布每一行/列、也可理解為多行多列時,富?？臻g的管理，會把所有行、列看成一個整體。當(dāng)彈性容器只有一行/列時無作用

默認(rèn)值：stretch????不可繼承?

?

flex-flow屬性是設(shè)置“flex-direction”和“flex-wrap”的簡寫，控制主軸和側(cè)軸的位置以及方向

默認(rèn)值：row nowrap ???不可繼承

?

order屬性規(guī)定了彈性容器中的可伸縮項目在布局時的順序。元素按照 order 屬性的值的增序進(jìn)行布局。擁有相同 order 屬性值的元素按照它們在源代碼中出現(xiàn)的順序進(jìn)行布局，order越大越后。

默認(rèn)值：0 ??不可繼承

?

align-self會對齊當(dāng)前 flex 行中的 flex 元素，并覆蓋 align-items 的值. 如果任何 flex 元素的側(cè)軸方向 margin 值設(shè)置為 auto，則會忽略 align-self。

默認(rèn)值：auto ? ?不可繼承

?

flex是 flex-grow，flex-shrink，flex-basis 的簡寫屬性

默認(rèn)值??flex-grow: 0 ?不可繼承

?????????????flex-shrink: 1

?????????????flex-basis: auto?

值flex: none;/* 0 0 auto */

flex：1;/* 1 1 0% */

?

最后，給大家推薦一個flex練習(xí)網(wǎng)站：http://flexboxfroggy.com/

?