0
点赞
收藏
分享

微信扫一扫

css - Grid布局

潇湘落木life 2023-10-14 阅读 45
  1. 区别:
  • 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>

举报

相关推荐

0 条评论