什么是Flex布局？
Flex布局，也被称为弹性盒子模型，是一种现代的CSS布局方法，旨在使网页布局更加灵活和自适应。通过使用Flex布局，可以轻松实现各种复杂的布局结构，如水平居中、垂直居中、等分布局等。
Flex容器和Flex项目
在Flex布局中，有两个关键概念：Flex容器和Flex项目。Flex容器指的是应用Flex布局的父级元素，而Flex项目则是指直接作为Flex容器的子元素。
通过为Flex容器设置display: flex;，可以将其转换为一个Flex容器，而默认情况下，容器的子元素都会成为Flex项目。
Flex容器属性
下面是一些常用的Flex容器属性：
-
flex-direction：指定Flex项目的排列方向，可以是row（水平排列）、column（垂直排列）、row-reverse（反向水平排列）、column-reverse（反向垂直排列）。 -
flex-wrap：定义当Flex项目超出容器时是否换行，可以是nowrap（不换行）、wrap（换行）、wrap-reverse（反向换行）。 -
justify-content：设置Flex项目在主轴上的对齐方式，可以是flex-start（靠近主轴起点对齐）、flex-end（靠近主轴终点对齐）、center（居中对齐）、space-between（两端对齐，项目之间间距相等）等。 -
align-items：设置Flex项目在交叉轴上的对齐方式，可以是flex-start（靠近交叉轴起点对齐）、flex-end（靠近交叉轴终点对齐）、center（居中对齐）、baseline（基线对齐，项目的基线对齐）等。 -
align-content：设置多行Flex项目在交叉轴上的对齐方式，可以是flex-start（靠近交叉轴起点对齐）、flex-end（靠近交叉轴终点对齐）、center（居中对齐）、space-between（两端对齐，项目之间间距相等）等。
Flex项目属性
下面是一些常用的Flex项目属性：
-
flex-grow：定义Flex项目的放大比例，默认值为0，表示不放大。 -
flex-shrink：定义Flex项目的缩小比例，默认值为1，表示可以缩小。 -
flex-basis：定义Flex项目的初始大小。 -
flex：结合flex-grow、flex-shrink和flex-basis属性，定义Flex项目的伸缩属性。 -
order：定义Flex项目的排列顺序，数值越小越靠前，默认值为0。
实现灵活布局的例子
下面是一个使用Flex布局实现灵活布局的例子：
<div class="flex-container">
<div class="flex-item">项目1</div>
<div class="flex-item">项目2</div>
<div class="flex-item">项目3</div>
</div>
.flex-container {
display: flex;
justify-content: center;
align-items: center;
}
.flex-item {
flex: 1;
text-align: center;
margin: 10px;
padding: 20px;
border: 1px solid #ccc;
}
上述代码中，Flex容器具有居中对齐的能力，而每个Flex项目都会根据空间平均分配宽度，灵活适应不同的屏幕尺寸。此外，每个Flex项目都具有边距、内边距和边框等样式，使布局更具美观性。
结语
通过学习Flex布局的相关属性和使用方法，我们可以轻松实现各种复杂的布局结构，提升网页的用户体验和视觉效果。希望本篇博客能够帮助到你灵活运用Flex布局，打造更好的网页布局！
本文来自极简博客，作者：落日之舞姬，转载请注明原文链接：Flex布局指南：解读弹性盒子模型的奥秘
