最全~Grid vs Flex

最全~Grid vs Flex

首先,读这篇文章前你需要对FlexboxGrid布局有所了解,如果你还不知道,那么知识点来了 Flex布局Grid布局了解一下

一般来说,布局的传统解决方案,是基于盒状模型,依赖display + position + float,但它对于那些特殊的布局非常不方便,比如,垂直居中实现起来很麻烦

Flexbox的出现很好的解决了这个问题。它赋予父容器更改子元素宽高或顺序的能力,来更好的填充可用的空间(响应式)。它是简单的一维布局,最适合用在组件和小规模的布局中,如果是更复杂的布局,Grid布局会比较好一些

CSS Grid,基于网格的二维布局,目的是改变布局解决方法, 它有很多与Flexbox相同的功能,但优势不同,要根据实际情况选择布局方式

下面让我们来比较一下两种布局方式

一、display

通过定义 display的属性值定义环境

Flexbox:

display: flex | inline-flex;

Grid:

display: grid | inline-grid | subgrid;

二、基本概念

两种布局布局及概念有相似之处,也有不同的地方,理解基本概念及术语有助与我们更好的学习

1.Flexbox

Flexbox应用与一维布局,用来为盒状模型提供最大的灵活性 Flexbox了解一下

2.CSS Grid

Gird是css中最强大的布局系统,应用于二维布局,可以同时处理行和列,可以通过将css规则用于父元素(网格容器)和该元素的子元素(网格元素)来使用网格布局。 Grid布局了解一下

三、一维与二维

Flexbox用于一维布局,Grid用于二维布局


这意味着如果在一个方向上排列内容项(例如标题内的三个按钮),那么应该使用Flexbox 相比Grid更加灵活,并且代码少易维护

但是,如果要在两个维度(包括行和列)中创建整个布局,那么应该使用CSS Grid


在这种情况下,Grid提供更大的灵活性,使您的标记更简单,代码将更易于维护。

将两者结合起来,在上面的示例中,使用了Grid进行页面布局,然后使用Flexbox来对齐标题内的内容,完美。在本文末尾向您展示如何做。

四、内容优先与布局优先

两者之间的另一个核心差异是Flexbox基于内容,而Grid基于布局。这个怎么说,让我们看一个具体的例子,来理解它的含义。 我们将使用上一段中的标题。这是它的HTML:

<header>
    <div>HOME</div>
    <div>SEARCH</div>
    <div>LOGOUT</div>
</header>

在我们将它变成Flexbox布局之前,div独占一行向下排列


添加了一些基本样式,与FlexboxGrid无关

1.Flexbox 实现标题布局

但是,当我们给它一个display: flex; header中的div将排列到一条线上

header {
    display:flex;
}



要将LOGOUT按钮移动到最右侧,给该元素左侧一个边距:

header> div:nth-​​child(3){
    margin-left:auto;
}

其结果如下:


以上是通过子项身来决定它们的放置方式。除了display: flex; 最初我们没有必要预先定义任何其他内容。

这是FlexboxGrid之间差异的核心,Grid不是为了创建一维标题而构建的,下面我们通过Grid创建一维标题布局,来看看他们之间的差异

2.Grid 实现标题布局

下面定义网格有十列,每列为一个单位宽

header {
    display:grid;
    grid-template-columns:repeat(10,1fr);
}

效果看起来与Flexbox解决方案完全相同


但是,审查元素你会看到,内容被分成了十列:

这种方法的主要区别在于我们必须首先定义列和列的宽度,然后将内容放在可用的网格单元格中 为了将LOGOUT按钮移动到最右侧,我们将其放在第十列,如下所示:

header> div:nth-​​child(3){
    grid-column:10;
}

以下是我们审查元素的外观:


我们不能简单地给它一个,margin-left: auto;因为LOGOUT已经被放置在布局的特定单元格中,在第三列中。要移动它,我们必须为它找到另一个网格单元。

3.将两者结合起来

现在让我们看看如何组合使用它们,将我标题合并到页面布局中。我们将从构建网页布局开始



HTML:

<div class =“container”>
  <header> HEADER </header>
  <aside> MENU </aside>
  <main> CONTENT </main>
  <footer> FOOTER </footer>
</div>

CSS:

.container {
    display:grid;
    grid-template-columns:repeat(12,1fr);
    grid-template-rows:50px 350px 50px;
}

我们将这些div放到Grid布局中,如下所示:

header {
    grid-column:span 12;
}
aside {
    grid-column:span 2;
}
main {
    grid-column:span 10;
}
footer {
    grid-column:span 12;
}

现在我只需添加标题。首先将'header' 转换为Flexbox容器

header {
    display:flex;
}

然后将LOGOUT按钮移动到最右侧:

header> div:nth-​​child(3){
    margin-left:auto;
}

以上我们有了一个完美的布局,使用GridFlexbox组合完成,以下是两个容器的外观:


所以现在应该对Flexbox和Grid应用场景有了很好的理解,就可以结合使用它们完成布局

五、浏览器兼容性

1.Grid

Desktop

Mobile/Tablet

2.Flexbox

  • new: 现在的最新版
  • tweener: 2011过度版本
  • old: 2009版本

混合三个版本使用可以兼容到:

  • Chrome any
  • Firefox any
  • Safari any
  • Opera 12.1+
  • IE 10+
  • iOS any
  • Android any

多说两句

在条件允许的情况下,推荐大家使用grid布局,相信在不久的以后grid布局会得到很好的广泛使用, 使用grid可以创建很多好玩的布局 demo1 demo2 demo3


更多好玩的例子大家可以查看

Grid by Example - Usage examples of CSS Grid Layoutgridbyexample.com

推荐大家几个grid布局库

adazzle/react-data-gridgithub.com图标STRML/react-grid-layoutgithub.com图标

参考文章

A Complete Guide to Grid | CSS-Trickscss-tricks.com图标A Complete Guide to Flexbox | CSS-Trickscss-tricks.com图标The ultimate CSS battle: Grid vs Flexboxhackernoon.com

编辑于 2018-10-15

文章被以下专栏收录