flex常见属性
1.display: flex;
将容器元素设置为Flex容器,使其内部子元素成为Flex项目。
div{
display: flex;
}
2.flex-direction: row | row-reverse | column | column-reverse;
设置主轴的方向,跟主轴垂直的就是交叉轴
设置Flex容器中项目的排列方向。默认值是row,即水平方向。
3.flex-wrap: nowrap | wrap | wrap-reverse;
控制Flex容器中的项目是否换行。默认值是nowrap,即不换行。
4.justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
控制Flex容器中项目的水平对齐方式。
5.align-items: flex-start | flex-end | center | baseline | stretch;
设置交叉轴方向对齐方式
默认值为stretch 拉伸
6.align-content: flex-start | flex-end | center | space-between | space-around | stretch;![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/2658c9dcc75a3c4c4663e992a6fa72c6.jpeg#pic_center)
7.order: ;
设置顺序
8.flex:整数
设置剩余空间,或者所占比例
9.align-self
子元素可以通过设置 align-self
来控制自己在交叉轴上的对齐方式,例如把 .flex3
子元素在垂直方向上靠下对齐:
.flex {
display: flex;
align-items: flex-start;
}
.flex3 {
align-self: flex-end;
}
在水平方向上控制子元素对齐并没有justify-self
属性,而是使用margin
属性,通过把左或右边距设置为auto
来控制水平对齐,比如把 flex3
放到最右边:
.flex3 {
margin-left: auto;
}