在网页开发中，布局是一个非常重要的部分。过去使用传统的布局方法可能会遇到各种各样的问题，比如元素无法居中、容器高度无法自适应等等。而CSS Flexbox布局可以很好地解决这些问题。本文将介绍Flexbox布局的基本概念和用法。
什么是Flexbox布局？
Flexbox是CSS3的一种布局模型，通过使用Flex容器和Flex项目的概念，可以轻松实现弹性和自适应的网页布局。Flex容器是指包含了一组Flex项目的容器，而Flex项目则是指Flex容器中的每个子元素。
如何使用Flexbox布局？
要使用Flexbox布局，首先需要将一个容器设置为Flex容器。可以通过设置容器的display属性为flex或者inline-flex来实现。其中，flex表示块级Flex容器，inline-flex表示行内Flex容器。
.container {
display: flex; /* 或者：display: inline-flex; */
}
接下来，我们可以通过设置Flex项目的一些属性来调整项目的布局。以下是一些常用的Flex项目属性：
order：调整项目的排列顺序，默认为0，数字越小越靠前。flex-grow：设置项目的放大比例，默认为0，即不放大。如果所有的项目的flex-grow都为1，则它们将等分剩余空间。flex-shrink：设置项目的缩小比例，默认为1，即如果空间不足，项目将等比例缩小。如果设置为0，则不会缩小。flex-basis：定义项目在主轴上的大小，默认为auto，即由项目的内容决定大小。flex：是flex-grow、flex-shrink和flex-basis的简写，默认值为0 1 auto。align-self：设置单个项目在交叉轴上的对齐方式，覆盖容器的align-items属性。
.item {
order: 2;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 100px;
/* 或者：flex: 1 0 100px; */
align-self: center;
}
常用的Flexbox属性
除了为Flex项目设置属性之外，我们还可以为Flex容器设置一些属性来调整整个布局。以下是一些常用的Flex容器属性：
flex-direction：定义Flex项目的排列方向，默认为row。可以是row（水平排列）、column（垂直排列）、row-reverse（反向水平排列）或者column-reverse（反向垂直排列）。justify-content：定义Flex项目在主轴上的对齐方式。可以是flex-start（靠左/靠顶部）、flex-end（靠右/靠底部）、center（居中对齐）、space-between（两端对齐，项目之间等距离分布）、space-around（项目两侧空出等距离）或者space-evenly（项目之间和两侧都等距离分布）。align-items：定义Flex项目在交叉轴上的对齐方式。可以是flex-start（靠上/靠左）、flex-end（靠下/靠右）、center（居中对齐）、baseline（基线对齐）或者stretch（拉伸项目填满容器）。align-content：定义多行Flex项目在交叉轴上的对齐方式。只有在容器包含多行项目时才生效。可以是flex-start（靠上/靠左）、flex-end（靠下/靠右）、center（居中对齐）、space-between（两端对齐，项目之间等距离分布）、space-around（项目两侧空出等距离）或者stretch（拉伸项目填满容器）。
.container {
flex-direction: column;
justify-content: center;
align-items: center;
align-content: center;
}
兼容性
Flexbox布局几乎兼容所有现代浏览器，包括IE10+和所有主流移动浏览器。对于在旧版本IE或者移动设备上显示问题，可以使用相关的-webkit和-ms前缀属性进行兼容。
总结
CSS Flexbox布局是一个非常强大和灵活的布局模型，可以很好地解决网页布局中的各种问题。通过设置Flex容器和Flex项目的属性，我们可以轻松实现弹性和自适应的布局。希望本文对于理解和使用Flexbox布局有所帮助。
（图片来自Unsplash）
本文来自极简博客，作者：冰山一角，转载请注明原文链接：CSS Flexbox布局指南
