# Flex 常用布局

Flex 布局是一种强大的 CSS 布局模型，用于构建灵活的、响应式的布局结构。它提供了更加简洁、强大的方式来控制元素在容器中的排列、对齐和分布。

# Flex 布局通过定义主轴和交叉轴来决定元素的排列方向。主轴是 Flex 容器的主要方向，而交叉轴则垂直于主轴。

• flex-direction： 控制 Flex 容器的主轴方向。
• justify-content： 控制子项在主轴上的对齐方式，如居中、两端对齐等。
• align-items 和 align-self： 控制子项在交叉轴上的对齐方式。
• gap： 简化了在 Flex 容器中设置子项之间间距的方式。

# 子项的尺寸可以根据可用空间自动调整，使得布局更具弹性。

• flex 属性： 可以指定子项的相对大小，使得它们在容器中按照比例分配空间。
• flex-wrap： 允许子项在容器内换行，实现多行布局。