`

深入了解 Flexbox 伸缩盒模型(转)

    博客分类:
  • css
 
阅读更多

原文地址:http://www.w3cplus.com/blog/666.html

介绍

Flexbox(伸缩布局盒) 是 CSS3 中一个新的布局模式,为了现代网络中更为复杂的网页需求而设计。本文将介绍 Flexbox 语法的技术细节。浏览器的支持越来越快,所以当 Flexbox 被广泛支持并应用时你将会快人一步。如果你想知道它是什么并是如何工作的,不妨仔细了解下吧!

 

 

规范状态和浏览器支持情况

Flexbox 规范的相关工作已经进展了3年。不同的浏览器也实现了不同的实验版本。在2012年9月,Flexbox 语法的第三个主要修订版本进入到候选推荐阶段。这意味着 W3C 认为当前的语法是稳定的,并鼓励浏览器开发商去实现它。

Flexbox 规范时间表:

  • 2009年7月 工作草案 (display: box;)
  • 2011年3月 工作草案 (display: flexbox;)
  • 2011年11月 工作草案 (display: flexbox;)
  • 2012年3月 工作草案 (display: flexbox;)
  • 2012年6月 工作草案 (display: flex;)
  • 2012年9月 候选推荐 (display: flex;)

Flexbox 已经被浏览器快速支持。Chrome 22+, Opera 12.1+, 和 Opera Mobile 12.1+ 已经支持了本文中所描述的 Flexbox。Firefox 18 和 Blackberry 10 也很快就会实现。我推荐大家使用已经支持的浏览器来阅读本文和查看例子。

概念和术语

虽然现在我们可以使用 Flexbox 轻松创建布局,而不会像以前那样难以理解,但我们仍然需要花一些时间去熟悉到底如何使用 Flexbox。新的术语和概念可能会是我们使用 Flexbox 时的一个障碍,所以让我们先来了解以下它们。

Flexbox 由 伸缩容器 和 伸缩项目 组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素,而设置为 inline-flex 的容器则渲染为一个行内元素。

这里的示例创建了一个伸缩容器。

 

1 2 3 4
.flex-container {
display: -webkit-flex;
display: flex;
}

 

本文中所有的示例都会带有相应的浏览器厂商前缀。

伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说,Flexbox 定义了伸缩容器内伸缩项目该如何布局。

Flex Lines 伸缩行

伸缩项目沿着伸缩容器内的一个 伸缩行 定位。通常每个伸缩容器只有一个伸缩行。

这个示例展示了2个项目在默认情况下的定位:沿着一个水平伸缩行从左至右显示。

<iframe style="box-sizing: inherit; width: 929px; height: 300px;" src="http://jsfiddle.net/gsmith/wcXRk/5/embedded/result,html,css/" frameborder="0"></iframe>

Writing Modes 书写模式

在你设计 Flexbox 时的有一个重要的部分是更改伸缩行的方向。默认情况下,伸缩行和文本方向一致:从左至右,从上往下。

这是 W3C 关于一个名为书写模式的新特性工作草稿。书写模式是一个新的方法,让你可以从右往左写,甚至竖着写,就像你知道的某些语言一样。

书写模式是一个正在进行的计划,但是 Chrome 已经率先支持了 direction CSS 属性。如果我们在上一个例子中设置方向为rtl (从右往左) 那么不仅仅文字会从右往左书写,而且 伸缩行也改变了方向,并更改了页面的布局。

<iframe style="box-sizing: inherit; width: 929px; height: 300px;" src="http://jsfiddle.net/gsmith/cNuzn/3/embedded/result,html,css/" frameborder="0"></iframe>

这也许就是 Flexbox 为什么如此抽象难懂的地方。当你正在制作一个语言不确定的页面时你不能简单的只是说“上”、“下”、“左”、“右”。

The Main Axis and the Cross Axis 主轴和侧轴

为了描述抽象的书写模式,Flexbox 使用 主轴 和 侧轴的概念。伸缩行跟随主轴。侧轴则垂直于主轴。

起点、终点和各轴的方向的名称如下:

  • 主轴起点 Main Start
  • 主轴终点 Main End
  • 主轴方向 Main Direction (有时候也成为伸缩流方向 Flow Direction)
  • 侧轴起点 Cross Start
  • 侧轴终点 Cross End
  • 侧轴方向 Cross Direction

在继续了解之前明白主轴和侧轴是至关重要的。Flexbox 中的一切都和这些轴有关。在我们所有的例子中,书写模式都是从左至右,从上到下,但是你需要记住并不是所有的 Flexbox 都是这样的。

伸缩容器的属性

flex-direction 伸缩流的方向

flex-direction 允许你更改伸缩容器的主轴方向。flex-direction 的默认值是 row。该值表示伸缩项目根据书写模式的方向布局。再次提醒,默认是从左至右,从上到下。其他的值如下:

  • row-reverse: 主轴起点和主轴终点交换。如果书写模式是从左至右,伸缩项目则是从右往左显示。
  • column: 主轴和侧轴交换。如果书写系统是垂直的,那么伸缩项目也是垂直显示的。
  • column-reverse: 和 column 一样,但是方向相反。

让我们把前一个示例中的 flex-direction 改为 column

<iframe style="box-sizing: inherit; width: 929px; height: 300px;" src="http://jsfiddle.net/gsmith/ZvBre/3/embedded/result,html,css/" frameborder="0"></iframe>

现在我们的伸缩项目就是垂直显示的了。

justify-content 主轴对齐

伸缩容器的 justify-content 属性用于调整主轴上伸缩项目的位置。可能的值为:

  • flex-start (默认)
  • flex-end
  • center
  • space-between
  • space-around

这里我们设置 justify-content 为 center 让伸缩项目在主轴上居中对齐:

<iframe style="box-sizing: inherit; width: 929px; height: 300px;" src="http://jsfiddle.net/gsmith/x9Pa8/4/embedded/result,html,css/" frameborder="0"></iframe>

flex-startflex-end, 和 center 一看就懂。space-between 和 space-around 则是分配伸缩项目之间空白空间的不同方法。这张规范中的图示很好的解释了一切:

align-items 侧轴对齐

align-items 是一个和 justify-content 相呼应的属性。align-items 调整伸缩项目在侧轴上的定位方式。可能的值有:

  • flex-start (默认)
  • flex-end
  • center
  • baseline
  • stretch

这里我们设置 align-items 为 center 让伸缩项目在侧轴上居中对齐:

<iframe style="box-sizing: inherit; width: 929px; height: 300px;" src="http://jsfiddle.net/gsmith/dFz5U/2/embedded/result,html,css/" frameborder="0"></iframe>

和之前一样,flex-startflex-end, 和 center 的意义显而易见。stretch 也很简单:它会将伸缩项目从侧轴起点拉伸到侧轴终点。baseline 则是让伸缩项目与它们的基线对齐。基线根据伸缩项目的内容计算得到。下面这张来自W3C标准的图例很好的解释了这些属性:

flex-wrap 伸缩行换行

目前为止,每个伸缩容器都有且只有一个伸缩行。使用 flex-wrap 你可以为伸缩容器创建多个伸缩行。这个属性接受以下值:

  • nowrap (默认)
  • wrap
  • wrap-reverse

如果 flex-wrap 设置为 wrap,在一个伸缩行容不下所有伸缩项目时,伸缩项目会换行到一条新增的伸缩行上。新增的伸缩行根据侧轴的方向添加。

我们使用 flex-wrap 来看个例子:

<iframe style="box-sizing: inherit; width: 929px; height: 300px;" src="http://jsfiddle.net/gsmith/VAuXx/5/embedded/result,html,css/" frameborder="0"></iframe>

wrap-reverse 和 wrap 一样,只是新的伸缩行会被添加到侧轴的反方向上。

align-content 堆栈伸缩行

align-content 会更改 flex-wrap 的行为。它和 align-items 相似,但是不是对齐伸缩项目,它对齐的是伸缩行。可能你已经想到了,它接受的值也很相似:

  • stretch (默认)
  • flex-start
  • flex-end
  • center
  • space-between
  • space-around

这些值与 justify-content 和 align-items 中的值一样。

在这个例子中,我们设置 align-content 为 center

<iframe style="box-sizing: inherit; width: 929px; height: 300px;" src="http://jsfiddle.net/gsmith/MuYZ3/3/embedded/result,html,css/" frameborder="0"></iframe>

flex-flow 伸缩方向与换行

flex-flow 是 flex-direction 和 flex-wrap 的缩写。

flex-flow: [flex-direction] [flex-wrap]

举个例子:

 

1 2 3 4
.flex-container {
-webkit-flex-flow: column nowrap;
flex-flow: column nowrap;
}

 

伸缩项目的属性

一个伸缩项目是一个伸缩容器的子元素。伸缩容器中的文本也被视为一个伸缩项目。

伸缩项目中内容与普通流一样。举例来说,当一个伸缩项目被设置为浮动,你依然可以在这个伸缩项目中放置一个浮动元素。

伸缩项目都有一个 主轴长度(Main Size) 和一个 侧轴长度(Cross Size)。主轴长度是伸缩项目在主轴上的尺寸。侧轴长度是伸缩项目在侧轴上的尺寸。或者说,一个伸缩项目的宽或高取决于伸缩容器的轴,可能就是它的主轴长度或侧轴长度。

下面的属性可以调整伸缩项目的行为:

order 显示顺序

order 是最简单明了的属性。设置伸缩项目的 order 可以调整它们渲染时的顺序。在这个例子中,我们设置其中一个伸缩项目的order 为 -1,于是它被提前到了其他伸缩项目的最前面。

<iframe style="box-sizing: inherit; width: 929px; height: 300px;" src="http://jsfiddle.net/gsmith/zpdLD/4/embedded/result,html,css/" frameborder="0"></iframe>

如果需要文档顺序和显示顺序不同时,这就是个很有用的功能了。

margin 外边距

你应该对 margin: auto; 的这种用法很熟悉。在伸缩盒中,它也能做同样的事情,但是更加强大。一个 "auto" 的 margin 会合并剩余的空间。它可以用来把伸缩项目挤到其他位置。

这里我们在第一个伸缩项目上声明了 margin-right: auto;,导致了所有的剩余空间被合并到那个元素的右边去了:

<iframe style="box-sizing: inherit; width: 929px; height: 300px;" src="http://jsfiddle.net/gsmith/sQAFY/2/embedded/result,html,css/" frameborder="0"></iframe>

这里我们使用 margin: auto; 来重现经典CSS布局中的圣杯:真·垂直居中:

<iframe style="box-sizing: inherit; width: 929px; height: 300px;" src="http://jsfiddle.net/gsmith/vTCk3/2/embedded/result,html,css/" frameborder="0"></iframe>

align-self 侧轴对齐

伸缩项目的 align-self 属性会覆盖该项目的伸缩容器的 align-items 属性。它的值和 align-items 一样:

  • stretch (默认)
  • flex-start
  • flex-end
  • center
  • baseline

在这个例子中我们为每个伸缩项目应用了不同的 align-self 值:

<iframe style="box-sizing: inherit; width: 929px; height: 300px;" src="http://jsfiddle.net/gsmith/REtEG/2/embedded/result,html,css/" frameborder="0"></iframe>

我在例子中包含了2个基线对齐的伸缩项目,因为它们的对齐需要互相作用。

flex 伸缩性

现在我们终于要开始设置伸缩盒的伸缩性了。flex 指定了一个伸缩项目该如何分配主轴上的剩余空间。

让我们一次把所有的常见值都看一遍吧。

flex: [number]

这个语法指定了一个数字,代表了这个伸缩项目该占用的剩余空间比例。

在这个例子中,第一个伸缩项目占用了 2/4 的剩余空间,而另外两个各占用了 1/4 的剩余空间。

<iframe style="box-sizing: inherit; width: 929px; height: 300px;" src="http://jsfiddle.net/gsmith/s3jtA/3/embedded/result,html,css/" frameborder="0"></iframe>

如果把每个伸缩项目都设置为 1 的话,那么剩余空间就会被平均分配了。

<iframe style="box-sizing: inherit; width: 929px; height: 300px;" src="http://jsfiddle.net/gsmith/BYqUV/3/embedded/result,html,css/" frameborder="0"></iframe>

flex: initial

一个 flex 属性值被设为 initial 的伸缩项目,在有剩余空间的情况下不会有任何变化,但是在必要的情况下会被收缩。

flex: auto

一个 flex 属性值被设为 auto 的伸缩项目,会根据主轴自动伸缩以占用所有剩余空间。

auto 目前仅在 Opera 12.11 尚有效,在 Chrome 23.0.1271.95 上无效。你可以通过使用 flex: 1; 来达到一样的效果。

flex: none

一个 flex 属性值被设为 none 的伸缩项目,在任何情况都不会发生伸缩。

flex 缩写

flex 也可以把 flex-growflex-shrink, 和 flex-basis 这3个缩写为1个声明:

flex: [flex-grow] [flex-shrink] [flex-basis]

大多数情况下没必要使用这种语法。另外,它需要一个更容易理解的伸缩算法。如果你觉得自己挺厉害的,到规范里看一下吧

当然你也可以将 flex-growflex-shrink, 和 flex-basis 作为单个属性分开来设置。但我强烈反对这种方式:当使用flex 缩写时,即使没有某些值没有设置也能获得更合理的默认值。

visibility 叠加项目

当该值生效时,应用 visibility: collapse; 和 visibility: hidden; 与 display: none; 的效果是不一样的。如果是 collapse,该元素会影响伸缩容器的侧轴长度,但不会被现实或占用主轴的空间。如果你想动态添加或移除伸缩项目又不会影响伸缩容器的侧轴长度,这将会非常有用。

目前为止,visibility: collapse; 还没有被让任何浏览器正确的实现。现在 visibility: collapse; 还和visibility: hidden; 实现着一样的效果。我希望能尽快得到改观。

你可以在 这里 看到 collapse 应该是如何工作的。

总结

如你所见,伸缩布局盒(Flexbox) 是一个强大的新型布局模式,将会给网站带来革命性的布局方法,但它也需要一种全新的思考方式。希望这篇文章能为你使用伸缩布局盒构建网站带来帮助。我不知道你怎么想,但是在我看来未来是美好的

 

FlexBox 资料:

http://caibaojian.com/flexbox-guide.html

分享到:
评论

相关推荐

    一张图了解flexbox布局.pdf

    一张图了解flexbox布局

    详解CSS3伸缩布局盒模型Flex布局

    CSS3引入了一种新的布局模式——Flexbox布局,即伸缩盒模型布局(Flexible Box)模型。用来提供一个更加有效的方式制定、调整和分布一个容器里的项目布局,即使它们的大小是未知或者动态的,这里简称Flex。 CSS3引入...

    14-弹性盒导航.html

    它是**&lt;span&gt;css3**引入的一种新的布局模式——**&lt;span&gt;flexbox**布局,即伸缩布局盒模型,用来提供一个更有效的方式制定、调整和分布一个容器里的项目布局。相比之前的布局方式,更便利于开发。 2)主要思想是让...

    flexbox实例

    flexbox实例、

    Flexbox介绍

    非常棒的Flexbox介绍非常棒的Flexbox介绍非常棒的Flexbox介绍非常棒的Flexbox介绍非常棒的Flexbox介绍

    jQuery插件flexbox的应用程序

    jQuery插件flexbox的应用程序jQuery插件flexbox的应用程序jQuery插件flexbox的应用程序jQuery插件flexbox的应用程序jQuery插件flexbox的应用程序

    css3弹性盒模型(Flexbox)详细介绍

    今天刚学了css3的弹性盒模型,这是一个可以让你告别浮动、完美实现垂直水平居中的新特性。本文主要是总结一下今天所学,有需要的朋友可以参考下

    jquery flexbox 下拉框插件

    jquery flexbox 下拉框插件 里面有demo

    ragrid轻松实现flexbox网格

    ragrid 轻松实现flexbox网格

    微信小程序页面布局方式flexbox -温故而知新

    微信小程序使用flexbox容器,flexbox布局由伸缩容器和伸缩项目组成。任何一个元素都可以指定为flexbox布局,其中设为display:flex或者display:inline-flex的元素称为伸缩容器。伸缩容器的子元素称为伸缩项目,伸缩...

    弹性盒模型_百度周边.rar

    CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行...

    jQuery插件flexBox的应用Ⅱ

    jQuery插件flexBox的应用ⅡjQuery插件flexBox的应用ⅡjQuery插件flexBox的应用ⅡjQuery插件flexBox的应用ⅡjQuery插件flexBox的应用ⅡjQuery插件flexBox的应用Ⅱ

    基于Flexbox的现代CSS框架

    基于Flexbox的现代CSS框架

    Flexbox.in.CSS.2017.5.pdf

    Layout designers rejoice: now you can greatly simplify the task of laying out your web page or application with Flexbox, the CSS Flexible Box Module. In this concise guide, author Estelle Weyl shows ...

    Flexbox in CSS azw3

    Flexbox in CSS 英文azw3 本资源转载自网络,如有侵权,请联系上传者或csdn删除 本资源转载自网络,如有侵权,请联系上传者或csdn删除

    React Native 布局之FlexBox

    Flexbox模块提供了一个有效的布局方式,即使不知道视窗大小或者未知元素情况之下都可以智能的,灵活的调整和分配元素和空间两者之关的关系。简单的理解,就是可以自动调整,计算元素在容器空间中的大小。

    Flexbox in CSS Understanding CSS Flexible Box Layout azw3

    Flexbox in CSS Understanding CSS Flexible Box Layout 英文azw3 本资源转载自网络,如有侵权,请联系上传者或csdn删除 本资源转载自网络,如有侵权,请联系上传者或csdn删除

    深入剖析CSS弹性盒模型flex

    flex是flexible box的缩写,一般称之为弹性盒模型。和CSS3其他属性不一样,flexbox并不是一个属性,而是一个模块,包括多个CSS3属性。flex布局提供一种更加有效的方式来进行容器内的项目布局,以适应各种类型的显示...

    Flexbox30:30天学习30个代码花絮,了解Flexbox:sparkles:

    Flexbox30:30天学习30个代码花絮,了解Flexbox:sparkles:

Global site tag (gtag.js) - Google Analytics