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

后果

默认值

此时出现如上，因为父盒子默认值如下：

  1. flex-direction: row //定义主轴为从左往右，即终点为左，起点为右，穿插轴为从上往下。
  2. justify-content： flex-start //定义所有子盒子从左往右排列，即从主轴终点到起点。
  3. align-items：stretch //定义所有子盒子沿着穿插轴，即与主轴垂直的轴，撑满 flex 容器。