Flex和Grid布局

flex适合一维布局
grid适合二维布局
Grid 可以做Flexbox做不了的事
Flex可以做 Grid 做不了的事
他们可以共同工作
Grid item可以成为flexbox容器
flex item可以成为grid 容器
Grid 可以嵌套 flexFlexbox本质上从单一维度布局，行或列
grid布局从双维度行和列

前端工程师可以flex布局一把梭，解决80%以上的需求。

Flex

.container{
  justify-content:flex-start;
  display: flex;
  font-display: column;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  align-content: space-around;
}
.item{
  order: -1;
  flex-grow: 0; //剩余空间也不放大
  flex-shrink: 1; //空间不足时，将缩小
  flex-basis: 200px; //性定义了在分配多余空间之前，项目占据的主轴空间
  flex: 0 1 auto;
  align-self: flex-end;
}