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 */
}
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(默认占满);
}
