Flex布局将成为未来布局的首选方案。本文介绍它的语法
以下内容主要参考了阮一峰的网络日志。
一、Flex布局是什么?
Flex是灵活的盒子的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
.box { ,,显示:flex; }
行内元素也可以使用Flex布局。
.box { ,,显示:inline-flex; }
Webkit内核的浏览器,必须加上<代码> Webkit> 代码前缀。
.box { ,,显示:-webkit-flex;,/*, Safari */,,显示:flex; }
注意,设为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
。
三、容器的属性
以下6个属性设置在容器上。
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
3.1 flex-direction属性
flex-direction
属性决定主轴的方向(即项目的排列方向)。
.box { flex-direction: row | row-reverse | column | column-reverse;}
它可能有4个值。
row
(默认值):主轴为水平方向,起点在左端。
row-reverse
:主轴为水平方向,起点在右端。
column
:主轴为垂直方向,起点在上沿。
column-reverse
:主轴为垂直方向,起点在下沿。
3.2 flex-wrap属性
默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap
属性定义,如果一条轴线排不下,如何换行。
.box{ flex-wrap: nowrap | wrap | wrap-reverse;}
它可能取三个值。
(1)nowrap
(默认):不换行。
(2)wrap
:换行,第一行在上方。
(3)wrap-reverse
:换行,第一行在下方。
3.3 flex-flow
flex-flow
属性是flex-direction
属性和flex-wrap
属性的简写形式,默认值为row nowrap
。
.box { flex-flow:|| ;}
3.4 justify-content属性
justify-content
属性定义了项目在主轴上的对齐方式。
.box { ,,justify-content: flex-start |, flex-end |, center |, space-between |,空间; }
它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
<李>
引用><代码> flex-start> 代码(默认值):左对齐
李> <李><代码> flex-end> 代码:右对齐
李> <李><代码>中心> 代码:居中
李> <李><代码>之间的空间> 代码:两端对齐,项目之间的间隔都相等。
李> <李><代码>空间> 代码:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
李>3.5对齐项目属性
<代码>对齐项目代码>属性定义项目在交叉轴上如何对齐。
.box { ,,对齐项目:flex-start |, flex-end |, center |, baseline |,伸展; }
它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。
<李>
<代码> flex-start> 代码:交叉轴的起点对齐。
关于Flex布的局。