css flex和grid布局总结

参考链接：CSS 网格布局 | 菜鸟教程

Flex 布局语法教程 | 菜鸟教程

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

CSS Grid（网格）布局，是一个二维的基于网络的布局系统。

区别：flex是一维布局，grid是二维布局

 

 

Grid

属性值

flex

属性值：

容器上

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• alig

项目上

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self