- 区别:
- Flex布局:
a. 它是轴线布局,只能指定"项目"针对轴线的位置.
b. 可以看作是一维布局.
- Grid布局:
a. 则是将容器划分成"行"和"列",产生单元格,再指定"项目所在"的单元格.
b. 可以看作是二维布局.
Grid布局和 flex 布局时有实质性的区别的,flex 是一维布局,只能处理一个维度上的布局,一行或者是一列,但是 Grid 布局是二维布局,将容器划分成了 “行” 和” 列”,产生了一个个的网格,可以将网格元素放在行和列相关的位置上,从而达到了布局的目的。
<div class="container">
<div class="item-1">
<p class="sub-item">Grid布局</p>
</div>
<div class="item-2"></div>
<div class="item-3"></div>
<div class="item-4"></div>
<div class="item-5"></div>
<div class="item-6"></div>
</div>