前端：html页面布局总是有问题？会这一个技巧就够了！
前端：html页面布局总是有问题？会这一个技巧就够了！
Nowl
发布于 2024-01-18 19:38:49
发布于 2024-01-18 19:38:49
在初学者写前端页面的时候，我们往往无法让组件按自己的想法排列，那是因为前端有自己的布局方式，只有掌握了它我们才能如鱼得水地布局整个页面
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布局的主轴副轴，以及在轴上的位置，我们就可以构建出许多我们想要的布局方式了
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2023-10-31，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录