Flex布局
flex 是 flexible box 的缩写，意为弹性布局，用来为盒模型提供灵活性。
它是发生在父容器和子容器之间的布局关系。
// 使用 flex 布局
.box {
display: flex; // 行内元素使用inline-flex
}
属性
父容器属性
- flex-direction：指定项目的排列方向
- flex-wrap：项目放不下时如何换行
- flex-flow：上面两个的简写
- align-items：项目在交叉轴的对齐方式
- justify-content：项目在主轴上的对齐方式
- flex-start（默认值）：左对齐
- flex-end：右对齐
- center：居中
- space-between：紧挨两端对齐，项目之间的间隔相等
- space-around：项目之间的距离是项目到边框的距离的两倍
- align-content：指定多根轴线（多行）的对齐方式。如果项目只有一行则不起作用
子容器属性
-
order：定义项目的排列顺序，数值越小越靠前，默认为 0
-
flex-grow：项目的放大比例，默认为 0（表示存在剩余空间也不放大）
-
flex-shrink：项目的缩小比例，默认为 1
-
flex-basis：在分配多余空间之前，项目占据的主轴空间大小
- 优先级：max-width/min-width > flex-basis > width
-
flex：上面三个的简写，默认值为 0 1 auto
- 该属性有两个快捷值：auto（1 1 auto）、none（0 0 auto）
-
align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items
参考
Grid布局
网格布局（grid）将网页划分成一个个网格，可以任意组合不同的网格进行布局。
// 使用 grid 布局
.box {
display: grid; // 行内元素使用inline-grid
}
属性
父容器属性
-
grid-template-rows：划分行
-
grid-template-columns：划分列
-
grid-row-gap：行间距
-
grid-column-gap：列间距
-
grid-gap：上面两个的简写
-
grid-template-areas：指定区域
// a、b、c三个区域
grid-template-areas: 'a a a'
'b b b'
'c c c';
// 顶部header、底部footer、中间main和sidebar
grid-template-areas: "header header header"
"main main sidebar"
"footer footer footer";
-
grid-auto-flow：项目放置顺序，默认为先行后列
-
align-items：设置单元格内容的垂直位置
-
justify-items：设置单元格内容的水平位置
-
place-items：上面两个的简写
-
align-content：指定全部网格在容器中的垂直位置
-
justify-content：指定全部网格在容器中的水平位置
-
place-content：上面两个的简写
子容器属性
-
grid-column-start：左边框所在的垂直网格线
-
grid-column-end：右边框所在的垂直网格线
-
grid-column：上面两个的简写
-
grid-row-start：上边框所在的水平网格线
-
grid-row-end：下边框所在的水平网格线
-
grid-row：上面两个的简写
-
grid-area：指定项目放入哪一个区域
-
justify-self：指定单元格内容的水平位置
-
align-self：指定单元格内容的垂直位置
-
place-self：上面两个的简写
