弹性布局属性以及全部用法详细讲解

弹性布局（Flexbox）是CSS3中的一种布局方式，它可以轻松地实现响应式设计和自适应布局。以下是Flexbox的常用属性及用法的详细讲解：

1. display

用于指定一个元素为flex容器，可以将其子元素设为flex项目。常见的值有flex和inline-flex，前者会将元素设置为块级元素，后者则会将元素设置为行内块级元素。

2. flex-direction

用于指定flex容器中主轴的方向。常见的值有row（默认值，水平方向）、row-reverse（水平方向，反向）、column（垂直方向）和column-reverse（垂直方向，反向）。

3. justify-content

用于指定flex容器中主轴上的对齐方式。常见的值有flex-start（默认值，左对齐）、flex-end（右对齐）、center（居中对齐）、space-between（两端对齐，项目之间的间隔相等）、space-around（每个项目两侧的间隔相等）和space-evenly（每个项目和两侧的间隔相等）。

4. align-items

用于指定flex容器中交叉轴上的对齐方式。常见的值有flex-start（上对齐）、flex-end（下对齐）、center（居中对齐）、stretch（拉伸对齐，子元素会被拉伸至与容器同高度）和baseline（以第一行文字的基线对齐）。

5. flex-wrap

用于指定flex容器中项目的换行方式。常见的值有nowrap（默认值，不换行）、wrap（换行）和wrap-reverse（反向换行）。

6. align-content

用于指定多行flex容器中交叉轴上的对齐方式。常见的值有flex-start（上对齐）、flex-end（下对齐）、center（居中对齐）、stretch（拉伸对齐，子元素会被拉伸至与容器同高度）和space-between（两端对齐，项目之间的间隔相等）。

7. flex-grow

用于指定flex项目的放大比例，默认值为0，表示不放大。可以设置一个数字，表示放大的比例，例如flex-grow: 1;表示该项目会占据剩余空间的比例。

8. flex-shrink

用于指定flex项目的缩小比例，默认值为1，表示可以缩小。可以设置一个数字，表示缩小的比例，例如flex-shrink: 0;表示该项目不会缩小。

9. flex-basis

用于指定flex项目的基准大小，默认值为auto，表示项目的原始大小。可以设置一个长度或百分比值，例如flex-basis: 50%;表示项目的基准大小为容器宽度的50%。

10. flex

用于指定flex-grow、flex-shrink和flex-basis这三个属性的缩写形式。例如flex: 1 0 50%;表示flex-grow为1，flex-shrink为0，flex-basis为50%。

以上是Flexbox的常用属性及用法的详细讲解，它们可以很好地实现弹性布局。