共计 443 个字符，预计需要花费 2 分钟才能阅读完成。
当父盒子设置 flex 时
<style>
.box{
display: flex;
height: 200px;
width: 300px;
border: 1px solid red;
}
.box > div{
width: 30px;
background-color: pink;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>后果
默认值
此时出现如上，因为父盒子默认值如下：
flex-direction: row// 定义主轴为从左往右，即终点为左，起点为右，穿插轴为从上往下。justify-content：flex-start// 定义所有子盒子从左往右排列，即从主轴终点到起点。align-items：stretch// 定义所有子盒子沿着穿插轴，即与主轴垂直的轴，撑满 flex 容器。
正文完