CSS弹性（flexible）盒子

弹性盒子        

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成

弹性容器通过display:flex | inline-flex将其定义为弹性容器

弹性容器内包含了一个或多个弹性子元素

弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行

让元素产生一个块级的flex容器盒子。flex容器中的孩子被称为flex items，且用flex布局模型布局

• flex布局是基于flex directions（决定主轴/侧轴方向）

主轴：main axis      纵轴：cross axis

横向边界：main start       main end

纵向边界：cross start     cross end

主轴方向（宽度）不会扩展但是会收缩，而侧轴方向（高度）（未设置时）会进行扩展

• start和end线

弹性盒子中文字的方向不再是由左右决定，而是由start和end线决定。如果flex-direction为row且是英文系统，则主轴的start边在左侧，而end边在右侧。而如果是Arabic系统，这两条线位置是相反的

• 子元素设置position:absolute

该子元素不参与弹性布局，而是根据弹性容器的content-box进行布局

属性        

说明	应用于	默认值	说明
flex-direction	弹性容器（控制子元素布局方向和间距）	row	决定了主轴位置及其方向，row表示水平方向，column表示垂直方向
flex-wrap		no-wrap	定义弹性元素是旋转在同一行还是分成多行 flex-flow: row nowrap 是flex-direction和flex-wrap的缩写
align-content		stretch	侧轴方向元素行的布局，对于单行无效 默认值stretch：如果行内子元素的大小总和小于容器，那么大小为auto的就会自动扩展（但仍限于max-height/max-width）
align-items		stretch	侧轴方向弹性元素的布局，默认stretch，所以侧轴方向会自动扩展充满容器 区别：align-items关注当前弹性容器行内元素的布局；而align-content关注行的布局
justify-content		flex-start	定义主轴方向上的元素间的间距布局
align-self	弹性子元素（调整大小和顺序）	auto	在当前弹性行中重写元素的align-items值
flex-basis		auto	定义一个弹性元素（根据box-sizing的值，默认是content-box）盒子的主轴空间大小
flex-grow		0（比例值）	定义一个弹性元素扩展的比例，相对于弹性盒子中剩余空间的大小（最终大小=扩展+原来设置的）。它决定了子元素在弹性盒子中应该占据的大小 不同的item有不同的比例，需要根据比例间关系进行划分。如4:2=2:1，所以这两个设置是相同的
flex-shrink		1（比例值）	当弹性元素总大小大于弹性盒子，则元素会根据flex-shrink相对于正常布局时超过的部分大小收缩以充满容器 flex: 0 1 auto是flex-grow, flex-shrink, flex-basis的合并
order		0	根据order的值升序定义元素出现的顺序。如果order值一样，则根据源码中出现的顺序

参考：

https://drafts.csswg.org/css-flexbox-1/#flex-container

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html