flex布局——align-items属性垂直之共有flex-start、center、flex-end& justify-content属性水平之space-around、space-between
对容器进行display: flex布局之后，可通过justify-content来调整容器中子元素整体的布局的位置，其值分别有如下几个：
注：以下情况均由主轴为从左到右方向进行，其从下到上的主轴情况原理类似
- flex-start（默认值）
即默认状态下的在主轴的左边位置，页面代码如下：
/* align-items: flex-start; */
justify-content: flex-start;
效果-水平-开头
-
center
设置为center值之后，其子元素整体的位置则是在主轴的中心位置，其效果如下：
align-items: center; // 垂直居中
效果-水平-中心
justify-content: center; //水平-居中
效果
-
flex-end
其flex-end则是在主轴的右边位置，效果如下图所示：
align-items: flex-end; // 垂直结尾
效果-水平-结尾
justify-content: flex-end // 水平结尾
效果
- space-around-中间间隔
该值会将主轴上剩余空间平均的充斥在各个子元素的周围（类似于有相同的margin-left以及margin-right），效果如下图所示：
justify-content: space-around; // 中间间隔
- space-between-两边撑开
space-between与space-around造成的效果类似，稍有不同的为其第一个子项与最后一个和容器直接没有间隔，其效果如下：
justify-content: space-between; // 两边撑开
文章来源：https://www.toymoban.com/news/detail-804093.html
代码文章来源地址https://www.toymoban.com/news/detail-804093.html
即默认状态下的在侧轴的上边位置，页面代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#container {
display: flex;
margin: 0px auto;
width: 800px;
height: 400px;
background-color: purple;
align-items: flex-start;
/* align-items: center; */
/* align-items: flex-end; */
}
.item {
background-color: pink;
margin-left: 10px;
margin-top: 10px;
width: 250px;
height: 100px;
}
</style>
</head>
<body>
<div id="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</body>
</html>
到了这里，关于flex布局——align-items属性垂直之共有flex-start、center、flex-end& justify-content属性水平之space-around、space-between的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
