你了解 CSS Flex 和 Grid 吗？

[Rashomon511]

Flex 主要用于一维布局，而 Grid 则用于二维布局。

Flex flex容器中存在两条轴， 横轴和纵轴， 容器中的每个单元称为flex item。

在容器上可以设置6个属性： flex-direction flex-wrap flex-flow justify-content align-items align-content

注意：当设置 flex 布局之后，子元素的 float、clear、vertical-align 的属性将会失效。

Flex 项目属性 有六种属性可运用在 item 项目上: 1. order 2. flex-basis 3. flex-grow 4. flex-shrink 5. flex 6. align-self

Grid CSS网格布局用于将页面分割成数个主要区域，或者用来定义组件内部元素间大小、位置和图层之间的关系。

像表格一样，网格布局让我们能够按行或列来对齐元素。 但是，使用CSS网格可能还是比CSS表格更容易布局。 例如，网格容器的子元素可以自己定位，以便它们像CSS定位的元素一样，真正的有重叠和层次。