CSS Flex弹性布局

发表于 更新于 分类于 阅读次数：

flex弹性布局简介(flexible box)。

基本概念

采用flex布局的元素叫做 “容器” ，该元素(容器)内的所有子元素叫做 “项目”。沿着flex元素放置方向延伸的轴（比如页面上横向的行，纵向的列）被称为 “主轴” ，该轴的开始和结束分别称为 main start 和 main end。相反的，垂直于flex元素放置方向上的轴被称为 “交叉轴” 或 “横轴”，该轴的开始和结束分别称为 cross start 和 cross end。

所有标签中的文本节点也可以当做项目来进行 flex 布局，即标签作为容器，文本作为项目。

兼容性

Chrome Firefox Opera Safari IE
21+ 22+ 12.1+ 6.1+ 10+

使用方式

给要应用 flex 布局的元素设置 display:flex 或 display:inline-flex 属性。由于兼容性问题，webkit内核的浏览器需加上 -webkit- 前缀。

1
2
3
4
.box {
  display: -webkit-flex;
  display: flex;
}

容器属性

容器属性有6个可以设置。分别是：

1
2
3
4
5
6
1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. align-content

flex-direction属性

规定主轴的方向，即设置项目在容器里的排列方向。

可选值 描述
row (默认)，主轴方向 水平从左向右，即项目依次从左向右排列
row-reverse 主轴方向 水平从左向右，即项目依次从右向左排列
column 主轴方向 垂直从上到下，即项目依次从上到下排列
column-reverse 主轴方向 垂直从下到上，即项目从下往上排列

flex-wrap属性

规定当项目在主轴方向上无法放下时，是否换行。

可选值 描述
no-wrap (默认)，不换行
wrap 换行，依次从上到下排列(主轴水平)
wrap-reverse 换行，第一行在下方，即从下到上换行

flex-flow属性

flex-direction 和 flex-wrap 的简写属性。

可选值 描述
row no-wrap (默认)，主轴从左到右，不换行。第一个值为 flex-direction 属性值
第二个值为 flex-wrap 属性值

justify-content属性

规定项目在主轴方向上的对齐方式。

可选值 描述
flex-start (默认)，项目向主轴的开始处(main start)对齐
flex-end 项目向主轴的结束处(main end)对齐
center 项目在主轴方向上居中对齐
space-between 项目在主轴方向上均匀分布排列，即项目之间留出空间，但项目与容器边缘不留空间
space-around 项目在主轴方向均匀分布，不但项目与项目之间有间隙，项目与容器边缘也会有间隙

align-items属性

规定项目在交叉轴上的对齐方式。

可选值 描述
stretch (默认)，项目不设置高度或为 auto 时，将占满整个容器的高度
flex-start 向交叉轴的起点对齐
flex-end 向交叉轴的终点对齐
center 项目在交叉轴上居中对齐
baseline 向项目的第一行文字的基线对齐

align-content属性

规定多根轴线的对齐方式，如果项目只有一个轴线，该属性不起作用。即有多个主轴时，控制主轴在交叉轴上的对齐方式，把一条轴线上的项目作为一个整体进行对齐。

可选值 描述
stretch (默认)，在交叉轴上伸张，拉伸，即占满整个交叉轴
flex-start 与交叉轴的起点对齐
flex-end 与交叉轴的终点对齐
center 在交叉轴上居中对齐
space-between 与交叉轴两端对齐，轴线之间均匀分布
space-around 每根轴线的两侧都相等

项目属性

项目属性有6个可以设置，分别为：

1
2
3
4
5
6
1. order
2. flex-grow
3. flex-shrink
4. flex-basis
5. flex
6. align-self

order属性

规定项目的排列顺序。

整数值，默认为 0 ，数值越小越靠前排列。

1
2
3
.item {
  order : 1;
}

flex-grow属性

规定项目的放大比例。

项目在容器中的占据位置比例值。整数值，默认为0，即容器存在多余的空间也不放大。当值大于0时，就按相应的倍数放大。

比如，主轴上有两个项目，分别设置两个项目 flex-grow: 1 。则表示两个项目各占据主轴空间 1/2。

1
2
3
4
5
6
.left {
  flex-grow: 1;
}
.right {
  flex-grow: 1;
}

又比如，主轴上有两个项目，分别设置 flex-grow 如下，则表示 .left 项目占据主轴的全部剩余空间。

1
2
3
4
5
6
.left {
  flex-grow: 1; 
}
.right {
  flex-grow: 0; /* 0 是默认值*/
}

flex-shrink属性

规定项目的缩小比例。

整数值，默认为 1 ，即当容器变小时，项目会按比例缩小。该值不可取负值。

1
2
3
.item {
  flex-shrink: 1;
}

flex-basis属性

规定分配多余空间之前，设置项目占据的固定主轴空间(项目的固定宽度)。

可选值是 width 和 height 能设置的值。

1
2
3
.item {
  flex-basis: 100px;
}

flex属性

flex-grow , flex-shrink 和 flex-basis 的简写属性。

默认值：0 1 auto
该属性有两个快捷值：auto (1 1 auto) , none (0 0 auto)
例：

1
2
3
4
5
/* 放大，缩小*/
flex: auto;

/*不放大，不缩小*/
flex: none;

align-self属性

控制具体的单个项目在交叉轴上的对齐方式。

可选值 描述
stretch (默认)，项目不设置高度或为 auto 时，将占满整个容器的高度
flex-start 向交叉轴的起点对齐
flex-end 向交叉轴的终点对齐
center 在交叉轴上居中对齐
baseline 与项目的第一行文字的基线对齐