在前端开发中，弹性布局是一种强大且实用的布局模式，它能够帮助开发者更轻松地创建灵活、响应式的页面布局。
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。