GridvsFlexbox：哪个更好？

 [[392381]]

这个话题已经争论了很多次，哪个更好?

对您的网站布局和内容使用Grid(网格)系统还是Flexbox?让我们深入了解两者之间的主要区别以及何时使用它们。

Grid用于二维布局，Flexbox用于一维布局。

网格布局——二维

网格布局(即Bootstrap或CSS网格)用于二维布局。这意味着什么?这意味着，如果您要同时创建包含行和列的布局，请使用网格系统。

对于布局将包含页面内容的页面容器来说，这是一个完美的解决方案。

Flexbox ——一维

将Flexbox用于一维布局，这意味着内容会沿一个方向(水平或垂直)移动。

以Navbar为例——您可能具有Logo和页面链接，这些Logo和页面链接水平排列成一行(单向)。使用Flexbox将以更少的代码行为您提供更大的灵活性和对内容的控制。

使用网格系统进行页面布局，将Flexbox用于页面内容。

这里的一般规则是Flexbox会基于内容，而网格基于布局。

Flexbox —内容之王

让我们看一个简单的示例，以帮助我们了解如何将这两个概念一起使用。

让我们从上方使用导航栏，从头开始。这是原始的HTML：

 
 
 
 
    
  
  
  
  
    2.   
  
  
  
  2.   
    Home
     
    3.   
  
  
  
  3.   
    About
     
    4.   
  
  
  
  4.   
    Contact
     
    5.   
  
  
  
  5.   
    Search
     
    6.   
  
  
  
  6.  
    7.

现在，在使用Flexbox之前，这些元素将像这样简单地相互堆叠。

让我们贴上一个 display: flex 看看会发生什么。

 
 
 
 
    
  
  
  
  
  1. nav { 
    2.   
  
  
  
  2.   display: flex; 
    3.   
  
  
  
  3. } 
    4.

惊人的!现在，我们将元素很好地排成一行。

让我们把“SIGN IN”(登录)扔到最右边。

 
 
 
 
    
  
  
  
  
  1. nav > div:nth-child(4) { 
    2.   
  
  
  
  2.   margin-left: auto; 
    3.   
  
  
  
  3. } 
    4.

真正酷的是，我们把它留给项目来决定它们如何放置。我们不需要做任何其他事情，只需要给它一个 display: flex;

现在，我们可以使用网格系统实现同样的结果--但让我在这里告诉你其中的区别。在这个例子中，我将使用Bootstrap网格系统来创建我们的行和列。

这是我们的HTML

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.   Home
 
  •   About
    •  
  •   Contact
    •  
  •   Sign In 
  •  

    • 此处的区别是我们被迫设置许多列。

    通过Bootstraps网格系统，我们需要设置相当于12列的栏位来扩展视口的全部宽度。

    这里还有一个使用网格系统做内容的痛苦。如果我们将来决定添加另一个链接，我们每次都需要改变列宽。

     
 
 
 
      
  
  
  
  
    1.  
      2.   
  
  
  
    2.   Home 
      3.   
  
  
  
    3.   About 
      4.   
  
  
  
    4.   Contact 
      5.   
  
  
  
    5.   Rad Stuff 
      6.   
  
  
  
    6.   Sign In 
      7.   
  
  
  
    7.  
      8.

    有了Flexbox，我们只需将新的导航条链接放入，元素就会自行处理。

    结合两者

    让我们看看如何将两者结合使用，这是网站布局。

    这是HTML(再次使用Bootstraps网格系统类)。

     
 
 
 
      
  
  
  
  
    1.  
      2.   
  
  
  
    2.    
      3.   
  
  
  
    3.      
      4.   
  
  
  
    4.       Header 
      5.   
  
  
  
    5.      
      6.   
  
  
  
    6.    
      7.   
  
  
  
    7.    
      8.   
  
  
  
    8.      
      9.   
  
  
  
    9.       Menu 
      10.   
  
  
  
    10.      
      11.   
  
  
  
    11.      
      12.   
  
  
  
    12.        
      13.   
  
  
  
    13.          
      14.   
  
  
  
    14.           Content 
      15.   
  
  
  
    15.          
      16.   
  
  
  
    16.        
      17.   
  
  
  
    17.        
      18.   
  
  
  
    18.          
      19.   
  
  
  
    19.           Content 
      20.   
  
  
  
    20.          
      21.   
  
  
  
    21.        
      22.   
  
  
  
    22.      
      23.   
  
  
  
    23.    
      24.   
  
  
  
    24.    
      25.   
  
  
  
    25.      
      26.   
  
  
  
    26.       Footer 
      27.   
  
  
  
    27.      
      28.   
  
  
  
    28.    
      29.   
  
  
  
    29.  
      30.

    现在，我们将添加Navbar——它是一个Flexbox容器，代替我们网格布局中的“HEADER”文本。在这个片段中，我只展示了包装导航条的HTML。

     
 
 
 
      
  
  
  
  
    1.  
      2.   
  
  
  
    2.   
      3.   
  
  
  
    3.     
      Home
       
      4.   
  
  
  
    4.     
      About
       
      5.   
  
  
  
    5.     
      Search
       
      6.   
  
  
  
    6.     
      Sign In
       
      7.   
  
  
  
    7.    
      8.   
  
  
  
    8.  
      9.

    现在，我们有了一个可以同时利用Grid布局和Flexbox优势的布局。

    我希望你现在对Flexbox和Grid的一般和具体区别有了深刻的了解，知道如何和何时使用它们。

    本文转载自微信公众号「前端全栈开发者」，可以通过以下二维码关注。转载本文请联系前端全栈开发者公众号。

     

    当前文章：GridvsFlexbox：哪个更好？
    本文链接：http://www.shufengxianlan.com/qtweb/news29/366929.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    虚拟主机知识

    分类信息网站

    绵阳服务器托管　　 　四川成都网站建设　　 　成都营销型网站建设　　 　成都网页设计　　 　成都响应式网站建设公司　　 　租用服务器　　 　微信小程序开发　　 　网站制作　　 　做网站　　 　网站优化排名推广　　 　蓬溪网站建设　　 　南京护栏钻孔机　　 　成都小谭网创广告　　 　兴宏源活动板房　　 　证企宝　　 　成都广告制作　　 　网络推广公司　　 　成都网站建设　　 　成都网站制作　　 　微信开发