flex彈性盒子

垂直居中

傳統：絕對定位

flex：flexible box 彈性盒子。可以輕鬆控制元素的排列，對齊和順序。

宣告定義：

使用display：flex或display：inline-flex 宣告乙個容器為彈性盒子。這個容器中的子元素們，會遵循彈性布局。【注】一般是使用display:flex. inline-flex極少用。 flex:如果沒有為父元素設定寬，預設為100%；

inline-flex：如果沒有設定寬，，預設為所有子元素的寬的和

flex-direction

用於設定盒子中的子元素的排列方向。 row 從左到右水平排列子元素（預設值） column 從上往下垂直排列子元素 row-reverse 從右到左排列子元素

column-reverse 從下往上垂直排列子元素

flex-wrap

規定flex容器是單行還是多行，是否換行 nowrap:不換行（預設值） wrap：換行 wrap-reverse 反向換行。 flex-flow 是flex-direction與flex-wrap的組合寫法。

flex-flow:flex-direction flex-wrap；

彈性盒子與彈性元素

彈性盒子：指的是使用display：flex或display：inline-flex宣告的容器。

彈性元素：指的是彈性盒子中的子元素。

主軸與側軸（交叉軸）

主軸方向：為子元素排列的方向。可以通過flex-direction改變。

側軸方向：與主軸方向垂直，為子元素的換行方向。可以通過flex-wrap改變。

justify-content

用於控制彈性元素在主軸上的排列方式。 flex-start 元素緊靠主軸的起點（預設值） flex-end 元素緊靠主軸的終點。 center 元素在主軸上居中。 space-between 第一元素緊靠起點，最後乙個元素緊靠終點，餘下的元素平均分配剩餘空間。 space-around 每個元素兩側的間隔相等。元素之間的間隔比元素與容器邊框的間隔要大一倍。

space-evenly 元素間距平均分配

align-items

控制元素在側軸上的排列方式。多行單行都適用的屬性。 flex-start 從側軸開始的地方對齊 flex-end 從側軸結束的地方對齊 center 中間對齊

stretch 拉伸沒有設定側軸方向上的寬/高時，等於父盒子的寬或高。

align-content

控制元素在側軸上的排列方式。只適用於多行顯示的彈性容器。 stretch 拉伸 flex-start 元素緊靠行的起點 flex-end 元素緊靠行的終點 center 元素在行中居中 space-between 第乙個元素緊靠行的起點，最後乙個元素緊靠行的終點，餘下元素平均分配剩餘空間 space-around 元素在側軸方向上的間隔相等。

space-evenly 元素間距離平均分配

彈性元素：

不要再去設定float。設定完絕對定位後，該元素就不再是彈性元素了，不參與彈性布局。

彈性元素均為塊級元素。

align-self:

用於控制單個元素在側軸上的排列方式。 stretch 拉伸 flex-start flex-end

center

flex-grow

用於將彈性盒子的可用空間，按照比例分配給彈性元素。

flex-shrink

在彈性盒子裝不下子元素時，對子元素縮小的比例設定。 1.計算缺少的值。 2.當前元素應該縮小比例：80*2/(100*1+80*2+100*1)=44.4% 3.應該縮小的值：缺少的值*縮小的比例=80*44.4%=35.6px

4.最終尺寸：缺少的值-應該縮小的值 80-35.6=44.4px；

flex-basis

大部分情況下與寬度相等。優先順序比寬要高。定義了元素在主軸上的空間。復合寫法： flex：flex-grow flew-shrink flex-basis order:

用於控制彈性元素的位置。預設為0，數值越小越靠前。

【注】

1.文字節點也可以被彈性布局操作。

2.絕對定位的元素不參與彈性布局。

flex彈性盒子

彈性盒子 flex

flex彈性盒子

flex彈性盒子

相關推薦