iOS开发之常用技术点

Grid vs Flexbox

2018-10-07  本文已影响44人  胡萝卜樱

首先，读这篇文章前你需要对Flexbox和Grid布局有所了解，如果你还不知道，那么知识点来了 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独占一行向下排列

添加了一些基本样式，与Flexbox或Grid无关

1.Flexbox 实现标题布局

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

header { 
    display：flex; 
}

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

header> div：nth-​​child（3）{ 
    margin-left：auto; 
}

其结果如下：


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

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

Grid 实现标题布局

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

header { 
    display：grid; 
    grid-template-columns：repeat（10,1fr）; 
}

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

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



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

header> div：nth-​​child（3）{ 
    grid-column：10; 
}

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


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

将两者结合起来

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

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; 
}

我们将这些项目放在网格上，如下所示：

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

现在我们只需添加标题。我们将标题 - 我们的CSS网格中的item - 转换为Flexbox容器。

header { 
    display：flex; 
}

现在我们可以将注销按钮设置为右侧：

header> div：nth-​​child（3）{ 
    margin-left：auto; 
}

在那里，我们有一个完美的布局，使用Grid和Flexbox中的最佳。以下是两个容器的外观：

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

五、浏览器兼容性

Grid

Desktop

Mobile/Tablet

Flexbox

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

参考文章
A Complete Guide to Grid
A Complete Guide to Flexbox
The ultimate CSS battle: Grid vs Flexbox

上一篇下一篇

猜你喜欢

热点阅读