Flex布局
什么是Flex?
Flex是Flexible Box的缩写,翻译成中文就是“弹性盒子”,用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
1 | .box{ |
1 | .box { |
基本概念
若某元素采用flex布局,则此元素被称为flex容器(flex container)。其所有的子元素自动成为Flex项目(flex item)。
在Flex布局中有两个轴
1、主轴(main axis),水平方向,起始位置为main start,结束位置为main end;
2、侧轴(又称交叉轴 cross axis),垂直方向,起始位置为cross start,结束位置为cross end。
其中main size为Flex项目在主轴方向上的大小,cross size为Flex项目在侧轴方向上的大小。
容器属性
容器属性有六种
flex-direction
设置主轴方向flex-wrap
是否换行flex-flow
flex-direction和flex-wrap的简写justify-content
主轴方向对齐方式align-item
侧轴方向对齐方式align-content
多行时,侧轴的对齐方式
flex-direction
决定主轴的方向(即项目的排列方向)
1 | .box { |
- row(默认):主轴水平方向,起点在左端;
- row-reverse:主轴水平方向,起点在右端,排列顺序会颠倒;
- column:主轴垂直方向,起点在上边沿;
- column-reverse:主轴垂直方向,起点在下边沿,排列顺序会颠倒。
flex-wrap
定义换行情况
1 | .box{ |
nowrap(默认):不换行;
wrap:换行,第一行在上方;(从最上方开始排)
wrap-reverse:换行,第一行在下方。(从最下方开始排)
flex-flow
是flex-direction和flex-wrap的简写,默认row nowrap
1 | .box{ |
例:
1 | .box{ |
justify-content
定义项目在主轴上的对齐方式
1 | .box { |
flex-start
flex-end
center
space-between
space-around
space-evenly (注意区别space-around,此状态下item外的空隙大小是相等的)
stretch 项目当前对齐方向上拉伸
align-items
定义项目在交叉轴上如何对齐
1 | .box { |
flex-start
:交叉轴的起点对齐。flex-end
:交叉轴的终点对齐。center
:交叉轴的中点对齐。baseline
: 项目的第一行文字的基线对齐。stretch
(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
align-content
定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用(要有多行item)
1 | .box { |
flex-start
:与交叉轴的起点对齐。flex-end
:与交叉轴的终点对齐。center
:与交叉轴的中点对齐。space-between
:与交叉轴两端对齐,轴线之间的间隔平均分布。space-around
:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。stretch
(默认值):轴线占满整个交叉轴。(给子元素设置高度与不设置高度效果是不一样的)
项目属性
order
flex-grow
flex-shrink
flex-basis
flex
align-self
order
定义项目的排列顺序。数值越小,排列越靠前,默认为0
1 | .item { |
此属性没搞明白。。。上图就完事了~
flex-grow
定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
给任意项目设置该属性时,该项目的width失效
1 | .item { |
例:当存在容器宽度为800px,容器中存在三个项目,宽度均为100px;即剩余500px的空间。
1 | <div class="container"> |
1 | .container { |
1、当给item1
设置flex-grow: 1
时,item1的width失效,剩余宽度由500px变为600px,又因为item1
的flex-grow: 1
则item1
占据全部剩余宽度,item1
的宽度为600px;
此时三个item的宽度分别为600px,100px,100px。
2、若再给item2
设置flex-grow: 3
时,item2
的width失效,此时剩余宽度为700,item1
和item2
以 1:3的比例占据剩余空间,此时三个item的宽度分别为175px,525px,100px。
1 | 阮大佬的原话:如果所有项目的`flex-grow`属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的`flex-grow`属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。 |
flex-shrink
定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
注意区别flex-grow,flex-grow是容器空间多余后起作用,flex-shrink是容器空间被项目充满后起作用。
1 | .item { |
1、当存在宽度为900px的容器,容器中有三个宽度为400px的项目,很显然项目总宽度大于900px;此时flex-shrink
默认为1;则三个项目以1:1:1平分900px,每个项目宽度为300px;
2、当给item1
设置flex-shrink:2
,item2
设置flex-shrink: 4
,此时三个项目会以2:4:1的比例平分900px;项目宽度分别为200px,400px,100px。
flex-basis
定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto
,即项目的本来大小。
1 | .item { |
它可以设为跟width
或height
属性一样的值(比如350px),则项目将占据固定空间。
flex
是flex-grow
, flex-shrink
和 flex-basis
的简写,默认值为0 1 auto
。后两个属性可选。
1 | .item { |
该属性有两个快捷值:auto
(1 1 auto
) 和 none (0 0 auto
)。
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
align-self
属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items
属性。默认值为auto
,表示继承父元素的align-items
属性,如果没有父元素,则等同于stretch
。
1 | .item { |
本文是在阮一峰的博客的基础上添加部分个人理解和补充。
最后更新: 2019年09月02日 11:05