Flexbox 包含flex 容器和flex成員項(xiàng)。
使用方法：為容器設(shè)置display: flex;
direction
direction決定了文字方向和Flex容器的基線方向蔗怠。默認(rèn)值為ltr够话。
-
ltr: 文字和其他元素從左到右排布 -
rtl: 文字和其他元素從右到左排布。
flex-direction
flex-direction定義了 flex 容器中 flex 成員項(xiàng)的排列方向畅蹂，默認(rèn)值為 column
-
column：從上到下排列。 -
column-reverse: 從下到上排布 -
row：如果存在direction:ltr，則從左到右排布肾砂；如果存在direction:rtl，則從右到左排布宏悦。 -
row-reverse: 排布方向與flex-direction:row相反
#flex-wrap
flex-wrap屬性決定了Flex成員項(xiàng)在一行還是多行分布镐确，默認(rèn)值為nowrap
-
nowrap:Flex成員項(xiàng)在一行排布，排布的開始位置由direction指定饼煞。 -
wrap：Flex成員項(xiàng)在多行排布源葫，排布的開始位置由direction指定 -
wrap-reverse: 行為類似于wrap，排布方向與其相反砖瞧。
#justify-content
定義了 flex 容器中 flex 成員項(xiàng)在主軸方向上如何排列以處理空白部分息堂。可選值為 flex-start | flex-end | center | space-between块促，默認(rèn)值為 flex-start荣堰。
-
flex-start：是默認(rèn)值，所有的 flex 成員項(xiàng)都排列在容器的前部竭翠； -
flex-end：則意味著成員項(xiàng)排列在容器的后部振坚； -
center：即中間對齊，成員項(xiàng)排列在容器中間斋扰、兩邊留白渡八； -
space-between：表示兩端對齊，空白均勻地填充到 flex 成員項(xiàng)之間传货。
image.png
#align-items
定義了 flex 容器中 flex 成員項(xiàng)在縱軸方向上如何排列以處理空白部分屎鳍。可選值為 stretch | flex-start | center | flex-end问裕，默認(rèn)值為 stretch逮壁。
-
stretch是默認(rèn)值，即拉伸高度至 flex 容器的大辛竿稹窥淆； -
flex-start則是上對齊卖宠，所有的成員項(xiàng)排列在容器頂部； -
flex-end是下對齊祖乳，所有的成員項(xiàng)排列在容器底部逗堵； -
center是中間對齊，所有成員項(xiàng)都垂直地居中顯示眷昆。
image
#Flex 成員項(xiàng)
#flex
flex 屬性定義了 flex 成員項(xiàng)可以占用容器中剩余空間的大小蜒秤。如果所有的成員項(xiàng)設(shè)置相同的值 flex: 1，它們將平均分配剩余空間亚斋。如果一個(gè)成員項(xiàng)設(shè)置的值為 flex: 2作媚，其它的成員項(xiàng)設(shè)置的值為 flex: 1，那么這個(gè)成員項(xiàng)所占用的剩余空間是其它成員項(xiàng)的 2 倍帅刊。Flex 成員項(xiàng)暫不支持 flex-shrink 和 flex-basis 屬性纸泡。
-
flex {number}：值為 number 類型。
