当父盒子设置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 容器。
发表回复