CSS3的出现,让很多以前需要js或者复杂的css代码才能解决的问题变得简单起来。随着现在移动智能设备的越发普及,响应式的页面逐渐变得流行,这类界面会根据浏览器的宽度来做出调整,让自身在当前浏览器上显示良好。从前,若要实现这样的页面,是需要将元素的宽度,长度,外边距等设置为百分数。而现在,CSS3提出了一种更为简便的方法,让我们来完成响应式布局。这种方法就是弹性布局方式,该方法让我们不需要对网页的元素进行具体的布局实现,而只需要说明这些元素应该怎么样摆放。打个比方来说,若要让我们实现一个响应式布局,我们不采用CSS3的一些属性的时候,就需要计算每个元素的应占据多大的空间,该空间所占的百分比是多少,每个元素与其他元素的间隔是多少,而间隔所占的百分比又是多少,计算得头都大了还容易出问题。但若我们使用CSS3的弹性布局,那么这个问题就会迎刃而解啦,我们只需要设置这些元素的对齐方式(向左向右分散等),而不需要具体设置它们之间的间隔等,浏览器会根据我们的要求自动实现这些元素所占空间的分配,是不是很简单呀!
要想深入了解弹性布局,首先需要明确几个概念,接下来上图来帮助我们理解:
1 弹性容器和条目:
在构建弹性布局时,我们首先得设置一个弹性容器,它是一个display值为flex或者line-flex的DOM元素。在这个弹性容器中,1,2就是我们需要摆放的元素,它们被叫做条目。
2 主轴和交叉轴:
现在我们来仔细观察这个弹性容器,可以看见它有两个相互垂直的轴,分别叫做主轴和交叉轴。那么这两个轴的位置是否是固定的呢?其实不然,这个我们可以通过CSS3的属性来进行设置,只要我们愿意,可以随意设置垂直的那条为主轴,那么这时水平的就是交叉轴了。也就说,这两条轴并不是一定的,它们到底是主轴还是交叉轴,是通过我们来设置的。这两个轴有什么作用呢?其实它们和弹性容器里的条目布局有关啦!主轴与弹性容器中每一行条目的排列方向有关,交叉轴则与弹性容器中行的排列有关。举个例子,当我们设置主轴为垂直时,弹性容器中的条目就会竖直排列,而当主轴为水平时,条目则会水平排列。
3 具体代码:
说了这么些,弹性布局到底该怎么实现呢?那就写个代码试试吧。
这是我们页面的基本布局
<div class="box"> <div></div> <div></div> <div></div> </div>
很简单的布局,就是一个类名为box的div有三个子元素。下面我们就开始对他们应用CSS3的弹性布局方式,首先,需要我们来创建一个弹性容器,在这里我们就让类名为box的父元素来充当那个弹性容器吧
.box{ display: flex; display:-webkit-flex; }
在这里需要注意两点:因为现在的浏览器对CSS3的支持不一致,所以为了能让代码在各个主流浏览器中有效,就需要加上前缀。在这里为简便起见,我只对内核为webkit的浏览器进行了兼容。然后还有一点,那就是不知是属性值flex可以让元素变为弹性容器,还有inline-flex也可以。但是flex和inline-flex又是有差别的,它们的关系同block和inline-block很相似。
现在弹性容器有了,我们就来决定主轴和交叉轴,这决定了我们的条目到底是垂直显示还是水平显示。在这个例子中,我们就让条目们水平显示,所以就有了下面的代码:
.box{ display: flex; display: -webkit-flex; flex-direction:row; }
上面这一小段代码的flex-direction的值就决定了主轴为水平方向的那条轴,所有条目也会按照顺序从左到右的显示。就像下面这样:
若是我们将flex-direction的值设置为column,那么这三个div就会从上到下排列,如下图所示:
另外,不知row和column这两个值,flex-direction还可以设置为row-reverse,column-reverse ,这两个值分别为从右到左和从下到上,就不详述了。
接下来,我们来设置弹性容器内的条目到底是单行显示还是多行显示,这就需要用到flex-wrap了。首先思考一个问题,若我们所有的条目都在一行中显示,但是一行装不下所有的条目,我们需要换行,那该怎么换行呢?
只需要一行代码,flex-wrap:wrap
.box{ display: flex; display: -webkit-flex; flex-direction:row; flex-wrap:wrap; }
这个值可以让一行中放不下的元素自动到下一行。属性flex-wrap还可以取其他另外两个值,分别是nowrap和wrap-reverse,前一个是不换行,后一个第一行在下方,而第一行放不下的元素跑到上面一行去。
在我们的例子中,将flex-wrap设置为wrap,可以看到下图所示的情况:
第一行放不下的div3跑到下一行去了。
明白了换行,我们接下来看看对齐,即弹性容器中条目的对齐方式,CSS3给了我们两个属性来设置对齐方式,一个是justify-content,设置沿着主轴的对齐方式,一个是align-items,设置沿着交叉轴的对齐方式。
justify-content的取值为:flex-start,flex-end,center,space-between,space-around
align-items的取值为:flex-start,flex-end,center,base-line,stretch
先说设置条目沿主轴对齐的justify-content,当主轴为垂直方向时,justify-content就作用在垂直方向上。当主轴为水平方向时,justify-content就作用在水平方向上。所以说,justify-content与flex-directio的值是有关系的。
justify-content可以设置为flex-start,即向主轴的起始位置对齐,flex-end为向主轴的尾巴位置对齐,center为向主轴的中间对齐,space-between为两端对齐,条目之间的间隔相等,space-around为条目两侧的间隔相等。
再说align-items,这个属性可以用于设置条目沿交叉轴的对齐方式,其中flex-start为向交叉轴的起始位置对齐,flex-end为向交叉轴的尾巴位置对齐,center为向交叉轴的中间对齐,base-line为向条目的第一行文字的基线对齐,stretch则是当项目未设置高度或者设置未自动,就会沾满整个容器。
除了这两个属性可以设置对齐方式,还可以使用align-content,与上述两个属性不同的是,它定义了多根轴线的对齐方式,当只有一根轴线时,该属性不起作用。
它的取值可以为flex-start,flex-end,center,space-between,space-around,stretch。含义同上面的两个差不多。