传统的网页布局方式,采用
+
- display
+
- position
的方式来实现。这种方式,无法实现一些复杂的布局,并且在实现某些布局时,会有一些局限性。
- float
比如,最常见的多列布局,我们一般是通过
来实现的。这种方式并不是标准,
- float
属性一开始是用来实现文字环绕图片的效果,后来人们发现这货比
- float
之类的属性好用,便用它来实现多列布局。
- display: inline
再如,垂直居中的实现,也是各种奇淫技巧,并没有标准的实现方式。
即使是最简单的水平居中,也经常通过
来实现的。虽然居中的功能是实现了,但从语义方面来说,这种写法也不是很规范。
- margin: 0 auto
当然,并不是说,非标准的就是不好。但是非标准的方式,对新手来说,往往学习成本比较高,并且还有各种副作用。比如用
实现布局需要我们手动清除浮动,而清除浮动的方式也是各种奇淫技巧。
- float
本文介绍的 Flex 布局,能为我们解决这些问题。
这篇文章主要介绍 Flex 相关的概念和每一个属性的用法。
Flex 布局是 Flexible Box 的缩写,也叫做弹性布局。我们可以通过下面的方式来实现 Flex 布局。
- .box {
- display: -webkit - flex;
- display: flex;
- }
设置了
的元素,其子元素 的
- display: flex
、
- float
和
- clear
属性将会失效。
- vertical-align
在学习 Flex 的用法之前,我们先来学习 Flex 的基本概念。
的元素称为 Flex 容器(flex container)、其子元素称为 Flex 项(flex item)。
- display: flex
Flex 容器支持以下六个属性:
属性用来设置主轴的方向。它有以下四个值。
- flex-direction
(默认值):水平向右为主轴方向。
- row
:水平向左为主轴方向。
- row-reverse
:垂直向下为主轴方向。
- column
:垂直向上为主轴方向。
- colunm-reverse
主轴和交叉轴是相互垂直的,也就是说,如果设置了主轴的方向为垂直方向,那么交叉轴的方向就是水平方向。
属性用来设置 Flex 项的换行方式。它有以下三个值。
- flex-wrap
(默认值):不换行。
- nowrap
:换行。
- wrap
:换行,先排最后一行。
- wrap-reverse
属性是
- flex-flow
与
- flex-direction
的缩写。默认值
- flex-wrap
。
- row nowrap
- flex - flow: flex - direction flex - wrap;
属性用来设置 Flex 项在主轴上的排列方式。它有以下五个值。
- justify-content
(默认值):从 main start 开始排列。
- flex-start
:从 main end 开始排列。
- flex-end
:在主轴上居中。
- center
:两端对齐。Flex 项之间的距离相等。
- space-between
:每一个 Flex 项左右的距离相等。两项之间的距离是旁边的距离的两倍。
- space-around
属性用来设置 Flex 项在交叉轴上的对齐方式。它有以下五个值。
- align-items
:交叉轴的起始位置(cross start)对齐。
- flex-start
:交叉轴的结束位置(cross end)对齐。
- flex-end
:交叉轴的中点对齐。
- center
: Flex 项的第一行文字的基线对齐。
- baseline
(默认值):Flex 项目将占满整个 Flex 容器的高度。但是如果 Flex 项设置了高度,该属性不起作用。
- stretch
属性用来设置交叉轴上多行对齐方式,类似于
- align-content
。这个属性只有在交叉轴上的行数大于一时才起作用。它有以下六个属性。
- justity-content
(默认值):多行占满整个轴线。
- stretch
注意:如果 Flex 设置了高度,这个属性不起作用。
:与交叉轴的起始位置对齐。
- flex-start
:与交叉轴的结束位置对齐。
- flex-end
:与交叉轴的中点位置对齐。
- center
:在交叉轴上两端对齐,每行之间的距离相等。
- space-between
:每行的上下距离相等。两行之间的间距是最上面和最下面的间距的两倍。
- space-around
Flex 项支持以下属性:
属性用来设置 Flex 项的顺序。默认为
- order
。数值越小,Flex 项越排在前面。
- 0
- .item:nth-child(1){
- order: 3;
- }
- .item:nth-child(2){
- order: 2;
- }
- .item:nth-child(3){
- order: 1;
- }
属性用来设置 Flex 项的宽度,用法与
- flex-basis
一样。可以当做是
- width
的别名。默认值为
- width
。如果元素同时设置了
- auto
属性和
- flex-basis
属性,
- width
属性会覆盖
- flex-basis
属性,即
- width
属性不会起作用。
- width
如果是 Flex 项,建议使用
而不是
- flex-basis
,这样比较符合规范。
- width
属性用来设置,当 Flex 容器的宽度大于所有 Flex 项目的宽度的总和时,剩下的空间如何分配给子元素。若 Flex 容器的宽度小于或等于所有 Flex 项目宽度的总和,即没有剩余空间,该属性不会起作用。
- flex-grow
对于
大于 1 的 Flex 项,会按照
- flew-grow
的值的比例分配剩余的空间。比例越大,分配的就越大。
- flew-grow
值为 2 的 Flex 项分配到的宽度是
- flew-grow
值为 1 的两倍。
- flew-grow
默认值是
,即按原先的大小显示,不需要分配额外的宽度。
- 0
举个例子,Flex 容器中共有三个 Flex 项,他们
的值分别为 0、2、3。则第二个 Flex 项目的最终宽度为:原先的宽度 + 剩余的宽度 * 2 / (2 + 3)。
- flew-grow
属性用来设置,当 Flex 容器的宽度小于所有 Flex 项目宽度的总和,即空间不足时,Flex 项如何缩小宽度。只有空间不足时,该属性才会起作用。
- flex-shrink
值越大,减小的就越大。值为 0,表示不减小。默认值为
。
- 1
关于减小后的宽度的计算还是有点麻烦的,鉴于篇幅有限,不再此说明。
属性是
- flex
、
- flex-grow
和
- flex-shrink
的缩写。默认值为
- flex-basis
。
- 1 1 auto
- flex: flex - grow flex - shrink flex - basis;
Flex 容器的
属性会作用于所有 Flex 项,如果你希望某个 Flex 项不遵循
- align-items
属性设置的值,可以用
- align-items
属性覆盖。用法与
- align-self
一致。
- align-items
Flex 布局会是未来布局的首选,尽管在兼容性方面还是有点不足。你可以根据下面的脑图,回顾一下这篇文章讲解过的知识。
下一篇文章,会讲解如何用 Flex 实现常见的布局。
来源: http://www.cnblogs.com/smallchen/p/flex.html