CSS常见布局 | 青训营笔记
这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天
前言
书接上回，让我们继续。
书接上回，让我们继续。
子容器属性
order 属性
order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为 0。
flex-grow 属性
flex-grow 属性定义子容器的伸缩比例。按照该比例给子容器分配空间。
flex-shrink 属性
flex-shrink 属性定义了子容器弹性收缩的比例。如图，超出的部分按 1:2 的比例从给子容器中减去。此属性要生效，父容器的 flex-wrap 属性要设置为 nowrap
flex-basis 属性
flex-basis 属性定义了子容器在不伸缩情况下的原始尺寸，主轴为横向时代表宽度，主轴为纵向时代表高度。
flex 属性
子元素的 flex 属性是 flex-grow,flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。有两个属性可选。
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
align-self 属性
子容器的 align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖父容器 align-items 属性。默认值为 auto，表示继承父元素的 align-items属性，如果没有父元素，则等同于 stretch。
grid 网格布局
flex 布局虽然强大，但是只能是一维布局，如果要进行二维布局，那么我们还需要使用 grid。
grid 布局又称为“网格布局”，可以实现二维布局方式，和之前的 表格table布局差不多，然而，这是使用 CSS 控制的，不是使用 HTML 控制的，同时还可以依赖于媒体查询根据不同的上下文得新定义布局。
和 table 布局不同的是，grid 布局不需要在 HTML 中使用特定的标签布局，所有的布局都是在 CSS 中完成的，你可以随意定义你的 grid 网格。
