采用Flex布局的元素稱為Flex容器（flex container），也就是flex的父元素。它有六個屬性： 1. flex-direction屬性 flex-direction屬性決定主軸的方

采用Flex布局的元素稱為Flex容器（flex container），也就是flex的父元素。它有六個屬性：

1. flex-direction屬性

flex-direction屬性決定主軸的方向，有四個值可選：row | row-reverse | column | column-reverse。

2. flex-wrap屬性

flex-wrap屬性定義如果一條軸線排不下時，如何換行。

3. flex-flow屬性

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

4. justify-content屬性

justify-content屬性定義了項目在主軸上的對齊方式，有五個值可選：flex-start | flex-end | center | space-between | space-around。

5. align-items屬性

align-items屬性定義了項目在交叉軸上的對齊方式，有五個值可選：flex-start | flex-end | center | baseline | stretch。

6. align-content屬性

align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。有六個值可選：flex-start | flex-end | center | space-between | space-around | stretch。

以上是CSS Flex布局的六個屬性，使用這些屬性可以靈活地控制元素的布局和對齊方式，實(shí)現(xiàn)各種復(fù)雜的布局效果。

如何使用CSS Flex布局

要使用CSS Flex布局，需要將父元素的display屬性設(shè)置為flex或inline-flex。然后，通過設(shè)置各個子元素的flex屬性來控制它們在容器中的占比。

例如，通過設(shè)置父容器的flex-direction屬性為row，子元素會水平排列；設(shè)置為column，子元素會垂直排列。通過設(shè)置父容器的justify-content屬性和align-items屬性，可以調(diào)整子元素在主軸和交叉軸上的對齊方式。

CSS Flex布局非常適合響應(yīng)式設(shè)計和移動端布局，能夠快速實(shí)現(xiàn)各種布局需求，并且兼容性良好。

總結(jié)：CSS Flex布局是一種強(qiáng)大的布局技術(shù)，通過靈活運(yùn)用其六個屬性，可以輕松實(shí)現(xiàn)各種復(fù)雜的布局效果。它是響應(yīng)式設(shè)計和移動端布局的首選工具之一。