flex 与 grid 常用属性总结

flex 布局

flex (flexible box) 弹性布局，分为两部分，采用flex 布局的容器(flex container) 和容器下的子元素项目(flex item)，采用flex 布局的容器拥有两条轴线，分别是主轴和交叉轴，flex item 沿着主轴顺序排列。主轴默认是水平线，交叉轴默认为垂直线，但主轴与交叉轴并没有固定的方向，可通过在flex container 上设置flex-direction 属性决定主轴的方向是水平线或垂直线。

容器(flex container) 属性

`flex-direction`

设置主轴方向的属性，一共有4种值。

row (默认值)：主轴方向水平从左到右。
row-reverse：主轴方向水平从右到左。
column：主轴方向垂直从上到下。
column-reverse：主轴方向垂直从下到上。

`flex-warp`

flex item 的总宽度超过flex container 的宽度是否换行。在默认值nowarp，不换行的情况下，即使设置了flex item 的宽度，如果总宽度超过容器的宽度，那么子元素的宽度不会是真实设置的宽度，而是平分容器的宽度。

`flex-flow`

flex-direction 和 flex-wrap 的缩写。

`justify-content`

决定flex item 在主轴上的对齐方式。一种常用的居中方式。

.container {
  display: flex;
  justify-content: center;  // 水平居中
  align-items: center;  // 垂直居中
}

`align-items`

决定flex item 在交叉轴上的对齐方式。一种常用的居中方式。

.container {
  display: flex;
  justify-content: center;  // 水平居中
  align-items: center;  // 垂直居中
}

`align-content`

类似align-items，但只对多行起效，对于单行无效。一般不用，都用align-items，但是容易混淆。

项目(flex item) 属性

`flex-grow`

定义项目占据容器多余空间的放大比列，默认是0，这时候只占据这个项目的真实宽度，即使容器有多余宽度，也不放大占据。

`flex-shrink`

定义项目在容器宽度不够时的缩小比列，默认是1，此时如果总宽度超过容器的宽度，那么项目元素的宽度不会是真实设置的宽度，而是平分容器的宽度。flex-shrink: 0; 则不缩放。

`flex-basis`

定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间，默认为auto即项目本来的大小。

`flex`

flex-grow，flex-shrink 和 flex-basis 的缩写。

grid 布局

grid 网格布局，分为两部分，采用grid 布局的容器(grid container) 和容器下的子元素项目(grid item)，可通过grid-template-columns 与grid-template-rows 设置行与列。

容器(grid container) 属性

`grid-template-columns`

用来声明列。可以使用fr 这种grid 提供的新单位，表明占据的份数。

.wrapper {
  display: grid;
  grid-template-columns: 100px 200px 300px;
  // 则.wrapper 水平被分为100px 200px 300px 的三列。
}

`grid-template-rows`

从来声明行。可以使用fr 这种grid 提供的新单位，表明占据的份数。

.wrapper {
  display: grid;
  width: 800px;
  grid-template-rows: 1fr 200px 300px;
  // 则.wrapper 垂直被分为300px 200px 300px 的三行。
}

`grid-template-areas`

区分网格区域，命名相同的区域会合并。

.wrapper {
  display: grid;
  width: 800px;
  grid-template-columns: 100px 200px 300px;
  grid-template-rows: 1fr 200px 300px;
  grid-template-areas: "top-left top-center top-right"
                       "middle middle middle"
                       "bottom-left bottom-right bottom-right";
}

`grid-column-gap` 和 `grid-row-gap`

指定栅格线的大小，可以理解为设置行/列间隙。

`justify-content`

决定grid item 在列轴上的对齐方式，一种常用的居中方式。

.wraper {
  display: grid;
  justify-content: center; // 水平居中
  align-content: center; // 垂直居中
}

`align-content`

决定grid item 在行轴上的对齐方式，一种常用的居中方式。

.wraper {
  display: grid;
  justify-content: center; // 水平居中
  align-content: center; // 垂直居中
}

项目(grid item) 属性

`grid-area`

指定项目属于哪个网格区域。

.item {
  grid-area: top-left;
}

theydy / notebook