初识flex布局：align-items vs align-content，到底谁更给力？

嘿小伙子，跟你说个事，你知道flex布局里面的align-items和align-content吗？这两个东西其实是管横向和纵向怎么排列的，虽然长得很像，但是实际用起来可是大有不同！接下来我就告诉你咋回事儿，咱们分三步来说明，来看个例子，这样你应该就能明白了。

初始代码

首先，咱们来个简单的例子。假如我们就把center当作属性值，那么浏览器默认的就是 align-items 和 align-content了。你可能会想，为啥他们都在上面？这个，因为这俩属性都是 norma l模式！

     
1
     
2
     
3
     
4

.flex {
	width: 500px;
	margin: 10px;
	text-align: center;
	border: 2px solid #9a9a9a;
	display: flex; /* 默认的flex-direction为row，则交叉轴方向为column，即垂直方向*/
}
.flex div {
	width: 100px;
	margin: 5px;
}
.i1 {
	background-color: #ffb685;
	height: 130px;
}
.i2 {
	background-color: #fff7b1;
	height: 50px;
	width: 120px;
}
.i3 {
	background-color: #b1ffc8;
	height: 100px;
}
.i4 {
	background-color: #b1ccff;
	height: 60px;
}

flex容器不设置高度

想要让Flex盒子站直？别忘了设置对齐方式！默认为“普通”，就是你平时见到的上下对齐。看起来，项目在45度斜面上都是直线下来挺整齐的。不过要记住，空间不够大的话，咱们可不能直接套用 align-content 哟。

.flex {
	display: flex;
}

给你说，那个子项目的行数要是就一条的话，你就算设得再高也只能挤在十字形里面！所以，这个时候直接用align-items效果也是差不多的，毕竟align-content在这也起不了太大作用嘛～

flex容器设置高度

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

给Flex盒子弄大些，里面的小货摊，哪怕都是横竖着放，也能在交界处均匀摆开。要是外面的大盒子越做越大咋办?那最上面的那哥们儿只好委屈点跑中间去咯!

记住，就算加上align-content: center;也不行。因为你会把所有子元素都挤在一块儿，所以就没办法调整它们的位置啦!

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

flex容器多行布局

说实话，没设行高也没事。咱们把下级项目变成好几行，它们就会自己往上放了！每条线大概也就跟下面最上面的那些下级项目差不多高。而每个下级项目都会老老实实待在每一行的中间，所以整个组合起来的高度就是各个行里最高的几个下级项目加在一起的效果！

在给Flex盒子设定固定大小，以及添加换行属性之后，再加上这两个代码：flex-wrap: wrap;和 align-content: center;。这样的话，无论你的子项是横着排还是竖着放，都能打造出让人眼前一亮的效果来！

.flex {
	height: 500px; /* 给flex容器添加一个高度 */
	display: flex;
}

，其实看懂这两个属性的区别就在于，要看是决定长度还是宽度或者是换行。

特殊情况分析

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

如果你的项目就那么小小一行，但是设置好了全局比例和’flex-wrap: wrap;’，放个’align-content: center;’在里面就能让整排文字自动跑到屏幕中间了。

咱赶紧复习一下align-items和align-content这两兄弟神奇的属性知识点！看过那么多例子解析想必你也很想再温习一遍。

点那个’对齐’的按钮，就可以随心所欲地移动单一元素！

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

那个啥，你知道align-content吗？那玩意儿就是把好几样或者好几列东西看似随意的放到交叉轴上，硬是整整齐齐的。

用这俩的时候得注意看，大小是不是固定的，排版是否工整

掌握了Flex布局中的align-items和align-content属性，不仅让你设计出专业好看的布局，而且还能随心所欲地调整哟。

     
1
     
2
     
3
     
4
     
5
     
6

.flex {
	width: 500px;
	margin: 10px;
	border: 2px solid #9a9a9a;
	text-align: center;
	display: flex;
	flex-wrap: wrap; /* 使flex容器一行放不下子项换行*/
}
.i5 {
	background-color: #c8b1ff;
	height: 40px;
}
.i6 {
	background-color: #ffb1e5;
	height: 80px;
}

。