当父盒子设置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 容器。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。