在前端开发中，CSS的布局是至关重要的一部分。而Flex布局是CSS3中引入的一种弹性盒子布局模型，它能够简化开发者的布局过程，并提供了强大的灵活性。本文将介绍CSS Flex布局的基本概念和用法。
弹性容器和弹性项目
在Flex布局中，有两个关键的概念：弹性容器和弹性项目。弹性容器是指应用了Flex布局的容器元素，而弹性项目则是容器中直接作为子元素的项目。
弹性容器的属性
使用display: 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（项目周围间距相等）。align-items：设置项目在交叉轴上的对齐方式，可以是flex-start（起始对齐）、flex-end（末尾对齐）、center（居中对齐）、baseline（以基线对齐，如果项目具有基线，则会对齐到基线）或stretch（默认，拉伸以填满容器）。align-content：设置多行项目在交叉轴上的对齐方式，可以是flex-start（起始对齐）、flex-end（末尾对齐）、center（居中对齐）、space-between（两端对齐）或space-around（项目周围间距相等）。
弹性项目的属性
在弹性容器中的项目元素也可以使用一些属性来进一步控制它们的行为：
flex-grow：设置项目的放大比例，默认为0，表示不放大。如果所有项目的flex-grow都为1，则它们将等分剩余空间。该属性的值为一个非负整数。flex-shrink：设置项目的缩小比例，默认为1，表示等比缩小。如果所有项目的flex-shrink都为1，当空间不足时，它们将等比例缩小。该属性的值为一个非负整数。flex-basis：设置项目的初始尺寸，默认为auto（根据内容自动计算）。可以使用具体的长度值（如px或%），或者使用auto（根据内容自动计算）或fill（填满容器）。flex：设置上述三个属性的缩写，依次为flex-grow、flex-shrink和flex-basis。例如，flex: 1 1 auto;表示项目的放大比例、缩小比例和初始尺寸均为自动计算。align-self：设置单个项目在交叉轴上的对齐方式，覆盖容器的align-items属性。取值与align-items相同。
使用示例
下面是一个使用Flex布局的简单示例：
.container {
display: flex;
justify-content: center;
align-items: center;
}
.item {
flex: 1 1 auto;
height: 100px;
}
在上述示例中，.container是一个弹性容器，.item是其中的一个弹性项目。通过设置.container的justify-content和align-items属性，我们将其中的弹性项目水平和垂直居中显示，并且自动填满剩余空间。
总结
CSS Flex布局提供了一种强大且灵活的方式来进行页面布局。通过弹性容器和弹性项目的概念，我们可以轻松控制项目的排列、换行、对齐等行为。希望本文的指南能够帮助你更好地理解和应用CSS Flex布局。
参考资料：
本文来自极简博客，作者：青春无悔，转载请注明原文链接：CSS Flex布局指南
