Flex布局是一种强大的CSS布局模式，常用于响应式设计和移动端开发中。它在现代网页布局中越来越受欢迎。本篇文章将详细介绍Flex布局的各种属性和使用方法，帮助初学者快速掌握Flex布局。
一、Flex布局的概念与基础概括
Flex布局又称弹性布局，它使用flexbox使得容器有了弹性，更加适应各种设备的不同宽度，而不必依赖于传统的块状布局和浮动定位。它是CSS3中新增的规范，目前主流浏览器均已支持。值得一提的是，Flex布局不支持IE9及以下版本。
Flex布局中主要包含了以下五个概念：
1. 弹性容器（flex container）：采用Flex布局的外层容器。
2. 弹性项（flex item）：容器中的子元素。
3. 主轴（main axis）： 弹性容器的水平或垂直方向。
4. 交叉轴（cross axis）：与主轴垂直的方向。
5. 对齐方式（align）：设置弹性项在弹性容器内的对齐方式。
下面我们就来了解一下Flex布局的常见属性和使用方法。
二、弹性容器的基础使用
在使用Flex布局中，首先要指定一个弹性容器。我们可以通过设置display属性来将一个元素设置为弹性容器。比如：
.container {
display: flex;
}
上述代码中，.container为我们定义的弹性容器，使用display属性将其声明为弹性容器。
弹性容器有以下常见属性：
1. flex-direction：用于设置主轴的方向。它有四个取值：
- row：默认值，主轴为水平方向
- column：主轴为垂直方向
- row-reverse：主轴为水平方向，但是从右向左排列
- column-reverse：主轴为垂直方向，但是从下往上排列
比如：
.container {
display: flex;
flex-direction: column;
}
上述代码中，设置弹性容器的主轴方向为垂直方向。
2. flex-wrap：用于定义弹性容器里的弹性项是否应该换行。它有三个取值：
- nowrap：默认值，弹性项不换行
- wrap：弹性项自动换行，如果需要的话
- wrap-reverse：弹性项自动换行，但是倒序排列
比如：
.container {
display: flex;
flex-wrap: wrap;
}
上述代码中，设置子元素在容器中自动换行。
3. justify-content：定义在主轴上弹性项的对齐方式。它有五个取值：
- flex-start：默认值，弹性项在主轴上从左至右排列
- flex-end：弹性项在主轴上从右至左排列
- center：弹性项在主轴上居中排列
- space-between：弹性项在主轴上平均分布排列，左右两端没有空隙
- space-around：弹性项在主轴上平均分布排列，各自之间有空隙
比如：
.container {
display: flex;
justify-content: center;
}
上述代码中，设置弹性项在主轴上居中排列。
4. align-items：定义在交叉轴上弹性项的对齐方式。它有五个取值：
- flex-start：弹性项在交叉轴上从上至下排列
- flex-end：弹性项在交叉轴上从下至上排列
- center：弹性项在交叉轴上居中排列
- baseline：每个弹性项都根据其文本基线进行对齐
- stretch：默认值，弹性项在交叉轴上被拉伸填满弹性容器
比如：
.container {
display: flex;
align-items: center;
}
上述代码中，设置弹性项在交叉轴上居中排列。
5. align-content：定义弹性容器内的多行弹性项在交叉轴上的对齐方式。它有六个取值：
- flex-start：弹性项在交叉轴上从上至下排列
- flex-end：弹性项在交叉轴上从下至上排列
- center：弹性项在交叉轴上居中排列
- space-between：弹性项在交叉轴上平均分布排列，每行之间没有空隙
- space-around：弹性项在交叉轴上平均分布排列，每行之间有空隙
- stretch：默认值，弹性项在交叉轴上被拉伸填满弹性容器
比如：
.container {
display: flex;
align-content: center;
}
上述代码中，设置弹性容器内的多行弹性项在交叉轴上居中排列。
除了以上五个属性外，弹性容器还有如下属性可以使用：
- flex-flow：是flex-direction和flex-wrap的缩写属性，用于指定弹性容器的主轴方向和换行方式。默认值为“row nowrap”。
- gap：用于设置弹性容器和弹性项之间的间隔。它可以接收一个长度值或百分比。
.container {
gap: 20px;
}
上述代码中，设置弹性容器和弹性项之间的间隔为20px。
三、弹性项的基础使用
在弹性容器内添加子元素，就变成了弹性项（flex item）。不同于传统布局，Flex布局会根据弹性容器内的属性和内容进行位置布局。
弹性项有以下常见属性：
1. flex-grow：定义弹性项的放大比例。默认值为0，即不进行放大。
.item {
flex-grow: 2;
}
上述代码中，设置该弹性项在放大时会占据更多空间。
2. flex-shrink：设置弹性项的缩小比例。默认值为1，即缩小比例和弹性容器内其他元素相同。
.item {
flex-shrink: 2;
}
上述代码中，设置该弹性项在缩小时会占据更少的空间。
3. flex-basis：设置弹性项在弹性容器内的基准宽度。默认值为auto，即弹性项的宽度由其内容决定。
.item {
flex-basis: 50%;
}
上述代码中，设置该弹性项在弹性容器内占50%的空间。
4. flex：是flex-grow、flex-shrink和flex-basis这三个属性的缩写，它们按照顺序分别对应以上三个属性。默认值为“0 1 auto”。
.item {
flex: 1 2 100px;
}
上述代码中，设置该弹性项的放大比例为1，缩小比例为2，基准宽度为100px。
有话要说