个性化阅读
专注于IT技术分析

Flexbox与Grid布局大比拼,使用哪种布局更好?为什么?

CSS Grid和Flexbox是CSS布局中最强大的布局系统,Flexbox的布局首先解决了很多复杂的布局问题,包括移动响应式页面也能够很好的处理,也是目前流行的一种布局方式。

而CSS Grid的则是对Flexbox的一种补充,相对Flexbox,Grid网格布局更适合复杂的界面布局。但是CSS Grid和Flexbox具体有什么不同呢?用哪一个更好?如何权衡?

1、CSS Grid网格布局可以代替Flexbox布局吗?

我们刚刚接触CSS Grid时候,可能会问:这个Grid网格布局可以代替Flexbox吗?只使用Grid而放弃Flexbox吗?不,不是这样的,Grid能做到Flexbox不能做到或不适合做的事,Flexbox仍然是我们布局的好工具,能做到Grid不能做到的。

比如,我们仍然会使用一些又老又旧的CSS技巧来布局,例如:float,很多时候都会使用到float,又如position定位布局等,这些都是布局技术中的一部分,我们要知道,CSS Grid也是其中之一。

我们会在页面某部分使用Grid,其它地方则不用,它不像我们使用的一些强大的框架,比如Bootstrap或Foundation,它不需要处理整个页面的布局,而是处理某个特定容器的布局。

所以我们也可以在项目中混用Flexbox和CSS Grid,下面是两者混用的一个例子。

先看HTML代码:

<!--页头-->
<header class="header">
    <div class="navigation">
        <ul class="navigation-left">
            <li>首页</li>
            <li>发现</li>
            <li>热门推荐</li>
        </ul>

        <ul class="navigation-right">
            <li>注册</li>
            <li>登录</li>
        </ul>
    </div>
</header>

<!--页面主体-->
<div class="wrapper">
    <div class="main">

    </div>

    <div class="sidebar">

    </div>
</div>

<!--页脚-->
<footer class="footer">
    <ul class="info">
        <li>关于我们</li>
        <li>隐私政策</li>
        <li>版权声明</li>
    </ul>
</footer>

这是标准的页面构成:页头,主体内容,侧边栏,页脚,直接放在body下面。

下面我们看一下CSS代码:

*{
    margin: 0;
    padding: 0;
}
ul{
    list-style: none;
}

/*页头*/
.header .navigation, .wrapper{
    width: 1200px;
    margin: auto;
}
.header{
    height: 60px;
    margin-bottom: 30px;
    border-bottom: 1px solid #e5e5e5;
}
.header .navigation{
    height: 100%;
    display: flex;
    justify-content: space-between;
}
.header .navigation .navigation-left,
.header .navigation .navigation-right{
    height: 100%;
    display: flex;
    align-items: center;
}
.header .navigation li{
    padding: 0 15px;
}
/*页头*/


/*页面主体*/
.wrapper{
    height: 790px;
    display: grid;
    grid-template-columns: 9fr 3fr;
}
.wrapper .main{
    margin: 0 15px;
    height: 100%;
    background-color: #83bdff;
}
.wrapper .sidebar{
    margin: 0 15px;
    height: 100%;
    background-color: #ffa5cb;
}
/*页面主体*/


/*页脚*/
.footer{
    height: 60px;
    margin-top: 30px;
    border-top: 1px solid #e5e5e5;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: ". info .";
    justify-content: center;
}
.footer .info{
    height: 60px;
    grid-area: info;
    display: flex;
    align-items: center;
}
.footer .info li{
    font-size: 13px;
    padding: 0 15px;
}
/*页脚*/
CSS Grid网格布局实例

你可以看到有些地方使用了CSS Grid,有些地方使用了Flexbox。当然这个例子太简单,这个例子全部使用Flexbox或全部使用CSS Grid都可以。因为CSS Grid是二维布局,所以全局布局我们完全可以用grid-template-areas指定所有区域。

2、那么你为什么要使用Flexbox?为什么你要使用CSS Grid布局?你应该在什么时候使用哪个?

如果我们只想要往一个方向布局,Flexbox就很有用。你可以把它想成一大堆盒子排在一条无限长的线上,但它并不是无限的长,实际上是有限的空间。盒子可能会跳行,可能不会,跳行与否,浏览器每次都只会考虑一个纬度,浏览器不会跨行做计算,它只会计算一个方向。

Grid能够布局两个方向的元素。实际上,Grid总是想要布局在两个方向上,你无法使用它做交错布局,它总是同时考虑行和列,它会想要调整你的网格,同时考虑两个方向发生的事。

Grid布局样式

这张图片显示了是一个使用Grid布局,来排列两个方向的东西。

Flexbox布局样式

这张图显示了在Flexbox时,计算是按每一行计算的,一次一行,不管其它行的事,你可以看到东西并没有对齐,它依赖于内容的大小,页面上东西的大小。

CSS Grid网格布局和Flexbox布局对比

这张图显示出Grid擅长什么,Flexbox擅长什么。

有些情况Flexbox或Grid是通用的,他们可以做同样的事情,有一件情况,Grid可以做但是Flexbox无法做到的是“重叠元素”,如果你的情况是两者都能做到,但是你想要重叠元素,那你肯定想要使用Grid。

这里有个例子:

CSS Grid层叠布局样式

图片是内容,不是背景图片。图片右上角有一个按钮元素,我们不想使用绝对定位,或者添加更复杂的时候绝对定位会无效。我们使用Grid,但是我们也可以使用Flexbox,但是因为有重叠,我们可以在这种情况下使用CSS Grid。

3、全局页面定位搭建使用CSS Grid还是Flex box?

这要视情况确定,如果所有主要的全局容器元素都同级分布,因为这时元素呈二维分布,推荐考虑用CSS Grid。如:

<div class="container">
    <!--页头-->
    <header class="header"></header>

    <!--页面主体-->
    <div class="main"></div>

    <!--侧边栏-->
    <div class="sidebar"></div>

    <!--页脚-->
    <footer class="footer"></footer>
</div>

CSS样式可以这样写:

.container{
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-areas:
        "header header"
        "main sidebar"
        "footer footer";
}

这样就可以基本完成整体布局了,你也可以使用Flexbox,但是使用Flexbox情况可能会有些复杂,因为Flexbox只能在一个方向上布局,为了达到效果,这时候你需要将元素进行嵌套,用一次或两次Flexbox布局才能达到相同的效果。

现在看来我们可以根据元素是一维分布还是二维分布,来选择CSS Grid或Flexbox。

4、使用CSS Grid对齐元素方便吗?还是使用Flexbox对齐元素更方便?

对齐组件元素是前端开发中必不可少的操作,我们借助一个例子来看看CSS Grid和Flexbox的对齐操作哪一个更方便。

我们的操作对象如下,这是一个顶部导航栏,内容需要左右对齐:

<div class="navigation">
    <ul class="navigation-left">
        <li>首页</li>
        <li>发现</li>
        <li>热门推荐</li>
    </ul>

    <ul class="navigation-right">
        <li>注册</li>
        <li>登录</li>
    </ul>
</div>

1)CSS Grid的布局写法如下:

.navigation{
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.navigation .navigation-left{
    justify-self: start;
}
.navigation .navigation-right{
    justify-self: end;

}

但是此时li元素并没有水平对齐,我们还需要在两个ul上再添加对齐样式,我们可以添加如下样式实现:

ul{
    justify-self: start;
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
}

2)Flexbox的做法如下:

.navigation{
    height: 100%;
    display: flex;
    justify-content: space-between;
}
.navigation .navigation-left,
.navigation .navigation-right{
    height: 100%;
    display: flex;
    align-items: center;
}

Flexbox的对齐方式写法比较简洁一些,而CSS Grid则显得有些复杂,推荐使用Flexbox,但是最好的是你更熟练哪种就用哪种。

5、响应式页面设计用CSS Grid还是Flexbox?

这个问题需要根据你原先使用的布局确定,例如,如果原先使用的是CSS Grid布局:

.container{
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-areas:
        "header header"
        "main sidebar"
        "footer footer";
}

则响应式的写法:

.container{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
            "header"
            "main"
            "footer";
}

这种形式是不是比较简单,这是因为你在整体布局中使用了Grid。如果你在刚开始整体布局使用的是Flexbox或者其它形式,那么情况又会不一样。最好保持整体布局和响应式布局一致,这样会比较清晰明了,一致的写法会简单很多。

像上面第一个代码例子,整体布局并没有用到Grid或Flexbox,那么在响应式里就似乎就不太好了,所以记得在整体布局的时候要使用适当的布局,下面是实现效果:

响应式设计效果图

6、Flexbox和Grid的浏览器兼容性如何?

1)Grid

PC端:Chrome57+,Opera44+,Firefox52+,IE11+,Safari10.1,Edge16+

移动端:iOS10.3,Android67,Android69,Android Firefox62

2)Flexbox最新版本

Chrome20,Safari3.1+,Firefox2-21,IE10,Android2.1+,iOS3.2+

7、结语

现在你可以看到Flexbox和CSS Grid和float,position一样,属于CSS布局的一种,我们最好按照每个开发场景的不同选择不同的布局,比如对于整体布局这种内容较大的布局我们可以使用Grid;推荐使用Flexbox处理组件对齐方式;面向响应式设计我们又要注意,有必要在开始时确定布局方式,这样才更好处理后面的布局,使用CSS Grid是个不错的选择。

赞(0) 打赏
未经允许不得转载:srcmini » Flexbox与Grid布局大比拼,使用哪种布局更好?为什么?
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏