Flex布局
2017-10-15 本文已影响53人
海娩
参考：阮一峰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.png
wrap(第一行在上方)
image.png
wrap-reverse(第一行在下方)
image.png
flex-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
image.png
- flex-end
image.png
- flex-center
image.png
- space-between
image.png
注意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.png
center
image.png
baseline (项目第一行文字的基线对齐)
image.png
stretch (默认值)
image.png
align-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.png
center
image.png
space-between
image.png
space-around
image.png
stretch (默认值)
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;
}
