弹性盒子之骰子六面
Posted 勇敢*牛牛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了弹性盒子之骰子六面相关的知识，希望对你有一定的参考价值。
flex弹性盒布局
- 弹性盒模型的作用：就是控制子元素的布局
- 弹性盒子里的概念：
a) 容器父元素（放子元素的盒子）
b) 项目子元素（所有弹性盒子里面的子元素） - 形成弹性盒的语句：在父元素上写display：flex
- 特点：
a) 当父元素变成弹性盒子之后，子元素默认横向显示 （沿着主轴排列，默认主轴x轴，另外一个叫做侧轴）
b) 当父元素变成弹性盒子之后。子元素都能直接设置宽高
c) margin：auto是生效的。
d) 如果子元素总宽度大于父元素，那么是不会超出父盒子，也不会自动换行，而是会挤压。
5. 设置主轴方向：
a) flex-direction: row | row-reverse | column | column-reverse;
b) row：横向、x轴(常用)==== 规定主轴方向在横向(默认值)
c) column：纵向、y轴（常用）=规定主轴方向在纵向
d) row-reverse：x轴反向排列=规定主轴方向在横向，项目反向排列
e) column-reverse：y轴反向排列=规定主轴方向在纵向，项目反向排列=
6. 设置子元素在主轴的对齐方式：
a) justify-content: flex-start | flex-end | center | space-between | space-around;
b) flex-start：主轴的开始位置对其，没有间距
c) flex-end：主轴的结束位置对其，没有间距
d) center：居中==主轴的中间位置对其，没有间距
e) space-between：主轴上面两端对其，元素与元素之间的距离自动分配（常用）
f) space-around:自动分配距离、左右间距都一样。(常用)
i. 主轴上面的间距环绕，元素与元素之间的距离是靠边元素与父元素之间的2倍
g) space-evenly:自动分配剩余空间，所有的距离都一样
7. 设置子元素在侧轴（交叉轴）的对齐方式：
a) align-items: flex-start | flex-end | center | baseline | stretch（默认值）;
b) flex-start：侧轴的开始位置
c) flex-end：侧轴的结束位置
d) center：侧轴的中间位置
e) baseline：和flex-start等效
f) stretch拉伸，如果子元素不设置高度，就会拉伸，高度和父盒子一样高(默认值)
8. 设置子元素是否换行：
a) flex-wrap: nowrap | wrap | wrap-reverse;
b) nowrap：不换行
c) wrap：换行
d) wrap-reverse：反向换行
换行之后，行间距自动分配；行间距比较大
9. 多行对齐方式（对于单行子元素，该属性不起作用。）：
a) align-content: flex-start | flex-end | center | space-between | space-around | stretch;
b) align-content在侧轴上执行样式的时候，会把默认的间距给合并。对于单行子元素，该属性不起作用
c) flex-start：侧轴开始位置对其，没有行间距
d) flex-end：侧轴结束位置对其，没有行间距
e) center：侧轴中间位置对其，没有行间距
f) space-between：2端对齐，中间自动分配
g) space-around：自动分配间距
<!DOCTYPE html>
<html lang="en">
</div>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1
/* 变成弹性盒子 */
display: flex;
width: 200px;
height: 200px;
background-color: aqua;
border-radius: 20px;
/* 居中 */
justify-content: center;
align-items: center;
.yuan
width: 50px;
height: 50px;
background-color: black;
border-radius: 50%;
/* margin: auto; */
.box2
/* 变成弹性盒子 */
display: flex;
width: 200px;
height: 200px;
background-color: aqua;
border-radius: 20px;
justify-content: space-between;
.box2 .yuan:nth-child(2)
align-self: flex-end;
.box3
/* 变成弹性盒子 */
display: flex;
width: 200px;
height: 200px;
background-color: aqua;
border-radius: 20px;
/* 主轴的对齐方式 */
justify-content: space-between;
.box3 .yuan:nth-child(2)
align-self: center;
.box3 .yuan:nth-child(3)
align-self: flex-end;
.box4
/* 变成弹性盒子 */
display: flex;
width: 200px;
height: 200px;
background-color: aqua;
border-radius: 20px;
/* 主轴的对齐方式 */
/* justify-content: space-between; */
/* 让元素纵向排列 */
flex-direction: column;
justify-content: space-between;
/* 找儿子 */
.box4>div
display: flex;
/* 写不写一样 */
flex-direction: row;
justify-content: space-between;
.box5
/* 变成弹性盒子 */
display: flex;
width: 200px;
height: 200px;
background-color: aqua;
border-radius: 20px;
/* 主轴的对齐方式 */
/* justify-content: space-between; */
/* 让元素纵向排列 */
flex-direction: column;
justify-content: space-between;
.box5>div
display: flex;
/* 写不写一样 */
flex-direction: row;
justify-content: space-between;
.box5>.yuan
/* justify-content: center; */
margin: auto;
.box6
/* 变成弹性盒子 */
display: flex;
width: 200px;
height: 200px;
background-color: aqua;
border-radius: 20px;
/* 主轴的对齐方式 */
/* justify-content: space-between; */
/* 让元素纵向排列 */
flex-direction: column;
justify-content: space-between;
.box6>div
display: flex;
/* 写不写一样 */
flex-direction: row;
justify-content: space-between;
.box7
/* 变成弹性盒子 */
display: flex;
width: 200px;
height: 200px;
background-color: aqua;
border-radius: 20px;
/* 主轴的对齐方式 */
/* justify-content: space-between; */
/* 让元素纵向排列 */
/* flex-direction: column; */
justify-content: space-between;
.box7>div
display: flex;
flex-direction: column;
justify-content: space-between;
/* display: flex; */
/* justify-content: space-between; */
.box7.yuan
display: flex;
flex-direction: column;
justify-content: space-between;
/* display: flex; */
/* justify-content: space-between; */
</style>
</head>
<body>
<div class="box1">
<div class="yuan"></div>
</div>
<hr />
<div class="box2">
<div class="yuan"></div>
<div class="yuan"></div>
</div>
<hr />
<div class="box3">
<div class="yuan"></div>
<div class="yuan"></div>
<div class="yuan"></div>
</div>
<hr />
<div class="box4">
<div>
<div class="yuan"></div>
<div class="yuan"></div>
</div>
<div>
<div class="yuan"></div>
<div class="yuan"></div>
</div>
</div>
<hr />
<div class="box5">
<div>
<div class="yuan"></div>
<div class="yuan"></div>
</div>
<div class="yuan"></div>
<div>
<div class="yuan"></div>
<div class="yuan"></div>
</div>
</div>
<hr />
<div class="box6">
<div>
<div class="yuan"></div>
<div class="yuan"></div>
</div>
<div>
<div class="yuan"></div>
<div class="yuan"></div>
</div>
<div>
<div class="yuan"></div>
<div class="yuan"></div>
</div>
</div>
<hr />
<div class="box7">
<div>
<div class="yuan"></div>
<div class="yuan"></div>
<div class="yuan"></div>
</div>
<div>
<div class="yuan"></div>
<div class="yuan"></div>
<div class="yuan"></div>
</div>
</div>
</body>
</html>
以上是关于弹性盒子之骰子六面的主要内容，如果未能解决你的问题，请参考以下文章
CSS3--Flex弹性盒子布局: 声明弹性盒子 & 容器的属性