这是我参与「4月日新计划更文活动」的第7天。
接着上面的文章，我们今天讲一下弹性布局。
话不多说，我们来看看弹性布局有哪些属性和对应属性的使用方法吧。
弹性布局容器属性解析
弹性布局容器属性解析： 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（每个项目两侧的间隔相等，项目之间的间隔也相等）或space-evenly（每个项目之间的间隔相等）。
align-items: 定义交叉轴上的对齐方式，可以设置为flex-start（上对齐）、flex-end（下对齐）、center（居中对齐）、baseline（基线对齐）或stretch（默认值，占满整个交叉轴）。
align-content: 定义多行项目的对齐方式，如果只有一行项目则不起作用。可以设置为flex-start（上对齐）、flex-end（下对齐）、center（居中对齐）、space-between（两端对齐，项目之间的间隔相等）、space-around（每个项目两侧的间隔相等，项目之间的间隔也相等）或stretch（默认值，占满整个交叉轴）。
弹性子项元素属性解析
弹性布局针对于子元素的属性有：
flex：用于定义项目分配剩余空间。其实是以下几个属性的合写：flex-grow: 1; flex-shrink: 1; flex-basis: 0。
flex-grow表示项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 flex-shrink表示项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 flex-basis表示在分配多余空间之前，项目占据的主轴空间，默认值为auto，即项目的本来大小，可以设置具体的值，例如：50px。
align-self：控制子项自己在侧轴上的排列方式。
order：定义项目的排列顺序，必须是数字，默认值是0。
写一个简单的例子
效果如下：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>弹性布局</title>
</head>
<style>
.container{
display: flex;
}
.slider{
flex-basis: 100px;
width: 100px;
height: 100px;
background-color: green;
}
.box{
height: 100px;
flex: 1;
background-color: orange;
}
</style>
<body>
<div class="container">
<div class="slider"></div>
<div class="box"></div>
</div>
</body>
</html>
以上给容器元素container设置了弹性布局，给子元素slider设置宽度100px的固定宽度，box元素自动撑开剩余的宽度。
看到掘金上的好文章，如果对你有帮助，顺手点个赞，或者把文章收藏。不用担心找不到了，以后也能经常收到类似好回答，我会持续进行更新。
