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。

1
2
3

#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属性定义了项目在主轴上的对齐方式

1
2
3

.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>