一、Flex 布局是什么?
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。但在使用时,需要注意以下两点:
1、Webkit内核的浏览器,必须加上-webkit前缀
2、设为Flex布局以后,子元素的float,clear和vertical-align属性将失效
二、基本概念
采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start
,结束位置叫做main end
;交叉轴的开始位置叫做cross start
,结束位置叫做cross end
。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size
,占据的交叉轴空间叫做cross size
。
三、属性
弹性盒布局是CSS 3新增的功能,它具有如下几个配套属性:
- flex-flow:该属性作用于弹性盒容器,用于控制容器内子元素的排列方式和换行方式。该属性是一个复合属性,由flex-direction和flex-wrap。
- flex-direction:指定弹性盒容器内子元素的排列方向。该属性支持如下属性值:
- row:横向从左到右排列
- row-reverse:横向从右到左排列
- column:纵向从上到下排列
- column-reverse:纵向从下到上排列
- flex-wrap:指定弹性盒容器内子元素的换行方式。该属性支持如下属性值:
- nowrap:不换行,是默认值。
- wrap:换行。
- wrap-reverse:反向换行。
- order:该属性作用于弹性盒容器内的子元素,指定子元素的排列顺序
- flex:该属性作用于弹性盒容器内的子元素,用于控制子元素的缩放比例。该属性是一个复合属性,由flex-grow、flex-shrink、flex-basis三个子属性组成。该属性支持如下属性值:
- flex:是一个复合属性。其完整属性为flex-grow flex-shrink flex-basis;但该属性值也支持简写成一个整数值,比如flex:2;这相当于指定flex:2 2 0px。
- flex-grow:该属性指定flex容器内各子元素的拉伸因子。默认值为0,表示该子元素不会被拉伸。
- flex-shrink:该属性指定flex容器内各子元素的收缩因子。默认值为0,表示该子元素不会被缩小。
- flex-basis:该属性指定flex容器内各子元素缩放之前的基准大小。支持长度值和百分比,默认值为0。
- align-items:该属性作用于弹性盒容器,用于控制弹性盒容器内所有子元素在垂直方向上的对其方式。
- align-self:该属性作用于弹性盒容器内的子元素,用于控制该子元素自身在垂直方向上的对齐方式。
align-items和align-self两个属性都允许设置以下属性值:
- flex-start:顶部(或左边)对齐
- flex-end:底部(或右边)对齐
- center:居中对齐
- baseline:顶部(或左边)对齐,但以元素的底部作为对齐基准线。
- stretch:拉伸子元素,让它们占满父容器。
除此之外,由于align-self是作用于flex容器中的子元素,用于控制该子元素本身的对其方式,所以align-self还可以额外指定auto属性值,用于说明该子元素采用父容器的对齐方式。
- justify-content:该属性作用于弹性盒容器内的子元素,用于控制该子元素自身在排列方式上的对其方式。该属性支持如下属性值:
- flex-start:所有子元素都靠近排列方向的起始端,留出结束端多余的空间。
- flex-end:所有子元素都靠近排列方向的结束端,留出起始端多余的空间。
- center:所有子元素都靠近排列方向的中间,留出起始端、结束端多余的空间。
- space-between:多余的空间平均分布到各子元素的中间。
- space-around:多余的空间平均分布到各子元素的中间和两边。
该属性设置不同值时的效果如下(简单画了一下,存在细微差异请谅解)
- align-content:该属性作用于弹性盒容器,用于控制弹性盒容器内行的分布方式。该属性支持如下属性值:
- flex-start:所有行都靠近顶部或左端。
- flex-end:所有行都靠近底部或右端。
- center:所有行居中显示。
- space-between:多余的空间平均分布到各行之间。
- space-around:多余的空间平均分布到各行之间和两边。
下面页面代码示范了align-content属性的功能:
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> align-content </title> <style type="text/css"> div#container { border: 1px solid black; padding: 5px; width: 350px; height: 160px; display: flex; flex-wrap:wrap; } div>div { border: 1px solid #aaf; padding:5px; width:100px; } </style> </head> <body> <div id="container"> <div>栏目一</div> <div>栏目二</div> <div>栏目三</div> <div>栏目四</div> <div>栏目五</div> <div>栏目六</div> <div>栏目七</div> <div>栏目八</div> <div>栏目九</div> </div> <button onclick="change(this.innerHTML);">flex-start</button> <button onclick="change(this.innerHTML);">flex-end</button> <button onclick="change(this.innerHTML);">center</button> <button onclick="change(this.innerHTML);">space-between</button> <button onclick="change(this.innerHTML);">space-around</button> <script type="text/javascript"> function change(val){ document.getElementById('container').style.alignContent = val; } </script>
下面是为单击按钮改变id为container的容器align-content属性后的效果,图中用红线标记的为该效果对应的属性值。