display: flex; 的默认轴是x轴
justify-content: 设置主轴上的子元素排列的方式
所以在使用之前要确定好哪一个是主轴
/* justify-content:flex-start; 如果主轴是x,从左到右 如果主轴是y,从上到下*/
/* justify-content: flex-end; 如果主轴是y,从下到上到右 如果主轴是x,从右到做*/
/* justify-content:center; 居中*/
/* justify-content: space-around; */
/* justify-content: space-between; */
#main {
width: 800px;
height: 300px;
border: 1px solid #c3c3c3;
display: flex;
flex-direction: row;
justify-content:flex-start;
}
#main>div{
width: 150px;
height: 100px;
background: #0099FF;
}
<div id="main">
<div style="background-color:coral;">11</div>
<div style="background-color:lightblue;">22</div>
<div style="background-color:pink;">33</div>
<div style="background-color:olive;">4</div>
</div>
justify-content:flex-end;
justify-content: space-around;
原文：https://www.cnblogs.com/IwishIcould/p/11823588.html