css中flex布局的水平与垂直对齐

1、我们以这个案例作为演示，这个是没有设置flex布局时的样子

2、接下来我们给几个button的父容器div设置display属性为flex，刷新页面可以看到这样，但是并不美观

3、接下来通过align-items 控制 flex 项在交叉轴上的对齐位置，如下：

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

我们将它设置为交叉轴居中对齐，刷新页面得到

4、事实上，如果你想让flex容器中个别元素的对齐方式和其他的不一样，可以在该元素里设置 align-self 属性覆盖 align-items 的行为：

button:first-child{    align-self: flex-end;}

，让它对齐在交叉轴的末端

5、接下来我们可以通过justify-content 控制 flex 项在主轴上的对齐方式：

div {   ......    display: flex;    align-items: center;    justify-content: space-evenly;}

，刷新页面得到如图效果，这个是使得每个元素沿主轴方向的空间一样大，占满父容器

6、关于align-items和justify-content的更多属性值，大家可以去查看官方文档，然后再自己尝试，查看页面显示效果