flex布局怎么用

Flex布局是一种CSS3的布局方式，可以更加方便地实现弹性布局，使页面布局更加灵活和自适应。以下是使用Flex布局的步骤：

在父元素上设置display属性为flex或inline-flex，表示该元素使用Flex布局。
在父元素上设置flex-direction属性，表示子元素的排列方向，可以设置为row（默认值，水平方向）、row-reverse（水平方向反向）、column（垂直方向）或column-reverse（垂直方向反向）。
在父元素上设置flex-wrap属性，表示子元素是否换行，可以设置为nowrap（默认值，不换行）、wrap（换行）或wrap-reverse（换行并反向）。
在父元素上设置justify-content属性，表示子元素在主轴方向上的对齐方式，可以设置为flex-start（默认值，左对齐）、flex-end（右对齐）、center（居中）、space-between（两端对齐，子元素之间间隔相等）或space-around（子元素前后间隔相等）。
在父元素上设置align-items属性，表示子元素在副轴方向上的对齐方式，可以设置为flex-start（顶部对齐）、flex-end（底部对齐）、center（居中）、baseline（基线对齐）或stretch（拉伸填满）。
在子元素上设置flex属性，表示子元素的占比（flex-grow）、缩放比例（flex-shrink）和基础大小（flex-basis），可以使用flex:1来表示默认的占比，即子元素平均分配剩余空间。
其他Flex布局的属性还包括align-self（子元素在副轴方向上的对齐方式）、order（子元素的排序）和flex-flow（flex-direction和flex-wrap的简写形式）等。

使用Flex布局可以灵活地调整布局方式，提高页面的响应性和适应性