在前端开发中，弹性布局是一种强大且实用的布局模式，它能够帮助开发者更轻松地创建灵活、响应式的页面布局。
Flex属性
flex 属性是一个用于弹性布局（Flexible Box Layout，简称 Flexbox）的复合属性，它是 flex-grow、flex-shrink 和 flex-basis这三个属性的缩写，用于定义弹性项目（flex item）在弹性容器（flex container）内如何分配空间。
1. flex-grow
- 作用 ：定义弹性项目的放大比例。当弹性容器的剩余空间为正值时，该属性会根据各个弹性项目的
flex-grow值来分配这些剩余空间。 - 取值 ：一个非负的数值，默认值为
0，表示不放大。
2. flex-shrink
- 作用 ：定义弹性项目的缩小比例。当弹性容器的空间不足时，该属性会根据各个弹性项目的
flex-shrink值来缩小这些项目。 - 取值 ：一个非负的数值，默认值为
1，表示会缩小。
3. flex-basis
- 作用：定义弹性项目在分配剩余空间之前的初始大小。
- 取值 ：可以是一个长度值（如
px、em等），也可以是一个百分比，还可以是auto（默认值），表示根据项目的内容自动确定大小。
4. flex 属性
-
作用 ：作为
flex-grow、flex-shrink和flex-basis的缩写，用于一次性设置这三个属性。 -
取值：
- 单值语法 ：可以是一个无单位的数值（相当于
flex-grow），也可以是一个长度值或百分比（相当于flex-basis），还可以是none、auto或initial。 - 双值语法 ：第一个值必须是无单位的数值（
flex-grow），第二个值可以是无单位的数值（flex-shrink）或长度值 / 百分比（flex-basis）。 - 三值语法 ：依次为
flex-grow、flex-shrink和flex-basis。
- 单值语法 ：可以是一个无单位的数值（相当于
使用flex属性进行弹性布局
1. 创建弹性容器
要使用弹性布局，首先需要将一个元素设置为弹性容器。可以通过将该元素的 display 属性设置为 flex 或 inline-flex 来实现。
display: flex：将元素显示为块级弹性容器。display: inline-flex：将元素显示为内联级弹性容器。
2. 添加弹性项目
在弹性容器内添加子元素，这些子元素将成为弹性项目。
3. 使用 flex 属性控制弹性项目的大小和伸缩性
flex 属性是 flex-grow、flex-shrink 和 flex-basis 的缩写，通过设置 flex 属性可以控制弹性项目如何分配空间。
常见的 flex 属性设置示例
flex: 1：表示弹性项目会平均分配弹性容器的剩余空间。
html
.flex-container {
display: flex;
background-color: lightgray;
width: 500px;
}
.flex-item {
background-color: lightblue;
margin: 10px;
padding: 20px;
font-size: 30px;
flex: 1;
}在这个示例中，三个弹性项目会平均分配容器的剩余空间，因为它们的 flex 值都为 1。
flex: 2 1 300px：表示弹性项目的flex-grow为2，flex-shrink为1，flex-basis为300px。
html
.flex-container {
display: flex;
background-color: lightgray;
width: 800px;
}
.flex-item {
background-color: lightblue;
margin: 10px;
padding: 20px;
font-size: 30px;
}
.item1 {
flex: 2 1 300px;
}
.item2 {
flex: 1 1 200px;
}在这个示例中，item1 的初始大小为 300px，并且在有剩余空间时会以 2 倍的比例进行放大；item2 的初始大小为 200px，放大比例为 1。
控制弹性项目的排列方向和对齐方式
容器属性
1. flex-direction
-
作用：定义弹性容器内弹性项目的排列方向。
-
取值：
row：默认值，弹性项目沿水平方向从左到右排列。row-reverse：弹性项目沿水平方向从右到左排列。column：弹性项目沿垂直方向从上到下排列。column-reverse：弹性项目沿垂直方向从下到上排列。
2. flex-wrap
-
作用：定义弹性项目是否换行显示。
-
取值：
nowrap：默认值，弹性项目不换行，会缩小以适应容器宽度。wrap：弹性项目换行显示，当一行放不下时会自动换到下一行。wrap-reverse：弹性项目换行显示，但换行方向与wrap相反。
3. flex-flow
- 作用 ：
flex-direction和flex-wrap的缩写属性，同时设置弹性项目的排列方向和是否换行。 - 取值 ：先指定
flex-direction的值，再指定flex-wrap的值，中间用空格分隔。
css
.flex-container {
display: flex;
width: 300px;
height: 200px;
margin: 20px;
background-color: lightgray;
}
.flex-item {
width: 100px;
height: 50px;
background-color: lightblue;
display: flex;
justify-content: center;
align-items: center;
}
.row-nowrap {
flex-flow: row nowrap;
}
.row-wrap {
flex-flow: row wrap;
}
.column-wrap {
flex-flow: column wrap;
width: 200px;
height: 300px;
}4. justify-content
-
作用 ：定义弹性项目在主轴（由
flex-direction决定）上的对齐方式。 -
取值：
flex-start：默认值，弹性项目在主轴起点对齐。flex-end：弹性项目在主轴终点对齐。center：弹性项目在主轴上居中对齐。space-between：弹性项目两端对齐，项目之间的间隔相等。space-around：每个弹性项目两侧的间隔相等，项目之间的间隔比项目与容器边缘的间隔大一倍。space-evenly：弹性项目之间以及项目与容器边缘的间隔都相等。
5. align-items
-
作用：定义弹性项目在交叉轴（与主轴垂直）上的对齐方式。
-
取值：
stretch：默认值，弹性项目在交叉轴方向上拉伸以填充容器。flex-start：弹性项目在交叉轴起点对齐。flex-end：弹性项目在交叉轴终点对齐。center：弹性项目在交叉轴上居中对齐。baseline：弹性项目的第一行文字的基线对齐。
6. align-content
-
作用 ：定义多行弹性项目在交叉轴上的对齐方式，当
flex-wrap为wrap或wrap-reverse时生效。 -
取值：
stretch：默认值，多行弹性项目在交叉轴方向上拉伸以填充容器。flex-start：多行弹性项目在交叉轴起点对齐。flex-end：多行弹性项目在交叉轴终点对齐。center：多行弹性项目在交叉轴上居中对齐。space-between：多行弹性项目两端对齐，行与行之间的间隔相等。space-around：每行弹性项目两侧的间隔相等，行与行之间的间隔比行与容器边缘的间隔大一倍。
项目属性
1. align-self
- 作用 ：用于单独设置某个弹性项目在交叉轴上的对齐方式，会覆盖容器的
align-items设置。 - 取值 ：与
align-items相同，包括auto（默认值，继承容器的align-items设置）、stretch、flex-start、flex-end、center和baseline。
2. order
- 作用：定义弹性项目的排列顺序，数值越小越靠前。
- 取值 ：整数，默认值为
0。