弹性盒模型关键几个点：

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/1545364.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！