我们在项目中常常会用到弹性布局，接下来我们就来学习一下弹性布局中的属性及其用法
容器属性（应用于flex容器）
1. display
-
display: flex; -
display: inline-flex;相同点：将容器内的子元素水平或者垂直排列，默认是水平·
不同点：
display: flex;将元素作为块级元素展示，display: inline-flex;将元素作为行内元素展示
xml
<body>
<div class="container">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
</div>
</body>
<style>
.container {
display: flex;
flex-direction: column;
}
.item {
background-color: lightblue;
padding: 20px;
margin: 10px;
}
</style>效果图：
将display: flex;改为display: inline-flex;
2. flex-direction（改变主轴方向）
row：项目沿主轴水平排列，起点在左端（默认）。
row-reverse：项目沿主轴水平排列，但起点在右端。
column：项目沿主轴垂直排列，起点在上沿。
column-reverse：项目沿主轴垂直排列，但起点在下沿。
3. flex-wrap（也是上述示例，可以多加几个子元素试试效果，就不一一展示了）
nowrap：所有项目都排在一行上。wrap：一行排不下，则项目会换行排列。wrap-reverse：项目换行排列，但第一行在容器的底部。
4. flex-flow
- 是
flex-direction和flex-wrap的简写形式，例如：flex-flow: row wrap;。
5. justify-content(效果图就展示一两个，有兴趣可以自行试试)
- 控制项目在主轴上的对齐方式。
flex-start：项目向一行的起始位置靠齐。
flex-end：项目向一行的结束位置靠齐。
center：项目居中对齐。space-between：项目之间的间隔相等。space-around：项目周围的间隔相等。space-evenly：项目间和边缘间的间隔相等。
6. align-items
- 控制项目在交叉轴上如何对齐。
stretch：拉伸以填满容器（默认值）。flex-start：交叉轴的起点对齐。flex-end：交叉轴的终点对齐。center：交叉轴的中点对齐。
7. align-content
- 多行/列对齐方式（仅当有多行/列时生效）。
stretch、flex-start、flex-end、center、space-between、space-around和space-evenly的作用类似于justify-content，但应用于多行/列。
项目属性（应用于flex项目）
- order
- 控制项目的排列顺序。默认为0，数值越小，排列越靠前。
css
<style>
.container {
display: flex;
}
.item {
background-color: lightblue;
padding: 20px;
margin: 10px;
&:nth-child(3){
order: 0;
}
&:nth-child(2){
order: 1;
}
&:nth-child(1){
order: 2;
}
}
</style>
- flex-grow
- 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。例如：给子元素item加上属性flex-grow：1；
-
flex-shrink
- 定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
-
flex-basis
- 定义在分配多余空间之前，项目占据的主轴空间（main size）。
auto表示项目本来的大小。
- 定义在分配多余空间之前，项目占据的主轴空间（main size）。
-
flex
- 是
flex-grow、flex-shrink和flex-basis的简写，默认值为0 1 auto。建议使用这个简写属性而不是单独写三个分开的属性。
- 是
-
align-self
- 允许单个项目有与其他项目不一样的对齐方式，可覆盖
align-items属性。接受的值与align-items相同。
- 允许单个项目有与其他项目不一样的对齐方式，可覆盖
以上便是css中弹性布局的常见属性及其用法。欢迎大家指正