开始使用Flexbox的理由

1。它在所有主流浏览器的支持

我没有使用flexbox的主要原因是由于缺乏浏览器支持。但事实上,flexbox很好支持,全球95.89%的支持。如果你无视IE 10和下面,微软说,你现在可以吗,这个数字甚至更高。

Flexbox甚至更多的支持比其他功能我仍然使用等 2D transforms(91.85%)甚至位置:固定(92.98%).

2。你不需要担心语法

尽管当前的语法flexbox支持所有浏览器的当前版本,旧版本呢?因为语法改变了多年来,有一些不一致怎么写它。支持所有浏览器的最后2版本目前,我们必须写至少4版本的每一条规则使用不同的前缀。

解决这个我已经选定了只使用autoprefixer。跟踪的前缀,我们需要用什么不一定是最好的利用我们的时间和精力,所以我们可以而且应该自动化。

使用autoprefixer,我们可以指定哪个浏览器版本支持,和正确的前缀将自动添加。

/* Write this */
.flex-container {
  display: flex;
}

/* Compiles to this (with autoprefixer set to support last 2 versions of all browsers) */
.flex-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

3所示。它可以是简单的开始

诚然,学习所有的flexbox并不是那么简单。有12个新属性,平均每4潜在的价值。它可以是一个压倒性的直接与一切。

但你不必开始一切。在许多情况下,我发现自己仅需要使用3——属性

• display——这组元素内联或块flexbox容器元素
• justify-content这个控制项的水平对齐在flex容器(如果flex-direction行或row-reverse的默认值)
• align-items这个控制项的垂直对齐在flex容器(如果flex-direction行或row-reverse的默认值)

单独使用这些属性,应用于flex容器,我们可以生产很多不同的布局。当你准备了解更多,有一个丰富的资源/ /练习帮助你学习-备忘单

• Flexbox操场——活文档你可以尝试测试每一对属性的影响
• 一个完整的Flexbox指南(CSS技巧)——所有flexbox的概述
• Flexbox不好的——学习CSS flexbox的游戏
• Flexbugs——community-curated flexbox列表问题和跨浏览器的解决方案
• 灵活性——polyfill支持遗留的浏览器

4所示。你终于可以中心元素

除了支持flexbox,使用它的理由是缓解我们可以中心元素,从水平和垂直方向上。

只有3个声明,我们可以实现完全集中的子元素

.flex-container {
  display: flex;
  justify-content: center; /* horizontal centering */
  align-items: center; /* vertical centering */
  border: 2px dashed #000;
}

5。你很容易操纵行内元素

一个问题有内联项目定位在彼此的身边臭名昭著的额外4 px利润。虽然有很多方法来解决这个问题,像浮动的元素,也有自己的问题。

flexbox,我们可以轻松处理内联元素。我们可以调整元素的边缘

.flex-container { display: flex; }
.flex-item { width: 20%; }

我们可以有空间均匀分布——两岸的物品

.flex-container {
  display: flex;
  justify-content: space-around;
}

我们甚至可以只之间的空间均匀分布中间物品,没有处理 :first-child或 :last-child– – – – – –

.flex-container {
  display: flex;
  justify-content: space-between;
}

6。它简化了复杂

flexbox首先成立的原因是出于这个原因,让我们实现我们已经创建复杂的布局,在一个声明。

在前面的例子中,我能够做些什么样式的flex容器。然而,我们能实现更精确的造型通过瞄准flex项目。例如,一个常见的布局这是——定价表

有三个div,中间一个是别人的宽度的两倍。为此使用flexbox布局,我们可以写。

.flex-container {
  display: flex;
  align-items: center;
}

.flex-items:not(:nth-child(2)) {
  flex-grow: 1;
  height: 300px;
}

.flex-items:nth-child(2) {
  flex-grow: 2;
  height: 350px;
}

转载请注明：TUTERM.COM » 开始使用Flexbox的理由