Flex弹性布局

Flex容器属性

  1. flex-direction

  2. flex-wrap

  3. align-items

  4. justify-content

  5. align-content

Flex项目属性

  1. align-self

  2. flex-grow

  3. flex-shrink

  4. order

Flex容器属性

  1. flex-direction: row

  2. flex-direction: row-reverse

  3. flex-direction: column

  4. flex-direction: column-reverse

  5. flex-wrap: nowrap

  6. flex-wrap: wrap

  7. flex-wrap: wrap-reverse

  8. justify-content: flex-start

  9. justify-content: flex-end

  10. justify-content: center

  11. justify-content: space-between

  12. justify-content: space-around

  13. justify-content: space-evenly

  14. align-items: flex-start

  15. align-items: flex-end

  16. align-items: center

  17. align-items: baseline

  18. align-items: stretch

  19. align-content: flex-start

  20. align-content: flex-end

  21. align-content: center

  22. align-content: space-between

  23. align-content: space-around

  24. align-content: stretch

  25. gap: row, column

Flex项目属性

  1. order

  2. flex-grow

  3. flex-shrink

  4. align-self: auto

  5. align-self: flex-start

  6. align-self: flex-end

  7. align-self: center

  8. align-self: baseline

使用Flex实现Grid栅格布局
flex-grow: 1

Make in ZC APP Platform