CSS flex 用法

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 非常相似，只是它不会在两端留下任何空间。