display: flex弹性布局

我眼中的display: flex

display: flex意思是弹性布局

display: flex; 用于设置或检索弹性盒模型对象的子元素如何分配空间。
注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。

.content{
	display: flex;
}

那么他可以用来做什么呢？

1. 页面行排列布局

• 传统浮动布局如下：

html部分

<div class="content">
	<div class="left">
	</div>
	<div class="right clearfix">
	</div>
</div>

CSS3部分

.left{
	width: 200px;
	height: 300px;
	float: left;
	border: 4px solid #ae4141;
}
.right{
	width: 270px;
	height: 300px;
	float: right;
	border: 4px solid #f90;
}
.clearfix{
	zoom: 1;/*兼容IE*/
}
.clearfix:after{
	content: " ";
	height: 0px;
	line-height: 0px;
	display: none;
	visibility: hidden;
	clear: both;
}

局限：

1. 浮动布局因为常常需要清除浮动增加额外的代码量；
2. 当父级元素未设定时，缩放浏览器窗口可能会改变布局。

用display: flex; 可以解决这些问题

html部分保持原样
CSS3部分如下：

.content{
	display: flex;
}
.left{
	flex: 1;
}
.right{
	flex: 1;
}
.clearfix{
	clear: both;
	zoom: 1;
}

flex: |number|:指的是如何分配父元素。

• 1:1 平分；
• 1:1:1 平分三份；/当然，对应有三个div/
• 1:2 不均分/1:2的比例/

2. 设置div垂直居中

我们都知道一个div在另外一个div中垂直居中可以有多种方式。
display: flex也有这个功能。

html部分

<div class="parent">
	<div class="child">
	</div>
</div>

CSS3部分

.parent{
	display: flex;
	justify-content:center;
	align-items:center;
	width: 200px;
	height: 200px;
	background: #000;
}

.child{
	width: 100px;
	height: 100px;
	background: #fff;
}

以上需要注意的是display: flex是放在父元素内，另外还牵扯到了它的两个属性：

1. justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
2. align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
   新人打卡第2天！