flex的核心思想是：用了flex布局后，页面就有了横向和竖向的两个轴，然后你就可以通过写代码操控组件在轴上的排列了
横向排列
flex布局默认的主轴是横向的，那么当我们分别写这样的html和css代码后
<style>
* {
border: 1px solid black;
}
.test{
display: flex;
}
.d{
height: 100px;
width: 100px;
}
</style>
<body class="test" style="background-color: antiquewhite; height: 100vh; width: 100wh;">
<div class="d">aa</div>
<div class="d">bb</div>
<div class="d">cc</div>
</body>页面便会横向布局：
竖向排列
要将主轴变为竖向，我们只需要修改代码如下：
.test{
display: flex;
flex-direction: column;
}页面就会变为：
居中，前置与后置
知道了如何定义主轴与副轴，那么我们就可以学习如何控制元素的居中，前置和后置了
以主轴是横向为例
我们将css代码修改为：
.test{
display: flex;
justify-content: center;
}便可以看到页面横向居中了：
再修改css代码：
.test{
display: flex;
align-items: center;
}则元素竖向居中了（副轴）：
然后，将center改为start，end等则可以前置和后置
总结
通过flex布局的主轴副轴，以及在轴上的位置，我们就可以构建出许多我们想要的布局方式了
511
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
