flex 布局

flex 布局

首先需要为父元素设置 display: flex; 是为了给父元素设置伸缩效果，控制子元素排列方式。
display: flex 是由主轴跟垂轴来进行排列的。

主轴默认是水平方向从左到右排列，也可以设置成从右到左排列。

justify-content 控制主轴排序方式

flex-start 		左对齐 (默认值)
flex-end		右对齐
center			居中
space-between	两端对齐 (两侧没有边距)
space-around 	两端对齐	(两侧有边距)

垂轴默认是垂直方向从上到下排列，也可以设置成从下到上排列。

align-items 控制垂轴排序方式

stretch		元素被拉伸以适应容器 (默认值)
flex-start	元素位于容器的开头
flex-end	元素位于容器的结尾
center		元素位于容器的中心
baseline	元素位于容器的基线上

flex-direction 决定主轴的排列方向

row				左边开发排列，从左到右
row-reverse		右边开始排列，从右到左
column			垂轴变成了水平方向，从上到下
column-reverse	垂轴变成了水平方向，从下到上

水平垂直居中

div {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column; /* 垂轴变成水平方向 */
}

左右排版分布

<div>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>
	<span>登录/注册</span>
</div>

div {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
ul {
	display: flex;
	align-items: center;
}

flex 属性，可以设置元素宽度，包含 flex-grow， flex-shrink， flex-basis。

flex-grow 		定义增长的量
flex-shrink		定义缩减的量
flex-basis		增加和缩减的基准

假如要设置左右两栏布局，左边 280px 固定尺寸，右边自适应，那左边可以设置 flex: 0 0 280px; 固定左边尺寸，右边区域设置 flex: 1 0 0; 增长份子设置为 1 ，这样就把剩余的空间都给右边。
我们可以配合 flex-wrap 属性，flex-wrap: wrap; 使右边在宽度不够的情况换行,如果右边区域设置 flex: 1 0 280px; 那么右边可用宽度小于 280px 就会换行，这样宽度足够的时候实现水平方向两栏布局。

<main>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>
	<article>
		很多内容
	</article>
</main>

main {
	display: flex;
	flex-wrap: wrap;
}
ul {
	flex: 0 0 280px;
}
article {
	flex: 1 0 280px;
}