下面代码保存为文件：style.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
<!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”，但它实际上是在控制交叉轴上的对齐）。
