Flex 弹性布局
了解Flex布局
Flex — Flexible Box,即弹性布局。
任何一个容器均可以指定为 Flex 布局。
.box {
display: flex;
}
/* 行内元素也可以使用 Flex 布局 */
.box {
display: inline-flex;
}
/* 对于Webkit内核的浏览器,需要加上 -webkit- 前缀 */
.box {
display: -webkit-flex; /* 例如:Safari */
}
需要注意的是:将某一元素设置为Flex布局后,子元素的 float 、clear 以及 vertical-align 属性将会失效!
Flex 布局中的几个基本概念
对于采用 Flex 布局的元素,其被称为 Flex 容器(Flex container),简称为“容器”。它的所有子元素自动成为容器的成员,称为 Flex 项目(Flex item),简称“项目”。
如上图, Flex 容器中,默认存在两根轴:
- 水平的主轴(main axis)
- 垂直的交叉轴(cross axis)
主轴的开始位置(即与容器边框的交点)叫做 main start,而结束位置则叫做 main end。
交叉轴的开始位置叫做cross start,结束位置叫做cross end。
其中,Flex item 默认沿主轴排列。
对于单个项目,其所占据的主轴空间叫做 main size,其所占据的交叉轴空间叫做 cross size。
容器 (Flex container) 的属性
容器有6个属性:
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
1.flex-direction 属性
flex-direction 属性用于决定容器主轴的方向。(由于项目默认沿主轴排列,所以实际上也是决定项目的排列方向)。
.box {
display: flex;
flex-direction: row | row-reverse | column | column-reverse;
}
flex-direction属性有4个值
- row(默认):主轴为水平方向,起点在左端(项目从左往右排列)。
- row-reverse:主轴为水平方向,起点在右端(项目从右往左排列)。
- column:主轴为垂直方向,起点在上沿(项目从上往下排列)。
- column-reverse:主轴为垂直方向,起点在下沿(项目从下往上排列)。
这个属性比较好理解,这里就不上图了。
2.flex-wrap 属性
在默认情况下,项目都排在主轴上。而 flex-wrap 属性则是用于定义,当一条轴线排不下时,如何进行换行。
.box {
flex-wrap: nowrap | wrap | wrap-reverse;
}
flex-wrap属性有3个值
- nowrap(默认):不换行(列)。
- wrap:
- 主轴为横向时:从上到下换行。
- 主轴为纵向时:从左到右换列。
- wrap-reverse:
- 主轴为横向时:从下到上换行。
- 主轴为纵向时:从右到左换列。
换行(列)时,项目仍按照设定的主轴方向排列!
效果如下图所示:
注意:当设置
.box {
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
}
时,换行方式与上图相同。
注意:当设置
.box {
display: flex;
flex-direction: column-reverse;
flex-wrap: wrap;
}
时,换行方式与上图相同。
3.flex-flow 属性
flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式,默认值为 row nowrap:
.box {
display: flex;
flex-flow: <flex-direction> <flex-wrap>;
}
4.justify-content 属性
justify-content 属性用于定义项目在主轴上的对齐方式。
.box {
...;
justify-content: flex-start | flex-end | center | space-between | space-around;
}
justify-content属性有5个值
- flex-start(默认):与主轴的起点对齐。
- flex-end:与主轴的终点对齐。
- center:与主轴的中点对齐。
- space-between:两端对齐主轴的起点与终点,项目之间的间隔都相等。
- space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
效果如下图所示:
5.align-items 属性
align-items 属性用于定义项目在交叉轴上如何对齐。纵向交叉轴始终自上而下,横向交叉轴始终自左而右。
.box {
...;
align-items: flex-start | flex-end | center | baseline | stretch;
}
align-items属性有5个值
- flex-start:交叉轴的起点对齐。
- flex-end:交叉轴的终点对齐。
- center:交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch(默认值):如果项目未设置高度或设为auto,项目将占满整个容器的高度。
设置为 baseline 时,向各项目的第一行文字的基线对齐
设置为 stretch 时
而此时还可能会出现项目换行的情况,如下:
两条主轴上的项目纵向铺满交叉轴!
如果交叉轴是横向,那么不给项目设置宽,则项目会横向铺满。如下图:
如果容器的宽高都设置,但不设置 align-items属性,那么默认值为 flex-start,与交叉轴起点对齐。
6.align-content 属性
align-content 属性用于定义**多根轴线(多根轴线,即有多行或多列项目)**的对齐方式。如果项目只有一根轴线,该属性不起作用。
.box {
...;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
align-content属性有6个值
- flex-start:与交叉轴的起点对齐。
- flex-end:与交叉轴的终点对齐。
- center:与交叉轴的中点对齐。
- space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
- space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch(默认值):主轴线占满整个交叉轴。
项目 (Flex item) 的属性
设置在 Flex item 上的6个属性。
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
1.order 属性
order 属性用于定义容器中项目的排列顺序。数值越小,排列越靠前,默认为0。
.item {
order: <integer>;
}
效果如下:
如果不给项目设置 order 值,默认值为0,那么项目的顺序按照结构顺序排列。
2.flex-grow 属性
flex-grow 属性用于定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
.item {
flex-grow: <number>; /* default 0 */
}
效果如下:
不放大
将剩余空间分为4份,3份给黄色,1份给紫色
注意这里的分配空间的计算方式:
div1 — 不放大
div2 — 占据 3 / (3 + 1) = 3 /4 的剩余空间
div3 — 占据 1 / (3 + 1) = 1 /4 的剩余空间
3.flex-shrink 属性
…
4.flex-basis 属性
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
.item {
flex-basis: <length> | auto; /* default auto */
}
它可以设为跟width或height属性一样的值(比如350px),此时项目将占据固定空间。
效果如下:
可以看到,对于项目1,无论是把 width 放在 flex-basis 上方还是下方都不起作用了,只要设置了 flex-basis 项目就占据主轴固定空间,width 就不起作用。
5.flex 属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
6.align-self 属性
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。
默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
align-self属性有6个值,除了auto,其他都与align-items属性完全一致。