重学flex布局

flex布局。永远的神

align-items

1. align-items定义为交叉轴的对齐方式，当我们的flex-wrap为nowrap也就是默认不会换行时候，center是会垂直于整个父盒子的。

2. 而当我们设置flex-wrap为wrap，也就是有了好几个轴的时候会怎样呢？

示例一：不设置父盒子高度

父盒子：

.flex {
	display: flex;
	flex-wrap: wrap; 
	align-items: center;
}

结论：可以看到各行的子项都在各自行上居中对齐（各行的高度由高度最高的子项决定，flex容器的高度为所有行的高度最高的子项高度之和）。

示例二：设置父盒子高度

父盒子：

.flex {
	height: 500px;
	display: flex;
	flex-wrap: wrap; 
	align-items: center;
}

结论：这里我们可以看出，子项分为2行，flex容器将交叉轴上的多余空间按行数平均分给每行，然后每行各自按自己所在的行居中对齐（此时的单行效果跟2.1.2中的例子1效果一样）

align-content

上面我们知道，：上面的align-items在交叉轴设置多个轴的时候

如果父盒子没高度，则每一行的高度由最高的盒子撑起，那么此时的其他盒子是关于当前行的最高盒子来居中对齐

如果父盒子有高度，则是把多余的空间平均分配给所有的轴体，再通过每一行的各自高度来居中对齐

那么我们如何不要再参考各自的行了，有多个轴的时候我们希望还是按照父盒子的高度来居中呢？

这时候就得依靠我们algin-content属性了

示例一：不设置父盒子高度
父盒子

.flex {
	display: flex;
	flex-wrap: wrap; 
	align-content: center;
}

结论：align-content: center看起来并没有起作用，是真的没有起作用吗？我感觉是因为父盒子的高度都是由子盒子来撑开的，哪里还有空间让其对齐呢？

示例二：父盒子有高度
父盒子：

.flex {
	height: 500px;
	display: flex;
	flex-wrap: wrap; 
	align-content: center;
}

结论：我们可以看到，在flex容器指定高度并且子项为多行时，align-content: center是将子项作为一个整体，然后这个整体在flex容器的交叉轴上居中对齐的。

align-self

单独设置自己在交叉轴的对齐方式

html：
<div class="fa">
    <div class="son1"></div>
    <div class="son2"></div>
</div>

css:
.fa{
    width: 250px;
    height: 200px;
    background-color: wheat;
    display: flex;
    flex-wrap: wrap;
  }
  .son1,.son2{
    background-color: red;
    width: 150px;
    height: 40px;
  }
  .son2{
    width: 50px;
    display: flex;
    align-self: center;
    background-color: gray;
  }

order

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

.item { order: ; }