flex 用法：

  • flex 可以在浏览器里点击就有~

  • 设置了 display: flex 的父元素被称之为 flex 容器（flex container），它的子元素都会以 flex 布局。

  • flex-direction: column; 竖直排列

  • flex-wrap: wrap; 换行

  • flex: 1; 用于设置动态尺寸，表示占比，和 grid-template-columns 类似，只不过需要去一个个设置（这就体现出 grid 的优越性了不是？）

  • 水平和垂直对齐：

    • align-items 控制 flex 项在交叉轴上的位置。
    • 默认的值是 stretch，其会使所有 flex 项沿着交叉轴的方向拉伸以填充父容器。如果父容器在交叉轴方向上没有固定宽度（即高度），则所有 flex 项将变得与最长的 flex 项一样长（即高度保持一致）。
    • center 值会使这些项保持其原有的高度，但是会在交叉轴居中。
    • 你也可以设置诸如 flex-start 或 flex-end 这样使 flex 项在交叉轴的开始或结束处对齐所有的值。
      justify-content 控制 flex 项在主轴上的位置。
    • 默认值是 flex-start，这会使所有 flex 项都位于主轴的开始处。
    • 你也可以用 flex-end 来让 flex 项到结尾处。
    • center 在 justify-content 里也是可用的，可以让 flex 项在主轴居中。
    • space-around 是很有用的——它会使所有 flex 项沿着主轴均匀地分布，在任意一端都会留有一点空间。
    • 还有一个值是 space-between，它和 space-around 非常相似，只是它不会在两端留下任何空间。