盒子模式

弹性盒子

布局的传统解决方案，基于[盒状模型]，于那些特殊布局非常不方便。
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
2009年诞生的这个属性可以说是不亚于 css界一场蒸汽机诞生一样的工业革命，它的诞生标志着马车一样的 float被彻底抛进历史的垃圾堆。

通过display：flex 将对象设置为弹性盒子，以下属性必须熟记于心。

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。
它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

弹性盒子模型.png

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
容器属性：
flex-direction（决定主轴的方向）
flex-wrap（决定是否换行）
flex-flow（ <flex-direction> || <flex-wrap>;）
justify-content（主轴方向对齐方式）
align-items（交叉轴方向对齐方式）
align-content（多轴情况下沿交叉轴对齐方式）
项目属性：
order：数值越小，排列越靠前，默认为0。
flex-grow:项目的放大比例，默认为0
flex-shrink:项目的缩小比例，默认为1
flex-basis:项目占据主轴的大小
flex：flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
两个快捷值：auto (1 1 auto) 和 none (0 0 auto)
align-self：单个项目有与其他项目不一样的对齐方式

flex-box无疑是布局上面的神器

网格

网格布局同样是布局方面的神器，目前不太常用。
display:grid; 设置网格
必须使用 display: grid 将容器元素定义为一个 grid(网格) 布局，使用 grid-template-columns 和 grid-template-rows 设置 列 和 行 的尺寸大小，然后通过 grid-column 和 grid-row 将其子元素放入这个 grid(网格) 中
网格属性：
display：grid| subgrid

grid-template-columns：设置列
grid-template-rows：设置行
grid-template-areas：设置区域

grid-template：none | subgrid | <grid-template-rows> / <grid-template-columns>;前面三个属性合体

grid-column-gap：设置列间距
grid-row-gap：设置行间距
grid-gap：<grid-row-gap> <grid-column-gap>;前两个属性合体

justify-items：start | end | center | stretch;设置项目水平方向对齐方式
align-items：start | end | center | stretch;设置项目垂直方向对齐方式

justify-content：start | end | center | stretch | space-around | space-between | space-evenly; 设置网格水平对齐方式
align-content： start | end | center | stretch | space-around | space-between | space-evenly; 设置网格垂直对齐方式

grid-auto-columns：自动补齐列
grid-auto-rows：自动补齐行

grid-auto-flow：row | column | row dense | column dense
grid

网各项属性：

grid-column-start
grid-column-end
grid-row-start
grid-row-end

grid-column：项目放置列
grid-row：项目放置行

grid-area
justify-self
align-self