flex布局

flex-wrap属性永远都是把后面的元素换行，不管元素是否翻转

在不加flex-wrap时，如果超过了页面宽度，不会进行换行，会自动缩小项目。

    <div
      style="
        display: flex;
        flex-direction: row-reverse;
      "
    >
      <div style="width: 800px; height: 200px; background-color: red">222</div>
      <div style="height: 300px; width: 600px; background-color: blue">333</div>
      <div style="height: 400px; width: 500px; background-color: yellow">
        444
      </div>
    </div>

    <div
      style="
        display: flex;
        flex-wrap: wrap;
        flex-direction: row-reverse;
      "
    >
      <div style="width: 800px; height: 200px; background-color: red">222</div>
      <div style="height: 300px; width: 600px; background-color: blue">333</div>
      <div style="height: 400px; width: 500px; background-color: yellow">
        444
      </div>
    </div>

加上换行属性后flex-wrap，会把黄色的444给放到下一行

错误文章

align-content是相比align-item是对于整体在交叉轴上进行排布，并且必须有多个轴线（也就是必须有flex-wrap：wrap），才能生效。他的属性取值为stretch加上justify的5个属性。

使用align-item,每一行都在交叉轴上居中对齐

 <div
      style="
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        /* align-content: center; */
      "
    >
      <div style="width: 800px; height: 200px; background-color: red">222</div>
      <div style="height: 100px; width: 600px; background-color: blue">333</div>
      <div style="height: 100px; width: 500px; background-color: yellow">
        444
      </div>
    </div>

使用align-content，整体在交叉轴上居中对齐

  <div
      style="
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        flex-direction: column;
        /* align-items: center; */
        align-content: center;
      "
    >
      <div style="width: 800px; height: 200px; background-color: red">222</div>
      <div style="height: 100px; width: 600px; background-color: blue">333</div>
      <div style="height: 100px; width: 500px; background-color: yellow">
        444
      </div>
    </div>