Flex布局是一种弹性布局模型，通过在容器中使用弹性盒子（Flexbox）进行布局，可以轻松实现响应式和灵活且自适应的页面布局。本文将介绍Flex布局的基本概念和使用方法。
弹性容器和弹性项目
Flex布局主要由两个概念组成：弹性容器和弹性项目。
弹性容器（Flex Container）是将一组元素包裹在一个父元素中，通过设置父元素的display属性为flex或inline-flex来定义。
弹性项目（Flex Item）是放置在弹性容器内的子元素，这些子元素将按照一定的规则在弹性容器内进行布局。
弹性容器属性
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或space-evenly。align-items：定义弹性项目在侧轴方向上的对齐方式，默认为stretch，可以设置为flex-start、flex-end、center、baseline或stretch。align-content：在存在多行弹性项目时，定义弹性项目在侧轴方向上的对齐方式，默认为stretch，可以设置为flex-start、flex-end、center、space-between、space-around或stretch。
弹性项目属性
Flex项目具有以下一些常用属性：
flex-grow：定义项目的放大比例，默认为0，表示不放大。flex-shrink：定义项目的缩小比例，默认为1，表示可以缩小。flex-basis：定义项目的初始宽度，默认为auto。flex：是flex-grow、flex-shrink和flex-basis的简写方式。align-self：定义弹性项目在侧轴方向上的对齐方式，会覆盖弹性容器的align-items属性。
实例演示
下面是一个实际的例子，演示了如何使用Flex布局进行页面布局：
<section class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</section>
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background-color: #f2f2f2;
}
.flex-item {
flex: 1;
text-align: center;
padding: 20px;
background-color: #ccc;
}
在上面的例子中，.flex-container是一个弹性容器，.flex-item是三个弹性项目。设置.flex-container的display:flex，使其成为一个弹性容器。通过设置justify-content: center和align-items: center，使弹性项目在容器内居中对齐。最后，为.flex-item添加一些样式，如flex: 1表示每个项目的放大比例为1，宽度平均分配，通过设置padding和background-color来增加样式。
总结
Flex布局是一种弹性和灵活的布局模型，通过设置弹性容器和弹性项目的属性，可以轻松实现响应式和自适应的页面布局。熟练掌握Flex布局的基本概念和使用方法，将能大大提高页面布局的效率和灵活性。
以上就是关于CSS Flex布局的介绍和使用方法。希望对你的学习和工作有所帮助！
参考资料：
本文来自极简博客，作者：灵魂画家，转载请注明原文链接：CSS Flex布局（弹性布局/弹性盒子）
