flex布局学习记录

flex布局

<section class="flex-wrap">
	<div class="flex-item"></div>
	<div class="flex-item"></div>
	<div class="flex-item"></div>
</section>

标签section作为flex容器，标签div作为flex项

动态尺寸

• 使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度/高度可用。
• 使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。

.flex-wrap{
	display:flex; /*将此标签作为flex容器*/
	flex-direction: column; /*主轴方向，默认row*/
	flex-wrap: wrap; /*子代溢出，加滚动条*/
	flex-flow: column wrap; /*等同于上面两行*/
}

.flex-item{
	flex: 200px; /*宽度至少为200px*/
	flex: 1; /*占用空间的比例；若设置了最小值，则为减去最小值后占用剩余空间的比例*/
}

.flex-item:nth-of-type(3){
	flex:2; /*设置第三个元素占用空间比例，此例中为1/2比例；若设置了最小值，则为减去最小值后占用剩余空间的比例*/
}

设置水平和垂直对齐（主轴与交叉轴）

• 在父内容里面垂直居中一个块内容。

.flex-wrap{
	display: flex;
	align-items: center; /*控制flex项在交叉轴上的位置，默认stretch（沿交叉轴的方向拉伸填充）；center、flex-start、flex-end都会使flex项保持原有高度*/
	justify-content: space-around; /*控制flex在主轴的位置；有flex-start、flex-end、center、space-around(沿主轴的方向均匀分布，两端留下空间)、space-between(同上，两端不留空间)*/
}

flex项排序

• 所有 flex 项默认的 order 值是 0。
• order 值大的 flex 项比 order 值小的在显示顺序中更靠后。

.flex-item:first-child{
	order: 1; /*原第一项移到了最后*/
}