Flex布局是一种CSS布局模型，它允许容器内的元素以灵活的方式排列，以适应不同的屏幕尺寸和方向。以下是如何使用Flex布局的一些基本步骤和属性：
指定容器为Flex布局
使用`display: flex`可以将一个容器设置为Flex容器。
```css
.container {
display: flex；
}
设置主轴和交叉轴容器默认存在两根轴：水平主轴和垂直的交叉轴。控制主轴方向使用`flex-direction`属性可以控制主轴的方向。```css.container {
display: flex；
flex-direction: row； /* 默认值，主轴从左到右 */
flex-direction: row-reverse； /* 主轴从右到左 */
flex-direction: column； /* 主轴从上到下 */
flex-direction: column-reverse； /* 主轴从下到上 */
}
控制子元素换行
使用`flex-wrap`属性可以控制子元素是否换行。
```css
.container {
display: flex；
flex-wrap: nowrap； /* 默认值，不换行 */
flex-wrap: wrap； /* 换行，第一行在上方 */
flex-wrap: wrap-reverse； /* 换行，第一行在下方 */
}
定义主轴上的对齐方式使用`justify-content`属性可以定义子元素在主轴上的对齐方式。```css.container {
display: flex；
justify-content: flex-start； /* 左对齐 */
justify-content: flex-end； /* 右对齐 */
justify-content: center； /* 居中对齐 */
justify-content: space-between； /* 两端对齐，中间空隙均匀分布 */
justify-content: space-around； /* 四周空隙均匀分布 */
}
定义交叉轴上的对齐方式
使用`align-items`属性可以定义子元素在交叉轴上的对齐方式。
```css
.container {
display: flex；
align-items: flex-start； /* 顶部对齐 */
align-items: flex-end； /* 底部对齐 */
align-items: center； /* 垂直居中对齐 */
align-items: baseline； /* 基线对齐 */
align-items: stretch； /* 拉伸填充交叉轴高度（默认值） */
}
定义多根轴线的对齐方式使用`align-content`属性可以定义多根轴线的对齐方式，但仅当存在多根轴线时有效。```css.container {
display: flex；
flex-wrap: wrap；
align-content: flex-start； /* 多根轴线起点对齐在交叉轴起点 */
align-content: flex-end； /* 多根轴线起点对齐在交叉轴终点 */
align-content: center； /* 多根轴线居中对齐 */
align-content: space-between； /* 多根轴线两端对齐，中间空隙均匀分布 */
align-content: space-around； /* 多根轴线四周空隙均匀分布 */
}
设置子元素的放大比例
使用`flex-grow`属性可以定义子元素的放大比例。
```css
.item {
flex-grow: 1； /* 子元素等分剩余空间（如果有的话） */
}
设置子元素的排列顺序使用`order`属性可以定义子元素的排列顺序。```css.item {
order: 1； /* 排列顺序，数值越小，排列越靠前，默认为0 */
}
其他属性
`min-height: 0`：在`flex:1`的样式中，使用`min-height: 0`可以解决子元素高度自适应问题。
`align-self`：可以单独设置某个子元素在交叉轴上的对齐方式。
```css
.item {
align-self: flex-start； /* 顶部对齐 */
align-self: flex-end； /* 底部对齐 */
align-self: center； /* 垂直居中对齐 */
align-self: baseline； /* 基线对齐 */
align-self: stretch； /* 拉伸填充交叉轴高度（默认值） */
}
使用Flex布局