取值:row(默认) | row-reverse | column | column-reverse
用于控制项目排列方向与顺序,默认row,即横向排列,项目排列顺序为正序1-2-3;row-reverse同为横向排列,但项目顺序为倒序3-2-1。
column 与row相反,为纵向排列,项目顺序为正序1-2-3,column-reverse同为纵向排列,项目顺序为倒序3-2-1。
#header ul{/*ul为空等同于display: flex;flex-direction: row-reverse; 横排倒叙排列*/}
#header ul{display: flex;}
<ul class="r nav">
<li class="r">
<i class="iconfont iconwode"></i><span>欢迎您,陈浩 管理员</span>
</li>
<li class="r">
<i class="iconfont iconyuechi"> </i><a href="">修改密码</a>
</li>
<li class="r">
<i class="iconfont iconshouye"></i><a href="">公司官网</a>
</li>
<li class="r">
<i class="iconfont iconbianji"></i><a href="">退出</a>
</li>
</ul>
取值:nowrap(默认) | wrap | wrap-reverse
用于控制项目是否换行,nowrap表示不换行;
举个例子:比如容器宽度为300px,容器中有6个宽度为60px的项目,nowrap情况下,项目会强行等分容器宽度从而不换行,那么项目实际宽度也就只有50px了,而非我们自己设置的60px.
wrap表示换行,即项目不会等分容器宽度,而是根据自身宽度进行排列,如果超出父容器宽度则自然换行。
wrap-reverse同样表示换行,需要注意的是第一排会紧贴容器底部,而不是我们想象的项目6紧贴容器顶部,效果与wrap相反
flex-flow属性是flex-deriction与flex-wrap属性的简写集合,默认属性为row nowrap,即横向排列,且不换行,如果需要控制项目排列与换行,推荐使用此属性,而非单独写两个。
justify-content属性定义了项目在主轴上的对齐方式
.box{
justify-content:flex-start | flex-end | center | space-between |space-around;
}
align-items属性定义项目在交叉轴上如何对齐。
在下面的例子中,我们会解决一个非常常见的样式问题:完美居中。
解决方案:将 justify-content 和 align-items 属性设置为居中,然后 flex 项目将完美居中:
<style>
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background-color: DodgerBlue;
}
.flex-container>div {
background-color: #f1f1f1;
color: white;
width: 100px;
height: 100px;
}
</style>
该效果只有在flex-wrap换行的情况下生效
容器属性是加在容器上的,那么项目属性呢,就是写在项目上的,就好比容器属性给ul,项目属性给li差不多一个意思。
取值:默认0,用于决定项目排列顺序,数值越小,项目排列越靠前。
.box{width: 300px;height: 200px;background-color: wheat;display: flex;flex-wrap: wrap;}
.box div:nth-of-type(1){width: 60px;height: 60px;background: pink;line-height: 60px;text-align: center;order: 2;}
.box div:nth-of-type(2){width: 60px;height: 60px;background: skyblue;line-height: 60px;text-align: center;order: 1;}
.box div:nth-of-type(3){width: 60px;height: 60px;background: orange;line-height: 60px;text-align: center;order: 0;}
取值:默认0,用于决定项目在有剩余空间的情况下是否放大,默认不放大;注意,即便设置了固定宽度,也会放大。
假设默认三个项目中前两个个项目都是0,最后一个是1,最后的项目会沾满剩余所有空间。
假设只有第一个项目默认为0,后面两个项目flex-grow均为1,那么后两个项目平分剩余空间。
flex-shrink 属性规定某个 flex 项目相对于其余 flex 项目将收缩多少。
<style>
#main {
width: 350px;
height: 100px;
border: 1px solid #000000;
display: flex;
}
#main div {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100px;
}
#main div:nth-of-type(2) {
flex-shrink: 3;
}
</style>
使第二个弹性项目相比其余项目收缩三倍。