height: 200px;
border: 1px solid #06f;
display: flex;
display: -webkit-flex;
}
.flex-item{
height: 30px;
width: 30px;
color: #f00;
font-size: 20px;
line-height: 30px;
text-align: center;
background-color: #8f0;
border: 1px solid #f00;
}
- flex-direction
排列方向设置
#flex-box{
flex-direction: row | row-reverse | column | column-reverse;
/* @value row 从左到右(默认)*/
/* @value row-reverse 从右到左*/
/* @value column 从上到下*/
/* @value column-reverse 从下到上*/
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L6V3YUrN-1652071070461)(https://pic.faremax.info/20170210103655153.png)]
- flex-wrap
换行设置
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
/* @value nowrap 不换行(默认)*/
/* @value wrap 换行*/
/* @value wrap-reverse 换行 层倒序*/
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fITXZ6WQ-1652071070462)(https://pic.faremax.info/20170210103713153.png)]
- flex-flow
flex-direction和flex-wrap的缩写属性
.box {
flex-flow: || ;
}
- justify-content
水平方向上对齐
.bo