flex布局

最新推荐文章于 2026-01-03 21:59:22 发布

原创最新推荐文章于 2026-01-03 21:59:22 发布 · 139 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #javascript

本文介绍了Flex布局的基本语法，包括flex-direction、justify-content、align-items、flex-wrap和align-self属性，并通过实例展示了如何利用这些属性实现一个三点骰子的布局。通过设置两端对齐、元素居中和尾部对齐，使元素在主轴和交叉轴上灵活分布。

flex最常用的语法：（熟练掌握）
flex-direction:主轴的方向（可横向可纵向）
justify-content：主轴对齐方式（开始对齐、两边对齐...）
align-items:交叉轴对齐方式（和主轴垂直的轴）
flex-wrap:什么时候换行
align-self：子元素在交叉轴的对齐方式（开始对齐、居中对齐...）
实现一个三点的骰子：
.box{
display:flex;//flex布局
justify-content:space-between;//两端对齐
}
.item {
//背景色、颜色、大小边框等
}
.item:nth-child(2) {
align-self:center;//第二项居中对齐
}
.item:nth-child(3) {
align-self:flex-end；//第三项尾对齐
}
<div class = "box">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>