Flex弹性布局
Flex容器属性
flex-direction
flex-wrap
align-items
justify-content
align-content
Flex项目属性
align-self
flex-grow
flex-shrink
order
Flex容器属性
flex-direction: row
flex-direction: row-reverse
flex-direction: column
flex-direction: column-reverse
flex-wrap: nowrap
flex-wrap: wrap
flex-wrap: wrap-reverse
justify-content: flex-start
justify-content: flex-end
justify-content: center
justify-content: space-between
justify-content: space-around
justify-content: space-evenly
align-items: flex-start
align-items: flex-end
align-items: center
align-items: baseline
align-items: stretch
align-content: flex-start
align-content: flex-end
align-content: center
align-content: space-between
align-content: space-around
align-content: stretch
gap: row, column
Flex项目属性
order
flex-grow
flex-shrink
align-self: auto
align-self: flex-start
align-self: flex-end
align-self: center
align-self: baseline
使用Flex实现Grid栅格布局
flex-grow: 1