下面代码保存为文件：style.css
css
/* 弹性盒模型 */
.flex-box {
width: 600px;
height: 200px;
border: 2px solid #000; /* 黑色边框 */
margin: 20px; /* 外边距 */
/* 弹性盒模型的关键：justify-content同主轴方向 align-items是交叉轴方向。
比如：flex-direction定义为row时 那么align-items控制column即垂直方向；
如果flex-direction定义为column时 那么align-items控制row即水平方向；
justify-content它始终同主轴方向，也就是flex-direction定义的方向。
当flex-direction为row时，主轴是水平方向（从左到右），交叉轴是垂直方向（从上到下）。
在这种情况下，justify-content控制的是水平方向上的对齐和分布，
而align-items控制的是垂直方向上的对齐。
当flex-direction为column时，主轴变为垂直方向（从上到下），交叉轴变为水平方向（从左到右）。
此时，justify-content控制的是垂直方向上的对齐和分布，
而align-items控制的是水平方向上的对齐（尽管这听起来可能有些反直觉，
因为align-items的名称中包含"align"，但它实际上是在控制交叉轴上的对齐）。*/
display: flex; /* 使用Flexbox布局 */
flex-direction: row; /* row,row-reverse,column,column-reverse 子项垂直排列使用column*/
justify-content: center; /*flex-start flex-end center space-between space-evenly */
align-items: center; /*flex-start flex-end center stretch baseline */
}
/* 设置小框的通用样式 */
.small-box {
width: 100px;
height: 100px;
margin: 10px; /* 小框之间的间距 */
font-size: 16px; /* 文本大小 */
font-weight: bold; /* 文本加粗 */
text-align: center; /* 文本居中 */
}
/* 红色小框的样式 */
.red-box {
background-color: red; /* 红色背景 */
color: white; /* 白色文本 */
}
/* 蓝色小框的样式 */
.blue-box {
background-color: blue; /* 蓝色背景 */
color: white; /* 白色文本 */
width: 140px;
height: 140px;
}再写一个代码保存为：index.html
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="flex-box">
<div class="small-box red-box">小红框</div>
<div class="small-box blue-box">小蓝框</div>
</div>
</body>
</html>我们把这两个文件放到一起，然后双击这个index.html文件，可以在浏览上看到这个图片：
上图水平和垂直居中，因为设置了：
display: flex; /* 使用Flexbox布局 */
flex-direction: row; /*默认*/
justify-content: center; /* 控制主轴方向排列对齐 */
align-items: center; /* 控制交叉轴方向排列对齐 */
display: flex; /* 使用Flexbox布局 */
flex-direction: row; /*默认*/
justify-content: center; /* 控制主轴方向排列对齐 */
/* align-items: center; 去掉交叉轴控制 */
display: flex; /* 使用Flexbox布局 */
flex-direction: row; /*默认*/
justify-content: flex-end; /* 控制主轴方向排列对齐 */
/* align-items: center; 去掉交叉轴控制 */
display: flex; /* 使用Flexbox布局 */
flex-direction: row; /*默认*/
justify-content: flex-start; /*默认*/
/* align-items: center; 去掉交叉轴控制 */
display: flex; /* 使用Flexbox布局 */
flex-direction: row; /*默认*/
justify-content:space-between; /* 控制主轴方向排列对齐 */
/* align-items: center; 去掉交叉轴控制 */
上图为间距相等的排列，使用space-evenly
display: flex; /* 使用Flexbox布局 */
flex-direction: row; /*默认*/
justify-content:space-evenly; /* 控制主轴方向排列对齐 */
/* align-items: center; 去掉交叉轴控制 */
display: flex; /* 使用Flexbox布局 */
flex-direction: column; /* 子项垂直排列使用column*/
justify-content: center; /*flex-start flex-end center space-between space-evenly */
/*align-items: center; /*flex-start flex-end center stretch baseline */
display: flex; /* 使用Flexbox布局 */
flex-direction: column; /* 子项垂直排列使用column*/
justify-content: center; /*flex-start flex-end center space-between space-evenly */
align-items: center; /*flex-start flex-end center stretch baseline */
最后来一个反序，上图为垂直反序
display: flex; /* 使用Flexbox布局 */
flex-direction: column-reverse; /* row,row-reverse,column,column-reverse 子项垂直排列使用column*/
justify-content: center; /*flex-start flex-end center space-between space-evenly */
align-items: center; /*flex-start flex-end center stretch baseline */
总结：
弹性盒模型的关键：justify-content同主轴方向 align-items是交叉轴方向。
比如：flex-direction定义为row时 那么align-items控制column即垂直方向；
如果flex-direction定义为column时 那么align-items控制row即水平方向；
justify-content它始终同主轴方向，也就是flex-direction定义的方向。
当flex-direction为row时，主轴是水平方向（从左到右），交叉轴是垂直方向（从上到下）。
在这种情况下，justify-content控制的是水平方向上的对齐和分布，
而align-items控制的是垂直方向上的对齐。
当flex-direction为column时，主轴变为垂直方向（从上到下），交叉轴变为水平方向（从左到右）。
此时，justify-content控制的是垂直方向上的对齐和分布，
而align-items控制的是水平方向上的对齐（尽管这听起来可能有些反直觉，
因为align-items的名称中包含"align"，但它实际上是在控制交叉轴上的对齐）。