flex布局和grid布局

flex布局

父容器.parent-8个设置项

.parent{
  display: flex;
  flex-direction: row|row-reverse|column|column-reverse                                 // 决定子元素的排列方式
  flex-wrap: nowrap|wrap|wrap-reverse                                                   // 决定子元素的换行方式
  flex-flow: flex-flow是flex-direction和flex-wrap的缩写                                   // 默认值为：row nowrap
  justify-content: flex-start|flex-end|center|space-between|space-around|space-evenly   // 决定子元素在x轴的对齐方式

  align-items: flex-start|flex-end|center|stretch|baseline                              // 决定子元素在y轴的对齐方式
  align-content: flex-start|flex-end|center|space-between|space-around|space-evenly|stretch     // 多行子元素在y轴的排列方式
  // stretch，如果子元素未设置高度或者设置为auto，则撑满整个父容器；如果设置了高度，则stretch不生效

  gap: 
}

子元素.child-6个设置项

.child{
  flex:         // flex是flex-grow、flex-shrink、flex-basis3个元素的简写，默认值为0 1 auto
  flex-grow:    // 放大比例，默认为0，0则代表不放大。放大比例，是相对于剩余空间。
  flex-shrink:  // 缩小比例，默认为1，1则代码不缩小

  flex-basis:   // width的替代品，用来定义子元素的宽度
  // 最终优先级：元素的最大最小宽高（max-width/min-width等）> flex-basis > 普通宽高
  // http://www.lvyestudy.com/css3/flex-basis

  order:        // 数值越小，排列越靠前，默认为0
  align-self:   // 父容器设置了align-items属性，通过子元素的align-self重写
}

只有当所有子元素宽度之和小于弹性盒子的宽度时，flex-grow才会生效，而此时flex-shrink无效；
只有当所有子元素宽度之和大于弹性盒子的宽度时，flex-shrink属性才会生效，而此时flex-grow无效。
也就是说，flex-grow和flex-shrink是互斥的，不可能同时生效。
参考了：http://www.lvyestudy.com/css3/flex-shrink

grid布局

父容器.parent

.parent{
  grid-template-rows:         // 每行占据多少比例
  grid-template-columns:      // 每列占据多少比例
  row-gap:                    // 行间距，每行之间的间距
  column-gap:                 // 列间距，每列之间的间距
  gap:                        // row-gap和column-gap的组合
  grid-auto-flow:             // 栅格流动机制
  justify-content:            // 水平对齐方式
  align-content:              // 垂直对齐方式
  place-content:              // 上面2个属性的组合写法
  grid-auto-rows: 50px;       // 用于设置多出来的子元素的宽
  grid-auto-columns: 50px;    // 用于设置多出来的子元素的高
}

子元素.child

.child{
  grid-row-start:           // 行开始
  grid-row-end:             // 行结束
  grid-row:1/4              // 上面2个属性的组合写法，第1行开始，第4行结束

  grid-column-start:        // 列开始
  grid-column-end:          // 列结束
  grid-column:1/4           // 上面2个属性的组合写法，第1列开始，第4列结束
}

grid-template-rows: 100px auto 100px; // 设置中间元素水平自适应
grid-template-columns: 100px auto 100px; // 设置中间元素垂直自适应
参考了：https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html