css之flex屬性布局

一、前言

flex是flexible box的縮寫，意為」彈性布局」，用來為盒狀模型提供最大的靈活性。

注意，設為flex布局以後，子元素的float、clear和vertical-align屬性將失效。

菜鳥教程：

二、基本使用

1、 flex-direction（決定主軸的方向，即專案的排列方向）

row（預設值）：主軸為水平方向，起點在左端。 row-reverse：主軸為水平方向，起點在右端。 column：主軸為垂直方向，起點在上沿。

column-reverse：主軸為垂直方向，起點在下沿。

2、 flex-wrap（定義如何換行）

nowrap（預設值，不換行） wrap（換行）

wrap-reverse（換行，且顛倒行順序，第一行在下方）

3、flex-flow（屬性是 flex-direction 屬性和 flex-wrap 屬性的簡寫形式，預設值為row nowrap）

justify-content（設定或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式）

flex-start（預設值、彈性盒子元素將向行起始位置對齊）

flex-end（彈性盒子元素將向行結束位置對齊）

center（彈性盒子元素將向行中間位置對齊。該行的子元素將相互對齊並在行中居中對齊）

space-between（彈性盒子元素會平均地分布在行裡）

space-around（彈性盒子元素會平均地分布在行裡，兩端保留子元素與子元素之間間距大小的一半）

6.align-items（設定或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式）

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

flex-end（彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界）

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

baseline（如彈性盒子元素的行內軸與側軸為同一條，則該值與flex-start等效。其它情況下，該值將參與基線對齊。）

stretch（如果指定側軸大小的屬性值為』auto』，則其值會使專案的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照』min/max-width/height』屬性的限制）

7.align-content（設定或檢索彈性盒堆疊伸縮行的對齊方式）

flex-start（各行向彈性盒容器的起始位置堆疊。彈性盒容器中第一行的側軸起始邊界緊靠住該彈性盒容器的側軸起始邊界，之後的每一行都緊靠住前面一行）

flex-end（各行向彈性盒容器的結束位置堆疊。彈性盒容器中最後一行的側軸起結束界緊靠住該彈性盒容器的側軸結束邊界，之後的每一行都緊靠住前面一行）

center（各行向彈性盒容器的中間位置堆疊。各行兩兩緊靠住同時在彈性盒容器中居中對齊，保持彈性盒容器的側軸起始內容邊界和第一行之間的距離與該容器的側軸結束內容邊界與第最後一行之間的距離相等）

space-between（各行在彈性盒容器中平均分布。第一行的側軸起始邊界緊靠住彈性盒容器的側軸起始內容邊界，最後一行的側軸結束邊界緊靠住彈性盒容器的側軸結束內容邊界，剩餘的行則按一定方式在彈性盒視窗中排列，以保持兩兩之間的空間相等）

space-around（各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半。各行會按一定方式在彈性盒容器中排列，以保持兩兩之間的空間相等，同時第一行前面及最後一行後面的空間是其他空間的一半）

stretch（各行將會伸展以占用剩餘的空間。剩餘空間被所有行平分，以擴大它們的側軸尺寸）

二.子元素上屬性

1.order（預設情況下flex order會按照書寫順訓呈現，可以通過order屬性改變，數值小的在前面，還可以是負數）

2.flex-grow（設定或檢索彈性盒的擴充套件比率,根據彈性盒子元素所設定的擴充套件因子作為比率來分配剩餘空間）

3.flex-shrink（設定或檢索彈性盒的收縮比率,根據彈性盒子元素所設定的收縮因子作為比率來收縮空間）

4.flex-basis (設定或檢索彈性盒伸縮基準值，如果所有子元素的基準值之和大於剩餘空間，則會根據每項設定的基準值，按比率伸縮剩餘空間)

5.flex (flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選)

6.align-self (設定或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式，可以覆蓋父容器align-items的設定)