Flexbox（弹性盒）用于一维布局 —— 也就是行或者列. 网格用于二维布局 —— 也就是多行多列.
https://www.w3cplus.com/css3/a-visual-guide-to-css3-flexbox-properties.html
https://www.w3cplus.com/css3/things-ive-learned-css-grid-layout.html
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
其默认值为：row
flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse；
默认值：nowrap
flex-flow:
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
默认值：flex-start
align-items: stretch;
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;
默认值：stretch
align-content: stretch;
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;
默认值：stretch
item
order:
默认值： 0
flex-grow:
默认值： 0
flex-shrink:
flex-basis: auto |
flex: none | auto | [
auto(1 1 auto)和non(0 0 auto)。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
grid
https://www.w3cplus.com/css/learncssgrid.html
display: grid
display: inline-grid
grid-template-rows: 50px 100px
grid-template-columns: 90px 50px 120px
grid-template-columns: 1fr 1fr 2fr
grid-template-columns: 3rem 25% 1fr 2fr
grid-template-rows: minmax(100px, auto);
grid-template-columns: minmax(auto, 50%) 1fr 3em;
grid-template-rows: repeat(4, 100px);
grid-template-columns: repeat(3, 1fr);
grid-template-columns: 30px repeat(3, 1fr) 30px
grid-row-gap: 20px;
grid-column-gap: 5rem;
grid-gap:
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 3;
grid-row: 2;
grid-column: 3 / 4;
grid-area: 2 / 2 / 3 / 3;
grid-area:
grid-row: 2 / span 3; grid-column: span 2
span后面紧随数字，表示合并多少个列或行
网格线命名
grid-template-rows: [row-start row-1-start] 1fr [row-1-end row-2-start] 1fr [row-2-end row-end]; grid-template-columns: [col-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-end];
grid-row-start: row-2-start;
grid-row-end: row-end;
grid-column-start: col-2-start;
grid-column-end: col-end;
grid-row: row-2-start / row-end;
grid-column: col-2-start / col-end;
grid-template-rows: repeat(3, [row-start] 1fr [row-end]);
grid-template-columns: repeat(3, [col-start] 1fr [col-end]);
grid-row: row-start 2 / row-end 3;
grid-column: col-start / col-start 3;
grid-auto-row: row
grid-auto-flow: column
网格项目对齐方式（Box Alignment）
justify-items: start
justify-items: end
justify-items: center
justify-items: stretch
align-items: start
align-items: end
align-items: center
align-items: stretch
justify-self: start
justify-self: end
justify-self: center
align-self: start
align-self: end
align-self: center
justify-content: start;
justify-content: end;
justify-content: center;
justify-content: space-around
justify-content:space-between
justify-content: space-evenly;
align-content: start;
align-content: end;
align-content: center;
align-content: space-around
align-content:space-between
align-content: space-evenly;
grid-column-end: -1;
让你的页面始终是从左到右贯穿的
.grid { align-items: stretch; } .griditem { display: flex; align-items: center; }