<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<div class="context">
<div class="box">a</div>
<div class="box">b</div>
<div class="box">c</div>
<div class="box">c</div>
<div class="box">c</div>
<div class="box">c</div>
<div class="box">c</div>
</div>
</body>
<style>
.context {
width: 100%;
height: 100vh;
display: flex;
/* 默认从左到右 */
/* flex-direction: row; */
/* 从右到左 */
/* flex-direction: row-reverse; */
/* 从上到下 */
/* flex-direction: column; */
/* 从下到上 */
/* flex-direction: column-reverse; */
/* justify-content 设置主轴 */
/* 默认从左到右 */
/* justify-content: flex-start; */
/* 居中 */
/* justify-content: center; */
/* 从尾部排齐,向右靠齐 */
/* justify-content: flex-end; */
/* 两边贴边,剩余平分空间 */
/* justify-content: space-between; */
/* 平分剩余空间 */
/* justify-content: space-around; */
/* 向左对齐 */
/* justify-content: space-evenly； */
/* flex布局默认不换行,如果装不下,会缩小子元素的宽度,放到父元素里面 */
/* 默认不换行 */
/* flex-wrap: nowrap; */
/* 换行 */
/* flex-wrap: wrap; */
/* align-items 设置侧轴上的子元素排列方式(单行) */
/* 默认从上到下 */
/* align-items: flex-start; */
/* 在侧轴的尾部开始排列 */
/* align-items: flex-end; */
/* 挤在一起,居中 */
/* align-items: center; */
/* 拉伸 */
/* align-items: stretch; */
/* align-content 设置侧轴上子元素的排列方式（多行） */
/* 默认 在侧轴头部开始排列 */
/* align-content: flex-start; */
/* 在侧轴的尾部开始排列 */
/* align-content: flex-end; */
/* 在侧轴中间显示 */
/* align-content: center; */
/* 子项在侧轴平分剩余空间 */
/* align-content: space-around; */
/* 子项在侧轴先分布在两头，再平分剩余空间 */
/* align-content: space-between; */
/* 设置子项元素高度平分父元素高度 */
/* align-content: stretch; */
/* 居中屏幕 */
/* align-items: center;
justify-content: center; */
}
.box {
width: 300px;
height: 300px;
background: blue;
margin: 20px 20px 20px 20px;
}
</style>
</html>