最新消息:前端博客、web前端博客、Angularjs、javascript、jQuery、HTML5、CSS3

开始使用Flexbox的理由

CSS&HTML AZ 1039浏览 0评论

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

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

20160512160100

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

2。你不需要担心语法

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

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

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

CSS
/* 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容器,我们可以生产很多不同的布局。当你准备了解更多,有一个丰富的资源/ /练习帮助你学习-备忘单

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

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

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

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

center

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

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

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

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

edge-to-edge

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

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

space-around

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

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

space-between

6。它简化了复杂

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

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

pricing

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

CSS
.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的理由

如果您觉得本文的内容对您的学习有所帮助,您可以支付宝(左)或微信(右):
alipay weichat

您必须 登录 才能发表评论!