在初学者写前端页面的时候，我们往往无法让组件按自己的想法排列，那是因为前端有自己的布局方式，只有掌握了它我们才能如鱼得水地布局整个页面
flex布局
提到布局，那就不得不说到flex布局了，它有什么用呢，别急，往下看吧
flex的核心思想是：用了flex布局后，页面就有了横向和竖向的两个轴，然后你就可以通过写代码操控组件在轴上的排列了
横向排列
flex布局默认的主轴是横向的，那么当我们分别写这样的html和css代码后
<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>
<style> * { border: 1px solid black; } .test{ display: flex; } .d{ height: 100px; width: 100px; } </style>
页面便会横向布局：
竖向排列
要将主轴变为竖向，我们只需要修改代码如下：
.test{ display: flex; flex-direction: column; }
页面就会变为：
居中，前置与后置
知道了如何定义主轴与副轴，那么我们就可以学习如何控制元素的居中，前置和后置了
以主轴是横向为例
我们将css代码修改为：
.test{ display: flex; justify-content: center; }
便可以看到页面横向居中了：
再修改css代码：
.test{ display: flex; align-items: center; }
则元素竖向居中了（副轴）：
然后，将center改为start，end等则可以前置和后置
总结
通过flex布局的主轴副轴，以及在轴上的位置，我们就可以构建出许多我们想要的布局方式了
