12、讲一讲 CSS 的 flex 与 grid

flex

核心是：一维布局

父元素设置 display：flex；可实现子元素的弹性布局

父元素称为‘容器’，子元素称为‘项目’

‘容器’有两根轴：x、y，默认沿着 x 轴排列

‘容器’常用属性设置：

.box {
  /* 设置项目沿主轴排列的方向 */
  flex-deriction: row(默认 x 轴) | column(y 轴) | ...

  /* 是否换行 */
  flex-wrap: npwarp(默认不换行) | warp

  /* 主轴对齐方式 */
  justify-content: flex-start(默认值) | flex-end | center | space-between(两端对齐) | space-around(项目两侧对齐)

  /* 交叉轴对齐方式  */
  align-items: flex-start | flex-end | center | baseline | stretch(默认占满)
}

‘项目’常用属性设置

.item {
  flex: 1 // 是 flex-grow: 1, flex-shrink: 1 和 flex-basis: 0% 的简写

  /* 放大比例 */
  flex-grow: <number>; /* default 0 */

  /* 缩小比例 */
  flex-shrink: <number>; /* default 1 */

  /* 项目占据的主轴空间 */
  flex-basis: <length> | auto; /* default auto 即项目的本来大小 */

  /*  项目自身在交叉轴上的对齐方式 */
  align-self: auto | flex-start | flex-end | center | baseline | stretch; /* default auto */

}

参考文档：Flex 布局教程：语法篇 - 阮一峰的网络日志

grid

核心是：二维布局

父元素设置 display：grid；可实现子元素的网格布局

父元素称为‘容器’，子元素称为‘项目’

‘容器’内有行和列，行列的交叉为‘单元格’

‘容器’常用属性设置：

.container {
  display: grid;

  /* 定义每一列的列宽，数量代表列数，可以使用 repeat(数量, 数值) 来简写 */
  grid-template-columns: 100px 100px 100px; /* 等价于 repeat(3, 100px) */

  /* 定义每一行的行高，数量代表行数，可以使用 repeat(数量, 数值) 来简写 */
  grid-template-rows: 100px 100px 100px; /* 等价于 repeat(3, 100px) */

  /* repeat(auto-fill, 数值) 表示单元格数量自动填充父容器 */

  /* fr 单位，表示比例关系 */
  grid-template-columns: 1fr 2fr 3fr; /* === 第一列宽度:第二列宽度:第三列宽度 */

  /* minmax 函数产生一个范围 */
  grid-template-columns: minmax(100px, 1fr); /* 值为[100px, 1fr] */

  /* --------- */

  /* 行间距(上下间隔) */
  row-gap: 20px;

  /* 列间距(左右间隔) */
  column-gap: 20px;

  /* 行间距与列间距的合并简写，上述等价于 */
  gap: 20px 20px; /* 等价于 20px; */


  /* --------- */
  /* 子元素排列顺序 */
  grid-auto-flow: row(默认‘先行后列’) | column(‘先列后行’);

  /* 设置单元格内容的水平位置（左中右） */
  justify-items: start | end | center | stretch(默认占满);
  /* 设置单元格内容的垂直位置（上中下） */
  align-items: start | end | center | stretch(默认占满);
}

参考文档：CSS Grid 网格布局教程 - 阮一峰的网络日志