flex布局可以轻松实现元素的水平及垂直居中,还可以调整元素的顺序,而只需要设置简单的几个属性就可以达到非常好的效果,下面总结一下flex的一些属性,以便查询。
要用flex布局很简单,只需要设置display: flex
或display: inline-flex
,顾名思义,前者是块级元素,后者是内联元素,这是作用于父元素上的,个人觉得有点像表格一样,当元素设置display: table
或者用表格标签时,内部的子元素的排列方式将发生变化,按照设计的布局进行渲染排列,设置display: flex
后,子元素默认将会按照顺序一个个从左向右排列,默认在一行,如果子元素宽度和超过父元素宽度,元素宽度将自动压缩,当然这些都可以设置,后面会一一总结。值得注意的是,子元素排列有点像浮动元素,外边距会影响布局,并且如果有多行,则垂直外边距不会合并,当然元素换行时也不会“卡住”,因为行与行之间是独立的,高度取决于最高的元素,这一点又像表格的行一样。
首先看个基本的布局:
html:
<ul class="flex-container">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
</ul>
css:
.flex.container {
padding: 0;
margin: 0;
list-style: none;
}
.flex-item {
background: plum;
width: 200px;
height: 150px;
padding: 30px;
margin: 50px 50px;
font-weight: bold;
font-size: 3em;
line-height: 150px;
color: white;
text-align: center;
}
.flex-item:nth-of-type(odd) {
height: 100px;
line-height: 100px;
}
毫无疑问效果如图:
设置display: flex
后:
默认自动压缩,横向排列,不换行
容器属性
1、flex-flow
flex-flow
是flex-direction
和flex-wrap
的简写形式,flex-direction规定排列方向,取值有row | row-reverse | column | column-reverse
,即可以横向排列或纵向排列或反向,flex-wrap
取值有nowrap | wrap | wrap-reverse
,可以换行、不换行以及反向换行,如果行是从上往下排列,则反向换行则会把行从下往上排列。设置了换行后,当元素一行放不下,会自动换到下一行。所以设置了flex-flow: row wrap
,效果如图:
2、justify-content
为了实现水平居中,只需设置justify-content
,可取值有flex-start | center| flex-end | space-between | space-around
,前三个分别代表靠左、居中、靠右,space-between
表示等间距排列,最左边元素靠左,最右边元素靠右,space-around
也是等间距排列,不同的是,两边的元素与父元素内容区边界的间距为中间间距的一半,如图为设置justify-content: space-around
的效果图:
3、align-content
align-content
与justify-content
类似,不同的是他操作的对象是行,可以实现在纵向上,行与行之间的对齐方式,前提是父元素的高度固定,否则比起作用。取值有flex-start | center| flex-end | space-between | space-around | stretch
,基本与justify-content
取值相同,但多了一个stretch
,它的意思是拉伸,可以这样理解每行的高度由子元素决定,设置了stretch
后,高度将拉伸,这样每行的高度就都相同了,如图为设置父元素高度height: 800px
并且align-content: stretch
:
4、align-items
align-content
只能设置行与行之间的对齐方式,要想设置各行内部子元素的垂直对齐方式,则需设置align-items
,它的取值有flex-start | center | flex-end | stretch | baseline
,即可设置靠上、居中、靠右、基线对齐以及拉伸,如图为居中对齐:
stretch
可在元素高度不固定时拉伸,使其与行的高度相同。
子元素属性
5、order
order
可以设置元素的排列顺序,初始值均为0,值越大,越靠后,order
可为负值,如图把奇数项子元素的设置为order: -1
:
6、flex
前面说过默认元素在一行且自动压缩,实际上是flex
在起作用,它是flex-grow
、flex-shrink
、flex-basis
的简写形式,flex-grow
可以设置拉伸比例,flex-shrink
设置压缩比例,这两个属性值都是数字,根据设置的值占和值的比例来确定子元素拉伸或压缩所占的比例,分配的量是行多余的宽度或溢出宽度的量,而分配的量又取决于行的宽度以及子元素的flex-basis
值,即基准值,通过设置flex-basis
可以设置子元素宽度值,默认为auto,即基准值默认为子元素宽度,假设多余宽度为120px,第一个子元素flex-grow: 1
,第二个flex-grow: 2
,第三个flex-grow: 3
,则分别可分到1/(1+2+3)*120=20,2/(1+2+3)*120=40,3/(1+2+3)*120=60像素的宽,设置flex-grow: 0
则不分配,默认flex
值为0 1 auto
,即只压缩不拉伸,如图为设置flex: 1 1 auto
,可发现justify-content
的值没什么用。
7、align-self
align-self
可这是元素在一行中的垂直对齐方式,取值有auto | flex-start | flex-end | center | baseline | stretch
如图为设置第一个子元素align-self: flex-start
总结:flex让布局更简单,有效运用可简化工作,当然它也有它的适用场景,另外只能在高版本的现代浏览器使用
参考文章: