前言
flex布局简化了前端布局问题,例如垂直居中,水平居中等,且目前为止主流浏览器都支持了这种布局,特别是移动端的浏览器,支持度更好。下面是在can i use上查询的结果。从查询的结果来看,支持IE10及以上浏览器,移动端几乎全线支持!
一、flex布局是什么?
flex布局意思是“弹性布局”,块级元素和行内元素都可以设置为flex布局。
DOM结构
1
2
3
...
块级元素设置flex布局
.flex-container{
display:flex;
display: -webkit-flex; /* Safari */
display: -ms-flex; /* IE10+ */
}
行内元素设置flex布局
.flex-container{
display:-webkit-inline-box;
display:-ms-inline-flexbox; /* IE10+ */
display:inline-flex; /* Safari */
}
二、flex布局基本概念
flex布局一般包含容器(flex-container)和若干个子元素(flex-item),布局上分为主轴和交叉轴。默认情况下,水平方向为主轴,垂直方向为交叉轴,可以通过设置flex-direction
切换主轴和交叉轴(稍后会讲解如何切换)。flex布局的属性比较多,但可以归类为 容器属性 和 子元素属性,教程会先讲解容器的属性,然后讲解子元素的属性,这样比较容易理解和记忆!
三、flex容器的属性
flex有6个属性可以设置,它们分别是:
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
3.1 flex-direction属性
DOM结构
1
2
3
CSS样式
.flex-container{
display:flex;
flex-direction: row | row-reverse | column | column-reverse | initial | inherit;
}
- row(默认值),水平方向为主轴,垂直方向为交叉轴,起点在左边。
- row-reverse: 水平方向为主轴,垂直方向为交叉轴,起点在右边。
- column,垂直方向为主轴,水平方向为交叉轴,起点在上边。
- column-reverse,垂直方向为主轴,水平方向为交叉轴,起点在下边。
initial,初始值,和默认值效果一样,这里不再贴图。
inherit,继承父容器的值,主要在嵌套使用flex布局会用到,父容器设置什么,它就是什么,效果和上面的其中一种相同,这里不再贴图
3.2 flex-wrap属性
DOM结构
1
2
3
4
5
6
7
8
CSS样式
.flex-container{
display:flex;
flex-wrap : nowrap | wrap | wrap-reverse | initial | inherit;
}
- nowrap(默认值),即使子元素总宽高超出也不换行(列)。
- wrap,当子元素总宽高超出时自动换行(列)。
- wrap-reverse,换行,第一行在下方(列的情况自行探索,不再贴图)。
- initial、inherit的效果和上面介绍的一样,不再赘述!
3.3 flex-flow属性
flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性,用于设置或检索弹性盒模型对象的子元素排列方式。flex-direction 属性规定方向, flex-wrap 属性规定是否拆行或拆列。
DOM结构
1
2
3
4
5
6
7
8
CSS样式
.flex-container{
display:flex;
flex-flow: flex-direction flex-wrap | initial | inherit;
}
- row wrap,表示水平方向,超出换行。
- row nowrap,表示水平方向,超出不换行。
- 其他情况也是一样的,就是 flex-direction 和 flex-wrap 组合,这里不做过多赘述。
3.4 justify-content属性
justify-content属性用于设置主轴上元素的排列方式。
DOM结构
1
2
3
CSS样式
.flex-container{
display:flex;
justify-content: flex-start | flex-end | center | space-between | space-around | initial | inherit;
}
- flex-start(默认值),子元素靠容器开头排列。
- flex-end,子元素靠结尾排列。
- center,子元素居中排列。
- space-between,两端对齐,子元素之间的间隔相等。
- space-around,子元素的两边间隔相等。
3.5 align-items属性
justify-content属性用于设置交叉轴上元素的排列方式。
DOM结构
1
2
3
CSS样式
.flex-container{
display:flex;
height: 300px; /* 设置高度,才能看到效果 */
align-items: stretch | center | flex-start | flex-end | baseline | initial | inherit;
}
- stretch (默认值),子元素被拉伸以适应容器(1和2设置了高度,3没有设置高度,下同)。
- center ,子元素在交叉轴上居中对齐。
- flex-start 子元素在交叉轴上靠起始边对齐。
- flex-end 子元素在交叉轴上靠结束边对齐。
- baseline 子元素在交叉轴上根据字体的baseline对齐(1、2、3字体大小分别为20px、40px、60px)。
3.6 align-content属性
align-content规定flex-container有剩余空间时,如何分配给子元素。这个属性设置的是所有子元素的对齐方式,需要设置flex-wrap(wrap或wrap-reverse),并且指定flex-container的高度(或宽度)才会生效。
DOM结构
1
2
3
4
5
6
7
8
CSS样式
.flex-container{
display: flex;
background: #eeeeee;
align-content: center;
height: 300px;
flex-wrap: wrap | wrap-reverse;
align-content: stretch | center | flex-start | flex-end | space-between | space-around | initial | inherit;
}
- stretch(默认值),子元素被拉伸以适应容器(临时去掉了flex-item的高度)。
- center,子元素(整体)在交叉轴上居中对齐(恢复flex-item的高度为100px,下同)。
- flex-start,子元素(整体)向交叉轴起始位置对齐。
- flex-end,子元素(整体)向交叉轴结束位置对齐。
- space-between ,子元素行(列)向交叉轴两边对齐(建议亲自尝试,文字功底不好,描述得不好~)。
- space-around ,子元素行(列)两边均分容器剩余空间(建议亲自尝试,文字功底不好,描述得不好~)。
四、子元素(容器)的属性
flex子属性有6个属性可以设置,它们分别是:
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
4.1 order属性
order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
DOM结构
1
-1
0
未设置order
CSS样式
.flex-container{
display:flex;
}
.flex-item{
order: number | initial | inherit;
}
- number,可以设置任意数字,数字越小越靠前(和DOM的位置无关)。
4.2 flex-grow属性
- flex-grow属性定义子元素的放大比例,默认为0,即如果存在剩余空间,也不放大;
DOM结构
0
1
2
3
CSS样式
.flex-container {
display: flex;
background: #eeeeee;
}
.flex-item {
flex-grow: flex-grow: number | initial | inherit;
}
- number,可以设置任何大于等于0的数字,数字越大,分到的剩余空间比例就越大。
4.3 flex-shrink属性
- flex-shrink属性定义了子元素的缩小比例,默认为1,即如果空间不足,该项目将缩小。负值对该属性无效;
DOM结构
0
1
2
3
4
5
6
7
CSS样式
.flex-container {
display: flex;
background: #eeeeee;
}
.flex-item {
background: #b48882;
flex-shrink: number | initial | inherit;
}
- number, 数值越大,缩小比例就越大。
4.4 flex-basis属性
flex-basis属性用于设置子元素的伸缩基准值,默认值为auto,即元素本身的大小。如果子元素同时设置宽高和flex-basis属性,flex-basis的优先级更高。
DOM结构
width:100px
flex-basis: 200px;
flex-basis: 300px;
flex-basis: 400px;
CSS样式
.flex-container {
display: flex;
background: #eeeeee;
}
.flex-item{
flex-basis: auto | number | initial | inherit;
}
- number,子元素设置的数值越大,占用剩余空间的比例越大。
4.5 flex属性
flex属性是flex-grow、flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。flex支持缩写,例如经常用到的:flex: 1
,等价于flex: 1 1 0%
。
DOM结构
1
2
3
CSS样式
.flex-container {
display: flex;
background: #eeeeee;
}
.flex-item{
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
margin: 5px;
flex: flex-grow [flex-shrink] [flex-basis] | auto | none | 1 | 0 | initial | inherit;
}
-
flex:1
,等价于flex: 1 1 0%
-
flex: 0
,等价于flex: 0 1 0%
-
flex: auto
,等价于flex: 1 1 auto
-
flex: none
,等价于flex: 0 0 auto
- 当取值为一个具体值或百分比时,例如:
flex: 0%
等价于flex: 1 1 0%
,设置的是flex-basis
的值
- 当 flex 取值为两个非负数字,则分别视为 flex-grow 和 flex-shrink 的值,flex-basis 取 0%,例如:
flex:2 3
等价于flex 2 3 0%
(下图给第一个子元素设置flex:2 3
)。
- 当 flex 取值为一个非负数字和一个长度或百分比,则分别视为 flex-grow 和 flex-basis 的值,flex-shrink 取 1。例如:
flex: 2 200px
等价于flex: 2 1 200px
(下图给第一个子元素设置flex:2 200px
)。
4.6 align-self属性
align-self 允许单个子元素设置与其他项目不一样的对齐方式,默认值:auto。
DOM结构
1
2
3
CSS样式
.flex-container {
display: flex;
background: #eeeeee;
height:300px;
}
.flex-item{
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
margin: 5px;
align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;
}
- auto(默认值),元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"
- stretch ,元素被拉伸以适应容器(子元素2高度设置为auto,align-self设置为stretch)。
- center,元素位于容器的中心(子元素2的align-self设置为center)。
- flex-start,元素位于容器的起始位置(子元素2的align-self设置为center)。
- flex-end,元素位于容器的结束位置(子元素2的align-self设置为end)。
- baseline ,元素以自身文字基线为对齐方式,对齐到主轴中(子元素2align-self设置为baseline ,
font-size:60px;height:auto
)
最后,奉献一个九宫格布局的例子:https://codepen.io/linlif/pen/zYYRejb,效果图如下:
本文完
参考资料:
30 分钟学会 Flex 布局
Flex 布局语法教程