flex布局

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;

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;
}