容器元素属性
order
flex-grow
flex-shrink
flex-basis
flex
align-self
order
该属性是决定元素排列顺序的。数值越小,排列越靠前,默认为0。如果都为0,就按照代码顺序排列。
<style>
.box {
width: 800px;
display: flex;
}
.box div {
width: 200px;
}
.first {
background: red;
order: 4;
}
.second {
background: blue;
order: 3;
}
.third {
background: yellow;
/* order: 2; */
}
.four {
background: green;
}
<div class="box">
<div class="first">1</div>
<div class="second">2</div>
<div class="third">3</div>
<div class="four">4</div>
</div>
flex-grow
当容器宽度大于容器元素总宽度时,规定容器元素的放大比例。默认为0
,即如果存在剩余空间,也不放大。
注意:当容器设为flex-wrap: nowrap;
不换行的时候,容器宽度有不够分的情况,弹性元素会根据flex-grow
来决定。 弹性容器的宽度正好等于元素宽度总和,无多余宽度,此时无论flex-grow
是什么值都不会生效。
<style>
.box {
width: 800px;
display: flex;
border: 1px solid black;
}
.box div {
width: 100px;
}
.first {
background: red;
/* order: 4; */
flex-grow: 2;
}
.second {
background: blue;
/* order: 3; */
flex-grow: 1;
}
.third {
background: yellow;
/* order: 2; */
}
.four {
background: green;
}
</style>
<div class="box">
<div class="first">1</div>
<div class="second">2</div>
<div class="third">3</div>
<div class="four">4</div>
</div>
flex-shrink
定义了项目的缩小比例(容器宽度<元素总宽度时如何收缩),默认为1,即如果空间不足,该项目将缩小。默认情况下等比例收缩。如果值为0,则该元素不缩小。
<style>
.box {
width: 800px;
display: flex;
border: 1px solid black;
}
.box div {
width: 250px;
}
.first {
background: red;
/* order: 4; */
/* flex-grow: 2; */
flex-shrink: 0;
}
.second {
background: blue;
/* order: 3; */
/* flex-grow: 1; */
flex-shrink: 2;
}
.third {
background: yellow;
/* order: 2; */
}
.four {
background: green;
}
</style>
<div class="box">
<div class="first">1</div>
<div class="second">2</div>
<div class="third">3</div>
<div class="four">4</div>
</div>
flex-basis(个人感觉用处不大)
设置的是元素在主轴上的初始尺寸,所谓的初始尺寸就是元素在flex-grow
和flex-shrink
生效前的尺寸,即设置flex-grow, flex-shrink后该值将失效。默认值为auto
。如设置了width
则元素尺寸由width/height
决定(主轴方向),没有设置则由内容决定。当设置为px的数值时,他会覆盖掉元素自身的主轴方向的宽度/高度。
flex-basis: 0 和 flex-basis: auto的区别:
flex-basis: auto
表示项目的本来大小,当设置为auto
时会根据主轴方向检索该flex-item
的width
或height
值作为flex-basis
的值。如果width
或height
值为auto
,则flex-basis
设置为content
,也就是基于 flex 的元素的内容自动调整大小。flex-basis: 0
相当于指定了宽度或高度(由主轴方向决定)为 0。
flex
flex
属性是flex-grow
, flex-shrink
和 flex-basis
的简写,默认值为0 1 auto
。
一些常用缩写表示:
- flex: 1 = flex: 1 1 0%
- flex: 2 = flex: 2 1 0%
- flex: auto = flex: 1 1 auto
- flex: none = flex: 0 0 auto,常用于固定尺寸不伸缩
align-self
允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items
属性。
可以取:align-self: auto | flex-start | flex-end | center | baseline | stretch
。
默认值为auto
,表示继承父元素的align-items
属性。
<style>
.box {
width: 800px;
height: 300px;
display: flex;
border: 1px solid black;
align-items: center;
}
.box div {
width: 150px;
}
.first {
background: red;
align-self: auto;
}
.second {
background: blue;
align-self: stretch;
}
.third {
background: yellow;
align-self: baseline;
}
.four {
background: green;
align-self: flex-end;
}
</style>
<div class="box">
<div class="first">1</div>
<div class="second">2</div>
<div class="third">3</div>
<div class="four">4</div>
</div>
flex布局的注意点:
- 如果父元素
flex-wrap: nowrap
,即使子元素宽度固定,最后也会被压缩成一行显示。 - 设置父元素
display: flex
和display: inline-flex
的区别。他只是将父元素当场块级元素,还是内联元素。子元素不会受到影响。 - 如果子元素未设置高度,那么父元素
align-items: stretch
。子元素将被拉伸,占满父元素的高度。