文章目录
-
- flex 布局
- flex 属性
-
- 用于容器 container 的属性:
-
- 1.flex-direction
- 2.flex-wrap
- 3.flex-flow
- 4.justify-content
- 5.align-items
- 6.align-content
- 用于项目 item 的属性:
-
- 1.flex-grow
- 2.flex-shrink
- 3.flex-basis
- 4.flex
- 5.align-self
- 6.order
flex 布局
Flex 通常称为 flexbox 或 flex,也称为弹性盒子或弹性布局。一种比较高效率的 css3 布局方案。
因为是弹性盒子,首先需要一个容器 container,然后是项目 item。容器包裹着项目,再通过配置不同的属性,实现各种各样的排列分布。
flex 有两根轴线,分别是主轴和交叉轴,主轴的方向由 flex-diretion
属性控制,交叉轴始终垂直于主轴。
flex 属性
flex 的属性包括了容器 container 的属性以及项目 item 的属性。
用于容器 container 的属性:
1.flex-direction
flex-direction
属性,direction 是方向,指向的意思,所以这个属性主要用于改变轴线的方向。也就是项目的排列方向。
flex-direction
属性包含了4个值:
- row(默认):水平方向,从左向右排列
- row-reverse:水平方向,从右向左排列
- column:垂直方向,从上到下排列
- column-reverse:垂直方向,从下到上排列
2.flex-wrap
flex-wrap
属性用于指定的项目超过一行时,是否换行。
flex-wrap
属性包含了3个值:
- nowrap(默认):项目没有换行,项目总宽度超过容器,自动缩小宽度。
- wrap:项目换行,新的一行在第一行项目的下方。
- wrap-reverse:项目换行,新的一行在第一行项目的上方。
3.flex-flow
flex-flow
是 flex-direction
和 flex-wrap
的合并简写。
flex-flow: column wrap;
// 相当于
flex-direction: column;
flex-wrap: wrap;
4.justify-content
justify 翻译过来是“使每行排齐、使齐行”,content 翻译过来是“内容”。合在一起大概意思就是使行的内容对齐的意思。所以,justify-content
是用于控制项目在主轴上的对齐方式。
justify-content有6个选项:
- flex-start(默认):项目在主轴方向上,以主轴起始位置对齐。从左至右。
- flex-end:项目在主轴方向上,以主轴结束的位置对齐。靠右对齐。
- center:项目在主轴方向上居中。
- space-between:项目在主轴方向上,两端对齐,然后项目中间间隔是相等的。
- space-around:在主轴方向上,剩余的空间被平均的分配到每个项目的两侧。
- space-evenly:在主轴上,剩余的空间平均分配,与 space-between 不同的是,between 是在项目之间,而 evenly 是在轴的最左边和最右边也同样会有空间分配。
5.align-items
align-items 是控制项目在交叉轴上的对齐方式。
有5个选项:
- stretch(默认):如果项目没有设置固定高度,则会被拉伸填充满交叉轴的剩余空间。
- flex-start:项目在沿交叉轴起始线位置对齐。
- flex-end:项目沿交叉轴终点线位置对齐。
- center:项目在交叉轴方向居中对齐。
- baseline:项目在交叉轴方向沿项目中第一行文字的基线对齐。
6.align-content
align-content
控制多行项目(多根主轴线)对齐方式。类似 justify-content
,只不过,align-content
是控制行与行之间的空间分配,justify-content
是控制项目与项目之间的空间分配。
有7个选项:
- stretch(默认):交叉轴方向剩余的空间平均分配到每行,并且行的高度会拉伸,填满整行的空间。
- flex-start:所有行在交叉轴方向上,以交叉轴的起始位置对齐。
- flex-end:所有行在交叉轴方向上,以交叉轴的终点位置对齐。
- center:所有行在交叉轴上居中对齐。
- space-between:行在交叉轴方向上,两端对齐,然后行中间的间隔相等。
- space-around:在交叉轴方向上,剩余的空间被平均的分配到每一行的两侧。
- space-evenly:在交叉轴方向上,剩余空间平均分配,与
space-between
不同的是,between 是在行之间,而 evenly 是在轴的最左边和最右边也同样会有空间分配。
用于项目 item 的属性:
1.flex-grow
flex-grow
用于控制项目在主轴方向上拉伸放大占剩余空间(如果有的话)的比例。
默认值:0
,不放大。
2.flex-shrink
flex-shrink
用于控制项目在主轴方向上缩小的程度。数值越大,收缩越多。
默认是 flex-shrink: 1
,同等比例收缩。
3.flex-basis
flex-basis
用于初始化每个项目占据主轴空间的尺寸(main size)。
默认值:flex-basis: auto
, 自动检测尺寸,如果项目有设置尺寸,则取项目设置的值,否则根据项目内容计算出尺寸。
4.flex
flex
是上面三个合并的简写。
默认值:flex: 0 1 auto;
后两个参数为可选参数。
有几种简写形式:
- flex: auto 相当于 flex: 1 1 auto
- flex: none 相当于 flex: 0 0 auto
- flex: 0% 相当于 flex: 1 1 0%
- flex: 100px 相当于 flex: 1 1 100px
- flex: 1 相当于 flex: 1 1 0
flex: auto 与 felx:1 区别:
flex:1 不管内容多少,一般都是平分空间,空间大小都一致
而 flex:auto 是根据内容的大小来分,不是平的(除非内容都是一样,才平分)
5.align-self
align-self
控制项目本身在交叉轴上的对齐方式。优先级高于 align-items
。align-items
是容器统一控制容器里的每个项目的对齐方式,align-self
则是项目控制项目本身的对齐方式。
有6个选项:
- auto(默认):继承容器设置的 align-items 的值。默认是由容器设置 align-items 统一控制项目在交叉轴上的对齐方式。
- flex-start:当前项目顶部对齐。
- flex-end:当前项目底部对齐。
- center:当前项目在交叉轴上居中对齐。
- baseline:当前项目按文字的基线对齐。
- stretch:当前项目拉伸充满。
6.order
order
用于控制项目在主轴上的排列顺序。
默认值: order: 0;
,参数值正负数都可以,全部项目按主轴方向依次排列。设置后,按数值大小,从小到大排列。