布局
弹性布局：
- 关键字：display:flex
- justify-content:space-between 两端对齐，中间自适应
- justify-content:space-around 均匀分布，两边距离等于中间间距
- justify-content:space-evenly 平等均匀分布，两边距离是一样的
- justify-content:space-start 默认分布，从弹性开始的地方
- justify-content:space-end 从弹性结束的地方分布
- flex-direction：row 行排列 把row换成row-reverse会实现反转
- flex-direction：column 竖排列 把column换成column-reverse同样会实现反转
- flex-items-wrap:nowrap 控制当前不换行 把nowrap换成wrap就是换行
- align-items:cemter 竖向排列方式 注意！当前父盒子必须有一定的高度
- align-items:flex-start 竖向排列默认从弹性开始
- align-items:flex-end 默认弹性结束分布
- align-content:center 竖向紧密排列 必须要搭配上面的换行使用
- align-items 垂直方向排列居中 这个是垂直方向松散排列 两边空出来的距离等于中间的距离
多列布局：
- column-count 定义分几列
- column-rule 定义用什么线
- column-rule-width 设置线的粗细
css的代码
.box2{
height: 800px;
margin: 0px auto;
/* 弹性布局 */
display: flex;
/* 1. 向两端对齐，中间自适应 */
justify-content: space-between;
/* 2. 均匀分布，两边空出来的距离等于中间距离 */
justify-content: space-around;
/* 3. 平等均匀分布，距离完全一样 */
justify-content: space-evenly;
/* 4. 默认从弹性开始的地方分布 */
justify-content: flex-start;
/* 5. 从弹性结束的地方分布 */
justify-content: flex-end;
/* 排列方式是按照行还是按照列，默认是正序行（row），reverse：反转布局 */
/* 6. 行的倒序 */
flex-direction: row-reverse;
/* 7. 列的倒序 */
flex-direction: column-reverse;
/* 8. 换行，默认不换行（nowrap），只要看到wrap就是换行 */
flex-wrap: wrap;
/* 竖向排列方式 */
/* 当前父盒子必须有一定高度 */
/* 9. 竖向中间分布，垂直方向松散排列，两边空出来的距离等于中间距离 */
align-items: center;
/* 10. 默认弹性开始分布 */
align-items: flex-start;
/* 11. 默认弹性结束分布 */
align-items: flex-end;
/* 12. 必须搭配换行使用（flex-wrap: wrap;）垂直方向紧密排列 */
align-content: center;
}
html的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css01.css">
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3">1</div>
<div class="box3">2</div>
<div class="box3">3</div>
<div class="box3">4</div>
<div class="box3">5</div>
<div class="box3">6</div>
<div class="box3">7</div>
<div class="box3">8</div>
<div class="box3">9</div>
</div>
</div>
</body>
</html>
标签：flex,space,items,align,布局,content,css,justify From： https://www.cnblogs.com/Lib-zyz/p/17869978.html