<meta charset="utf-8">
<article class="_2rhmJa">
1. 分类
display: flex; 块级
display: inline-flex; 行级
给父元素设置
## 2\. 排列方式
flex-direction: row; （默认值)从左排列
flex-direction: row-reverse; 从右排列
flex-direction: column; 从上排列
flex-direction: column-reverse ; 从下排列
[图片上传失败...(image-3ee062-1638272114841)]
给父元素设置
## 3\. 换行
flex-wrap: wrap-reverse;换行, 从下往上排列
flex-wrap:nowrap; 不换行
flex-wrap:wrap; 换行
flex-wrap:flex;可以根据父元素宽度来改变子元素宽度，不想改变，设置换行
[图片上传失败...(image-df0b3a-1638272114840)]
给父元素设置
## 4\. 排列+换行
flex-flow: row nowrap; 从左排列不换行
flex-flow: <flex-direction> <flex-wrap>;
## 5\. 子元素对齐方式
justify-content: space-between; 先两边对齐，然后等间距的分布在容器中
justify-content: space-around; 先居中对齐，然后等间距的分布在容器中
justify-content: space-evenly; 注重间距，先将所有间距等分，再排列
justify-content: center; 居中
justify-content: flex-end; 右对齐
justify-content: flex-start; 左对齐
## 6\. 交叉轴上对齐
align-items: flex-start; 顶点对齐
align-items: flex-end; 底部对齐
align-items: baseline; 文字顶端对齐
align-items: center; 中点对齐
align-items: stretc; 如果项目未设置高度或设为auto，将占满整个容器的高度。
效果类似于vertical-align
[图片上传失败...(image-f6caae-1638272114840)]
给父元素设置
## 7\. 子元素属性
#### 7.1 order
定义子元素排列顺序，默认为0
数值越小，排列越靠前（数值可以为负）
`order:5;`
#### 7.2 flex-grow
1）定义子元素放大倍数，默认为0
2）当所有子元素值为1，即使存在间隙，也不放大，而是等分间隙
3）若一个子元素为2，其他为1，则此子元素比其他元素多放大等分间隙后间隙宽度的一倍
#### 7.3 flex-shrink
1）定义元素缩放比例，默认1
2）可根据父元素的宽度缩放
3）当值为0时，则不根据父元素的宽度改变而缩放
#### 7.4 align-self
给指定元素设置不同的对齐方式
1）auto 继承父元素的对齐方式
2）stretch 元素被拉伸以适应父元素
3）flex-start 元素位于容器的开头
4）center 元素位于容器中间的位置
5）flex-end 元素位于容器的结尾
6）baseline 元素位于容器的基线上
</article>
0人点赞
[HTML](/nb/51658550)
作者：晴空0_0
链接：//www.greatytc.com/p/719847a724e4
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
