Flex弹性布局
Flex弹性布局
flex-direction
取值：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>flex-wrap属性
取值：nowrap(默认) | wrap | wrap-reverse
用于控制项目是否换行，nowrap表示不换行；
举个例子：比如容器宽度为300px，容器中有6个宽度为60px的项目，nowrap情况下，项目会强行等分容器宽度从而不换行，那么项目实际宽度也就只有50px了，而非我们自己设置的60px.
wrap表示换行，即项目不会等分容器宽度，而是根据自身宽度进行排列，如果超出父容器宽度则自然换行。
wrap-reverse同样表示换行，需要注意的是第一排会紧贴容器底部，而不是我们想象的项目6紧贴容器顶部，效果与wrap相反
flex-flow属性
flex-flow属性是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap，即横向排列，且不换行，如果需要控制项目排列与换行，推荐使用此属性，而非单独写两个。
justify-content属性
justify-content属性定义了项目在主轴上的对齐方式
.box{
justify-content:flex-start | flex-end | center | space-between |space-around;
}- flex-start（默认值）：左对齐
- flex-end：右对齐
- center：居中
- space-between:两端对齐，项目之间的间隔都相等
- space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items属性
align-items属性定义项目在交叉轴上如何对齐。
- flex-start：交叉轴的起点对齐。
- flex-end：交叉轴的终点对齐。
- center：交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
完美居中
在下面的例子中，我们会解决一个非常常见的样式问题：完美居中。
解决方案：将 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>align-content
该效果只有在flex-wrap换行的情况下生效
- flex-start：与交叉轴的起点对齐。
- flex-end：与交叉轴的终点对齐。
- center：与交叉轴的中点对齐。
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
- space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch（默认值）：轴线占满整个交叉轴。
项目属性
容器属性是加在容器上的，那么项目属性呢，就是写在项目上的，就好比容器属性给ul，项目属性给li差不多一个意思。
order
取值：默认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;}flex-grow
取值：默认0，用于决定项目在有剩余空间的情况下是否放大，默认不放大；注意，即便设置了固定宽度，也会放大。
假设默认三个项目中前两个个项目都是0，最后一个是1，最后的项目会沾满剩余所有空间。
假设只有第一个项目默认为0，后面两个项目flex-grow均为1，那么后两个项目平分剩余空间。
flex-shrink
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>
使第二个弹性项目相比其余项目收缩三倍。