煲纸笔记——flex布局

一、Flex 布局是什么？

Flex即为 Flexible Box的缩写，被称为弹性布局。
任何元素都可以设置为弹性布局,包括行内元素，块级元素。
PS: 一旦设置成了flex布局，子元素的float，clear，vertical-align属性都将无效。

.flex{
	display: flex;
}

二、基本概念

采用Flex布局的元素，当一个元素添加了display:flex属性时，这个元素就成为了弹性盒子，该元素所有的子元素都成为了弹性元素。
在弹性容器中存在着两条表示方向的轴，分别为主轴和辅轴，这两条轴互相垂直，主轴默认水平方向且起点在左边，主轴和辅轴会和容器边框产生交点，主轴的起点为main start,结束位置叫做main end，辅轴起点为cross start,结束位置叫做 cross end.
大概情况如下图:

三、弹性布局的属性

3.1 设置在弹性容器上的属性

以下6个属性设置在容器上。

flex-direction 决定主轴的方向
flex-wrap 决定辅轴上的元素是否换行排列
flex-flow: <flex-direction> || <flex-wrap>;
justify-content 定义了项目在主轴上的对齐方式
align-items 定义项目在交叉轴上如何对齐
align-content 多根轴线的对齐方式

• flex-direction 决定主轴的方向
• 可选值为row | row-reverse | column | column-reverse;

	row（默认值）：主轴为水平方向，起点在左端。
	row-reverse：主轴为水平方向，起点在右端。
	column：主轴为垂直方向，起点在上沿。
	column-reverse：主轴为垂直方向，起点在下沿。

• flex-wrap 决定辅轴上的元素是否换行排列
• 可选值有 nowrap | wrap | wrap-reverse;

	nowrap（默认值）不换行
	wrap  换行第一行在上方
	wrap-resverse 换行第一行在下方

nowrap,如下图

wrap-reverse 如下图

wrap如下图

• flex-flow : flex-direction || flex-wrap;
• justify-content 属性定义了项目中在主轴上的对齐方式
• 可选项 justify-content: flex-start | flex-end | center | space-between | space-around
  
• align-items 定义项目在交叉轴上如何对齐

	flex-start：交叉轴的起点对齐。
	flex-end：交叉轴的终点对齐。
	center：交叉轴的中点对齐。
	baseline: 项目的第一行文字的基线对齐。
	stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

• align-content 多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

	flex-start：与交叉轴的起点对齐。
	flex-end：与交叉轴的终点对齐。
	center：与交叉轴的中点对齐。
	space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
	space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
	stretch（默认值）：轴线占满整个交叉轴。

3.2 弹性元素的属性

order  属性定义项目的排列顺序。数值越小，排列越靠前，默认为0
flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
flex-shrink 缩放比例 默认值是1
flex-basis 在分配多余空间前 项目占据的主轴空间 默认值为auto为元素的本来大小
flex :为简写 分别为flex-basis flex-shrink flex-basis ；默认值为 0 1 auto
align-self

参考资料:阮一峰大神的Flex 布局教程：语法篇