参考:阮一峰flex布局教程
定义
即为弹性布局,为盒状模型提供足够的灵活性。主要运用于移动端手机app界面的设计
任何一个元素都可以使用display: flex
属性。
为了响应兼容性,可以像如下这样编写
#app {
display: -webkit-flex;
display: flex;
}
注意的是,设置了flex属性之后,float,clear,vertical-align这几个属性会失效,这是因为flex属性本身就是设置这些浮动元素的位置的。
容器分主轴和交叉轴,即水平和垂直
容器属性
- flex-direction (项目排列方向)
- flex-wrap (项目不在一条轴线时的情况)
- flex-flow (排列方向和不在一条轴线时情况的简写)
- justify-content (项目在主轴的排列,即水平方向上的)
- align-items (项目在交叉轴上的排列,即垂直方向上的)
- align-content (多根轴线时的排列)
flex-direction(项目排列方向)
flex-direction: column-reverse | column | row | row-reverse;
图与值对应
image.png
flex-wrap
默认情况下,元素会沿着轴线排列成一条线,当容器不够长时,flex-wrap属性就会设置轴线不够长时,如何换行。
flex-wrap: nowrap | wrap | wrap-reverse;
三个取值分别对应下面的排列
nowrap(不换行)
image.pngwrap(第一行在上方)
image.pngwrap-reverse(第一行在下方)
image.pngflex-flow
这个属性是结合wrap和direction两个属性,
flex-flow: <flex-direction> || <flex-wrap>;
#app {
display: -webkit-flex;
display: flex;
flex-flow: row wrap-reverse;
}
justify-content
项目在主轴上的对齐方式,主轴在没有规定时是默认从左到右的
//html
<div id="test">
<button>元素1</button>
<button>元素2</button>
<button>元素3</button>
</div>
//css
#test {
display: -webkit-flex;
display: flex;
justify-content: space-around;
width: 400px;
border: 1px solid #511A91;
}
button {
width: 100px;
height: 20px;
}
image.png
相应只改变其中的
justify-content
属性,得到如下结果
- flex-start
- flex-end
- flex-center
- space-between
注意space-between
和space-around
的区别
space-between
是在容器内各元素之间有间隔,是项目之间的间隔相等。在边界上是没有的,而space-around
在容器与边界也是有间隔的,是项目两侧间的间隔相等
align-items
该属性定义项目在交叉轴上的对齐方式
#test {
display: -webkit-flex;
display: flex;
align-items: flex-end;
height: 80px;
width: 400px;
border: 1px solid #511A91;
}
.element1 {
width: 100px;
height: 20px;
}
.element2 {
width: 80px;
height: 40px;
}
.element3 {
width: 60px;
height: 60px;
}
//html
<div id="test">
<button class="element1">元素1</button>
<button class="element2">元素2</button>
<button class="element3">元素3</button>
</div>
image.png
相应只改变align-items
的值,得到如下截图
flex-start
image.pngcenter
image.pngbaseline (项目第一行文字的基线对齐)
image.pngstretch (默认值)
image.pngalign-content
该属性定义了多根轴线的对齐方式。对一根轴线时不起作用
//css
#test {
display: -webkit-flex;
display: flex;
flex-flow: wrap;
align-content: flex-start;
height: 150px;
width: 250px;
border: 1px solid #511A91;
}
.element1 {
width: 100px;
height: 20px;
}
.element2 {
width: 80px;
height: 40px;
}
.element3 {
width: 60px;
height: 60px;
}
//html
<div id="test">
<button class="element1">元素1</button>
<button class="element2">元素2</button>
<button class="element3">元素3</button>
<button class="element1">元素4</button>
<button class="element2">元素5</button>
<button class="element3">元素6</button>
</div>
image.png
改变其中的align-content
flex-end
image.pngcenter
image.pngspace-between
image.pngspace-around
image.pngstretch (默认值)
image.png项目属性
order
项目中order
值从小到大排序,该值是在项目中的,不是写在容器上的
//html
<div id="test">
<button class="element1">元素1</button>
<button class="element2">元素2</button>
<button class="element3">元素3</button>
</div>
//css
#test {
display: -webkit-flex;
display: flex;
flex-flow: wrap;
height: 150px;
width: 250px;
border: 1px solid #511A91;
}
.element1 {
order: 1;
width: 100px;
height: 20px;
}
.element2 {
order: 0;
width: 80px;
height: 40px;
}
.element3 {
order: -1;
width: 60px;
height: 60px;
}
image.png
flex-grow
该属性为项目的放大比例,默认为0,即即使存在剩余空间也不放大。
-
无放大状态
//css
#test {
display: -webkit-flex;
display: flex;
flex-flow: wrap;
height: 150px;
width: 250px;
border: 1px solid #511A91;
}
.element1 {
width: 60px;
height: 20px;
/* flex-grow: 0 */
}
.element2 {
width: 60px;
height: 20px;
/* flex-grow: 1; */
}
.element3 {
width: 60px;
height: 20px;
/* flex-grow: 2; */
}
image.png
主轴方向上放大
其他不变
.element1 {
width: 60px;
height: 20px;
flex-grow: 0
}
.element2 {
width: 60px;
height: 20px;
flex-grow: 1;
}
.element3 {
width: 60px;
height: 20px;
flex-grow: 2;
}
image.png
flex-shrink
该属性定义了项目的缩小比例,默认为1,当空间不足时,该项目将自动等比例缩小,当某项目设置为0,该项目不缩小。这个时候设置的flex-flow
属性为nowrap
不设置值时
<style type="text/css">
#test {
display: -webkit-flex;
display: flex;
height: 150px;
width: 200px;
border: 1px solid #511A91;
}
.element1 {
width: 100px;
height: 20px;
/* flex-shrink: 1; */
}
.element2 {
width: 100px;
height: 20px;
/* flex-shrink: 1; */
}
.element3 {
width: 100px;
height: 20px;
/* flex-shrink: 0; */
}
</style>
image.png
<style type="text/css">
#test {
display: -webkit-flex;
display: flex;
flex-flow: nowrap;
height: 150px;
width: 200px;
border: 1px solid #511A91;
}
.element1 {
width: 100px;
height: 20px;
flex-shrink: 0
}
.element2 {
width: 100px;
height: 20px;
flex-shrink: 1;
}
.element3 {
width: 100px;
height: 20px;
flex-shrink: 2;
}
</style>
image.png
flex-basis
该属性定义了在分配多余空间之前,项目占据的主轴空间,浏览器根据该属性,计算主轴是否有多余空间。默认值auto
<style type="text/css">
#test {
display: -webkit-flex;
display: flex;
height: 150px;
width: 280px;
border: 1px solid #511A91;
}
.element1 {
height: 20px;
flex-basis: 150px;
}
.element2 {
width: 100px;
height: 20px;
}
.element3 {
width: 100px;
height: 20px;
}
</style>
这个属性跟width
有点类似,但是他的级别比width
高,也就是在未设置flex-basis
的宽值时,才会采纳width
,如果没有还没有width
,就通过容器来动态得到width
值。
具体width
与basis-flex
的区别也可以看这篇文章
width Vs basis-flex
flex属性
flex属性是flex-grow
,flex-shrink
, flex-basis
的简写,默认值0 1 auto
。
.element1 {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
align-self 属性
align-self
属性允许单个项目有与其他项目不一样的对齐方式,可以覆盖align-items
属性,默认auto
,继承父元素的align-items
属性。
.element1 {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
网友评论