http://c7sky.com/dive-into-flexbox.html
介绍
Flexbox(伸缩布局盒) 是 CSS3 中一个新的布局模式,为了现代网络中更为复杂的网页需求而设计。本文将介绍 Flexbox 语法的技术细节。浏览器的支持越来越快,所以当 Flexbox 被广泛支持并应用时你将会快人一步。如果你想知道它是什么并是如何工作的,不妨仔细了解下吧!
为什么需要伸缩布局盒(Flexbox)?
作者长期以来使用表格、浮动、行内块元素和其他 CSS 属性来布局网站内容。然而,这些并不是为复杂的页面和网页应用而设计的。不管是简单的垂直居中,还是灵活的网格布局都很难靠一己之力轻易实现,因此成就了 CSS 网格框架。但是,如果真的需要那么多项目来实现做这些事,为什么不让它来的更简单些呢?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
的容器则渲染为一个行内元素。
这里的示例创建了一个伸缩容器。
本文中所有的示例都会带有相应的浏览器厂商前缀。
伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说,Flexbox 定义了伸缩容器内伸缩项目该如何布局。
Flex Lines 伸缩行
伸缩项目沿着伸缩容器内的一个 伸缩行 定位。通常每个伸缩容器只有一个伸缩行。
这个示例展示了2个项目在默认情况下的定位:沿着一个水平伸缩行从左至右显示。
https://jsfiddle.net/gsmith/wcXRk/5/light/
Writing Modes 书写模式
在你设计 Flexbox 时的有一个重要的部分是更改伸缩行的方向。默认情况下,伸缩行和文本方向一致:从左至右,从上往下。
这是 W3C 关于一个名为书写模式的新特性工作草稿。书写模式是一个新的方法,让你可以从右往左写,甚至竖着写,就像你知道的某些语言一样。
书写模式是一个正在进行的计划,但是 Chrome 已经率先支持了 direction
CSS 属性。如果我们在上一个例子中设置方向为 rtl
(从右往左) 那么不仅仅文字会从右往左书写,而且 伸缩行也改变了方向,并更改了页面的布局。
<iframe style="border-width: 0px; max-width: 100%; width: 660px; 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
。
https://jsfiddle.net/gsmith/ZvBre/3/light/
现在我们的伸缩项目就是垂直显示的了。
justify-content 主轴对齐
伸缩容器的 justify-content
属性用于调整主轴上伸缩项目的位置。可能的值为:
- flex-start (默认)
- flex-end
- center
- space-between
- space-around
这里我们设置 justify-content
为 center
让伸缩项目在主轴上居中对齐:
https://jsfiddle.net/gsmith/x9Pa8/4/light/
flex-start
, flex-end
, 和 center
一看就懂。space-between
和 space-around
则是分配伸缩项目之间空白空间的不同方法。这张规范中的图示很好的解释了一切:
align-items 侧轴对齐
align-items
是一个和 justify-content
相呼应的属性。align-items
调整伸缩项目在侧轴上的定位方式。可能的值有:
- flex-start (默认)
- flex-end
- center
- baseline
- stretch
这里我们设置 align-items
为 center
让伸缩项目在侧轴上居中对齐:
https://jsfiddle.net/gsmith/dFz5U/2/light/
和之前一样,flex-start
, flex-end
, 和 center
的意义显而易见。stretch
也很简单:它会将伸缩项目从侧轴起点拉伸到侧轴终点。baseline
则是让伸缩项目与它们的基线对齐。基线根据伸缩项目的内容计算得到。下面这张来自W3C标准的图例很好的解释了这些属性:
flex-wrap 伸缩行换行
目前为止,每个伸缩容器都有且只有一个伸缩行。使用 flex-wrap
你可以为伸缩容器创建多个伸缩行。这个属性接受以下值:
- nowrap (默认)
- wrap
- wrap-reverse
如果 flex-wrap
设置为 wrap
,在一个伸缩行容不下所有伸缩项目时,伸缩项目会换行到一条新增的伸缩行上。新增的伸缩行根据侧轴的方向添加。
我们使用 flex-wrap
来看个例子:
https://jsfiddle.net/gsmith/VAuXx/5/light/
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
:
https://jsfiddle.net/gsmith/MuYZ3/3/light/
flex-flow 伸缩方向与换行
flex-flow
是 flex-direction
和 flex-wrap
的缩写。
flex-flow: [flex-direction] [flex-wrap]
举个例子:
.flex-container { -webkit-flex-flow: column nowrap; flex-flow: column nowrap; }
伸缩项目的属性
一个伸缩项目是一个伸缩容器的子元素。伸缩容器中的文本也被视为一个伸缩项目。
伸缩项目中内容与普通流一样。举例来说,当一个伸缩项目被设置为浮动,你依然可以在这个伸缩项目中放置一个浮动元素。
伸缩项目都有一个 主轴长度(Main Size) 和一个 侧轴长度(Cross Size)。主轴长度是伸缩项目在主轴上的尺寸。侧轴长度是伸缩项目在侧轴上的尺寸。或者说,一个伸缩项目的宽或高取决于伸缩容器的轴,可能就是它的主轴长度或侧轴长度。
下面的属性可以调整伸缩项目的行为:
order 显示顺序
order
是最简单明了的属性。设置伸缩项目的 order 可以调整它们渲染时的顺序。在这个例子中,我们设置其中一个伸缩项目的 order
为 -1,于是它被提前到了其他伸缩项目的最前面。
https://jsfiddle.net/gsmith/zpdLD/4/light/
如果需要文档顺序和显示顺序不同时,这就是个很有用的功能了。
margin 外边距
你应该对 margin: auto;
的这种用法很熟悉。在伸缩盒中,它也能做同样的事情,但是更加强大。一个 "auto" 的 margin 会合并剩余的空间。它可以用来把伸缩项目挤到其他位置。
这里我们在第一个伸缩项目上声明了 margin-right: auto;
,导致了所有的剩余空间被合并到那个元素的右边去了:
https://jsfiddle.net/gsmith/sQAFY/2/light/
这里我们使用 margin: auto;
来重现经典CSS布局中的圣杯:真·垂直居中:
https://jsfiddle.net/gsmith/vTCk3/2/light/
align-self 侧轴对齐
伸缩项目的 align-self
属性会覆盖该项目的伸缩容器的 align-items
属性。它的值和 align-items
一样:
- stretch (默认)
- flex-start
- flex-end
- center
- baseline
在这个例子中我们为每个伸缩项目应用了不同的 align-self
值:
https://jsfiddle.net/gsmith/REtEG/2/light/
我在例子中包含了2个基线对齐的伸缩项目,因为它们的对齐需要互相作用。
flex 伸缩性
现在我们终于要开始设置伸缩盒的伸缩性了。flex
指定了一个伸缩项目该如何分配主轴上的剩余空间。
让我们一次把所有的常见值都看一遍吧。
flex: [number]
这个语法指定了一个数字,代表了这个伸缩项目该占用的剩余空间比例。
在这个例子中,第一个伸缩项目占用了 2/4 的剩余空间,而另外两个各占用了 1/4 的剩余空间。
<iframe style="border-width: 0px; max-width: 100%; width: 660px; height: 300px;" src="http://jsfiddle.net/gsmith/s3jtA/3/embedded/result,html,css/" frameborder="0"></iframe>
如果把每个伸缩项目都设置为 1 的话,那么剩余空间就会被平均分配了。
https://jsfiddle.net/gsmith/s3jtA/3/light/
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-grow
, flex-shrink
, 和 flex-basis
这3个缩写为1个声明:
flex: [flex-grow] [flex-shrink] [flex-basis]
大多数情况下没必要使用这种语法。另外,它需要一个更容易理解的伸缩算法。如果你觉得自己挺厉害的,到规范里看一下吧。
当然你也可以将 flex-grow
, flex-shrink
, 和 flex-basis
作为单个属性分开来设置。但我强烈反对这种方式:当使用 flex
缩写时,即使没有某些值没有设置也能获得更合理的默认值。
visibility 叠加项目
当该值生效时,应用 visibility: collapse;
和 visibility: hidden;
与 display: none;
的效果是不一样的。如果是 collapse
,该元素会影响伸缩容器的侧轴长度,但不会被现实或占用主轴的空间。如果你想动态添加或移除伸缩项目又不会影响伸缩容器的侧轴长度,这将会非常有用。
目前为止,visibility: collapse;
还没有被让任何浏览器正确的实现。现在 visibility: collapse;
还和 visibility: hidden;
实现着一样的效果。我希望能尽快得到改观。
你可以在 这里 看到 collapse
应该是如何工作的。
总结
如你所见,伸缩布局盒(Flexbox) 是一个强大的新型布局模式,将会给网站带来革命性的布局方法,但它也需要一种全新的思考方式。希望这篇文章能为你使用伸缩布局盒构建网站带来帮助。我不知道你怎么想,但是在我看来未来是美好的。
原文:Dive into Flexbox (http://weblog.bocoup.com/dive-into-flexbox)
参考资料:Css3-flexbox (http://www.w3.org/html/ig/zh/wiki/Css3-flexbox)
原创翻译,转载请注明出处:[译]深入了解 Flexbox 伸缩盒模型
相关推荐
在深入探讨CSS弹性盒模型flex之前,我们首先要了解CSS3引入的这一新的布局模型——flex布局。弹性盒模型(flexbox)被设计来提供一种更加灵活和有效的方式来布局容器内的项目。它的出现旨在简化垂直居中、项目对齐和...
**jQuery Flexbox 下拉框插件** 在网页开发中,下拉框(Dropdown)是一种常见的交互元素,用于在有限的空间...通过深入理解和实践,我们可以利用这个插件创建出符合现代网页设计标准的交互元素,提升网站的用户体验。
通过设置相应的属性,可以轻松地实现如栅格布局、瀑布流布局、弹性盒模型等复杂布局。同时,FlexboxUtils还可能提供了一些预定义的布局模式,可以直接应用于常见场景,减少重复工作。 总的来说,FlexboxUtils是利用...
CSS Flexbox,全称Flexible Box,是CSS3中的一种布局模型,旨在提供更灵活的盒状模型,以适应不同屏幕尺寸和设备的需求。Flexbox允许开发者更方便地处理元素的排列、对齐和分配空间,尤其在响应式设计中表现突出。在...
Flexbox for Android是...通过深入理解和使用Flexbox for Android,开发者可以提升应用的用户体验,实现更流畅、更灵活的界面设计。同时,这也是一种学习Android自定义视图和布局管理器的好方法,有助于提高开发技能。
在移动端页面设计中,弹性盒模型布局(Flexbox Layout)是一种强大的工具,它极大地简化了复杂的多列布局问题。此布局模式允许元素在容器中灵活地调整大小和位置,无论屏幕尺寸如何变化,都能保持良好的视觉效果。在...
这个“弹性盒试验场”旨在帮助开发者深入理解和熟练运用弹性盒模型,以便在实际项目中构建更加高效和适应性强的布局。 在Web开发中,传统的布局方式(如流式布局、网格布局)往往难以处理不同尺寸屏幕和不同设备的...
CSS弹性盒模型(Flexbox)是一种现代的布局模式,它为复杂的网页布局提供了一种更为灵活的方法。在传统的CSS布局中,如浮动和定位,往往难以处理多行或多列的动态内容,而Flexbox则可以轻松实现这些需求。本文将深入...
Swift-FlexBox 的优势在于它的简单性和易用性,使得开发者无需深入理解 CSS FlexBox 的复杂规则,即可快速实现类似的效果。这个框架通常适用于 iOS、macOS、tvOS 和 watchOS 等平台的界面开发。 在 Swift-FlexBox-...
"视频系列中,观众可以深入理解Flexbox的核心概念并学习如何实际应用。 Flexbox的主要特点包括: 1. **容器模型**:Flexbox将元素分为容器(flex container)和子元素(flex items)。容器负责整体布局,子元素则...
HTML5引入了许多新特性,如媒体查询(Media Queries)、Flexbox(弹性盒模型)和Grid布局,这些都极大地推动了可伸缩布局的发展。 媒体查询是CSS3中的一种技术,它允许内容根据设备的特定条件,如视口宽度、设备...
首先,让我们深入了解一下Flexbox布局的核心概念。Flexbox(弹性盒布局)的主要目标是提供一种方式来处理单行或单列容器内的元素布局,无论这些元素的大小如何变化。它特别适用于需要动态调整元素排列方向或元素大小...
在Flexbox布局中,容器(父元素)可以设置为弹性盒模型,这样其子元素就可以根据屏幕尺寸或内容自动调整布局。这种布局模式在处理不确定数量或大小的子元素时非常有用,如导航菜单、网格系统、卡片布局等。 ...
【标题】"flexbox-assignment-Alaalser" 是一个与前端网页布局技术相关的项目,它主要探讨了如何使用Flexbox(弹性盒模型)来构建响应式网页设计。Flexbox是现代网页开发中不可或缺的一部分,它简化了以前在CSS中...
在探讨CSS3弹性伸缩布局(Flexbox布局)之前,需要了解弹性布局模型(Flexible Box)是HTML5中CSS3提供的一种新型布局方式,旨在提供更有效的方式来实现响应式网页设计。Flexbox布局模型的目标是提供一种更加有效的...
流体布局、网格布局和Flexbox弹性盒模型是现代网页布局的主要方法。Flexbox允许元素在一行或一列中灵活伸缩,而Grid布局则提供了二维的定位系统。 五、响应式设计 随着移动设备的普及,响应式设计成为必需。CSS ...
理解盒模型是掌握CSS布局的前提。 1. 盒模型:CSS盒模型分为两种,IE盒模型(content-box)和W3C盒模型(border-box)。默认情况下,大部分浏览器遵循W3C盒模型,其中宽度和高度仅包含内容区域,不包括边框和内边距...
这个工作坊旨在帮助开发者深入理解和熟练运用Flexbox来构建响应式和动态的网页设计。 【描述】提到的“车间柔光箱”是比喻性的表达,暗示通过这个工作坊,参与者将学习如何像专业摄影师调整柔光箱一样,灵活地调整...
- **Flexbox布局取消了传统的盒模型,使得元素可以按需伸缩**。 - **FlexGrow**: 项目可以按照比例扩展,通过`flex-grow`属性设置。 - **FlexShrink**: 当空间不足时,项目可以按比例收缩,通过`flex-shrink`属性...