Flex布局（Flexbox）是一种用于Web应用程序布局的CSS3模块。它使开发人员可以更直观和灵活地管理和控制网页中的元素位置、大小和间距。
使用Flex布局，您可以将容器分配给其子元素的空间，以及在子元素之间定义对齐方式、方向和顺序。这非常有用，特别是在构建自适应和响应式设计的过程中。
以下是使用Flex布局的步骤：
首先，在CSS中定义一个容器，将其设置为display: flex;。例如：
.container {
display: flex;
}
在容器中添加需要布局的子元素。默认情况下，这些子元素将横向排列。例如：
<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
使用flex属性定义每个子元素的宽度、高度、对齐方式和顺序等属性。例如：
.container div {
flex: 1; /* 等比例分配空间 */
margin-right: 10px; /* 添加右边距 */
align-self: center; /* 垂直居中 */
order: 2; /* 排序 */
}
通过这些步骤，您可以使用Flex布局轻松实现复杂的网页布局，并且具有很好的响应性和适应性。
