flex弹性盒

FLEX布局

Flex容器：采用 Flex 布局的元素的父元素；
Flex项目：采用 Flex 布局的元素的父元素的子元素；
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
Flex布局中默认水平从左到右为主轴，可通过flex-direction属性修改主轴的方向

flex容器属性

​ 1、display:flex

注意:设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

​ 2、flex-direction属性 决定主轴的方向（即项目的排列方向）

flex-direction:
属性值： row 				（水平为主轴，从左到右排列）
		row-reverse			（水平为主轴，从右到左方向排列）
 		column				（垂直方向为主轴，从上到下方向排列）
		column-reverse;		（垂直方向为主轴，从下到上方向排列）

flex-direction:row
flex-direction:row-reverse
flex-direction:column
flex-direction:column-reverse

<style>
        section{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            margin:100px auto;
            display: flex;
            flex-direction:row;/*需添加在父级元素上*/
        }
        span{
            width: 20px;
            height: 20px;
            background: yellowgreen;
            text-align: center;
            line-height: 20px;
            border-radius: 50%;
            color: #fff;
            font-size: 15px;
        }
    </style>

​ 3、flex-wrap属性，定义子元素是否换行显示

flex-wrap: 
属性值：nowrap				（默认，不换行）
	 	wrap 				（换行）
 		wrap-reverse;		（换行，第一行在下方）

​ 4、 justify-content属性 定义了项目在主轴（）上的对齐方式。

justify-content:
属性值： flex-start					（主轴的开始位置对齐）
		 flex-end					（主轴的结束方向对齐）
		 center						（居中对齐）
		 space-between				（两端对齐，中间空白处自适应）	
		 space-around;				（主轴方向一一对其。与space-between不同的是space-around两端也会分配空白空间）

justify-content:flex-start
justify-content: flex-end
justify-content:center
justify-content: space-between
justify-content:space-around;(两边有空白区域)

​ 5、align-items属性定义项目在交叉轴（侧轴）上如何对齐。

align-items: flex-start				(侧轴的开始位置对齐)
			 flex-end				(侧轴的结束方向对齐)
			 center					(居中对齐)
			 baseline				(基线对齐)
			 stretch				(默认值,如果没有写项目高度会默认和块元素等高)

​ 6、align-content属性定义了多根轴线的对齐方式。对于单行子元素，该属性不起作用。

align-content: flex-start | flex-end | center | space-between | space-around | stretch;
align-content在侧轴上执行样式的时候，会把默认的间距给合并。对于单行子元素，该属性不起作用

flex项目属性

1、align-self属性

Internet Explorer 和 Safari 浏览器不支持 align-self 属性
说明：
	align-self 属性规定灵活容器内被选中项目的对齐方式。
	注意：align-self 属性可重写灵活容器的 align-items 属性。
	属性值
		auto 		默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。
		Stretch		元素被拉伸以适应容器。
		Center		元素位于容器的中心。
		flex-start		元素位于容器的开头。
		flex-end		元素位于容器的结尾。

2、order

说明：
	number排序优先级，数字越大越往后排，默认为0，支持负数。

3、flex

说明：
	复合属性。设置或检索弹性盒模型对象的子元素如何分配空间
	详细属性值：
		缩写「flex: 1」, 则其计算值为「1 1 0%」
		缩写「flex: auto」, 则其计算值为「1 1 auto」
		flex: none」, 则其计算值为「0 0 auto」
		flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」，即「flex」初始值

4、flex - xxx

flex-grow
	一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
flex-shrink
	一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
flex-basis
	项目的长度