本文介绍如何利用HTML5和CSS3中的弹性盒属性，如justify-content和align-items，来创建一个不依赖浮动或定位的六面骰子。主要探讨了justify-content的几种模式，如flex-start、flex-end、center、space-between和space-around，并通过实例展示了如何布局骰子的各个面，最终实现骰子的居中和其他位置效果。
提示：代码可能有大量重复
利用弹性盒的几个属性实现骰子的位置 不使用浮动 定位等方式
主要有justify-content属性 和 align-items属性
介绍一下
首先开启一个弹性盒 默认的是X轴为主轴
主轴对其方式 justify-content 默认值是flex-star flex-end center 这三个是弹性盒里面的所有元素在一起的
还有space-between 两端对齐 中间自适应 space-around 自动分配距离 如果位置允许的话 会允许弹性盒内部的元素分开
一个位置一个位置来说
中间的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.wrap{
width: 200px;
height: 200px;
background-color: #bfa;
display: flex;
justify-content: center;
align-items: center;
}
.inner{
width: 20px;
height: 20px;
background-color: black;
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner"></div>
</div>
</body>
</html>
display: flex;
justify-content: center;
align-items: center;
结果就是这样 这个也可以用来实现水平垂直居中
左下角的位置
displ
最低0.47元/天 解锁文章
3445
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
