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