【无标题】

Flex是CSS3中新增的一种布局方式，可以用来实现弹性布局，也即弹性盒子布局。它可以在容器内按照一定规则排列子元素，可以轻松实现响应式布局和页面自适应效果，使用非常灵活。

Flexbox有两种主要的概念：

1. 弹性容器（Flex Container）：指应用了flexbox布局的容器元素。可以设置display:flex或display:inline-flex来定义弹性容器。

2. 弹性子元素（Flex Item）：指弹性容器中的子元素。弹性子元素可以根据需要设置为可伸缩或不可伸缩。可以使用弹性子元素的属性控制弹性子元素在容器内的位置和尺寸。

---

以下是一些常见的Flexbox属性：

【容器的属性】

- display：设置为flex或inline-flex，表示容器是一种弹性盒子。

- flex-direction：设置子元素的排列方式，包括row（水平排列，从左到右）、row-reverse（水平排列，从右到左）、column（垂直排列，从上到下）、column-reverse（垂直排列，从下到上）。 - flex-wrap：设置子元素是否自动换行，包括wrap（自动换行）、nowrap（不自动换行）和wrap-reverse（反向自动换行）。

- flex-flow：是flex-direction和flex-wrap的简写形式。

- justify-content：设置子元素在容器中的水平方向的对齐方式，包括flex-start（靠左对齐）、flex-end（靠右对齐）、center（居中对齐）、space-between（两端对齐，子元素之间平均分布）和space-around（均匀分布，子元素与容器边框的距离相同）。

- align-items：设置子元素在容器中的垂直方向的对齐方式，包括flex-start（靠上对齐）、flex-end（靠下对齐）、center（居中对齐）、baseline（基准线对齐）和stretch（拉伸对齐，将子元素高度调整为相同）。 - align-content：设置多行子元素在容器中的垂直方向的对齐方式，只有在有多行子元素且没有占满整个容器时有效，包括flex-start（靠上对齐）、flex-end（靠下对齐）、center（居中对齐）、space-between（两端对齐，子元素之间平均分布）和space-around（均匀分布，子元素与容器边框的距离相同） 。

---

 【子元素的属性】

- order：可以给子元素设置一个数值，用于定义其排列顺序，数值越小越靠前。

- flex-grow：设置子元素的放大比例，如果值为0，则不放大，如果多个元素都有设置，则按照比例分配剩余空间。

- flex-shrink：设置子元素的缩小比例，如果值为0，则不缩小，在空间不足时先缩小flex-shrink值较大的子元素，缩小比例为子元素的flex-shrink值与剩余空间的比值。

- flex-basis：定义子元素在没有任何放大和缩小情况下的大小。

- flex：flex-grow、flex-shrink和flex-basis的缩写，可以同时设置这三个属性的值。

- align-self：可以覆盖容器的align-items属性，在容器中重新定义单个子元素的对齐方式。