1026 flex属性作业

<style>
    /* flex容器 */
    .box{
      width: 500px;
      display: flex;
      /* 项目竖向排列 */
      /* flex-direction:column; */
      /* 项目横向排列 */
      flex-direction: row;
      /* 项目主轴排列 */
      /* justify-content: start; */
      /* 项目主轴两端对齐 */
      justify-content: space-between;
      /* 项目主轴是否换行 */
      /* flex-wrap: nowrap; */
      /* 项目主轴换行 */
      flex-wrap: wrap;
      /* 项目位于容器的中心 */
      align-items: center;
      /* 项目会换行 */
      /* align-content: stretch; */
      /* 项目主轴方向向下 */
      /* flex-flow: column; */
      /* 项目主轴方向默认 */
      flex-flow: row;
      /* 左边对齐， center 中间对齐， end 右边对齐 */
      place-content: start;
      /* 两端对齐 space-around 分散对齐， space-evenly 平均对齐 */
      place-content: space-between;
      /* 顶部排列， center 居中排序， end底部排列， stretch自动拉伸 */
      place-items: start;
    }
    /* flex项目 */
    .item{
      width: 100px;
      height: 100px;
      /* 将项目平分宽度 */
      flex: 1;
    }
    /* flex项目的子元素 */
    p{
      font-size: 24px;
      text-align: center;
      line-height: 100px;
    }
    .color1{
      background-color: aqua;
    }
    .color2{
      background-color: blueviolet;
    }
    .color3{
      background-color: brown;
    }
    .color4{
      background-color: chocolate;
    }
  </style>
  <div class="box">
    <div class="item color1">
      <p>内容1</p>
    </div>
    <div class="item color2">
      <p>内容2</p>
    </div>
    <div class="item color3">
      <p>内容3</p>
    </div>
    <div class="item color4">
      <p>内容4</p>
    </div>
  </div>