6-内容布局

Flexbox

flexbox可以控制弹性项如下

1. 大小，基于内容及可用空间
2. 流动方向，水平或垂直，正或者反方向
3. 两个轴向上的对齐与分布
4. 顺序，与代码中的顺序无关

浏览器支持与语法

ie9及其之前版本不支持此属性，其他版本需要添加前缀或者不同的属性

理解flex方向：主轴与辅轴

flexbox可以针对页面中的，某一区域控制元素的排序大小分布及对其，这个区域内盒子可以沿2个方向排列：默认水平，或者垂直。此排列方向称为主轴

辅轴：区域内的盒子可以沿辅轴发生位移或者伸缩。

display:flex;
flex-direction:row-revese;//此属性会将所有元素集中到右侧，且变成从右向左排列

ps：如何不指定大小，容器内的项目会自动收缩。保证不换行

对齐与空间

沿主轴排列叫排布，沿辅轴叫对齐
flexbox不允许通过关键字指定个别排布方式。然而对flexbox的子项指定值为auto的外边距却有不同意义
如果设置某一子项的margin-right:auto;并且该子项右侧还有空间 margin-right会吃掉所有剩余空间，并且把其余的元素挤到最右边

辅轴对齐

对齐个别项

align-self:flex-start;//可以是被选中的元素按照设置对齐

垂直居中对齐

display:flex;
margin:auto;//此项会自动填充

//如果有多个子元素，可以规定元素排列方向
flex-direction:column;

使用margin:auto;可以使元素子项自动填充，保持水平，垂直居中

可伸缩的尺寸

flex:可伸缩的意思;
可伸缩不是体现在容器上的
flex-basis:控制项目在主轴方向，经过修正后的宽高，值可以使长度，百分比（相对于主轴长度）也可以是auto，content支持不怎么好
flex-grow:弹性系数。设置首选大小后，如果还有剩余空间，该系数表示如何处理剩余空间。默认值是0，表示首选大小取得后就不扩展
flex-shrink:弹性系数。与上面相反，表示空间不够了该如何收缩。默认值是1.表示空间不够，所有项都会以首选项尺寸收缩

计算过程
1.检查flex-basis,确定假想的主尺寸
2.确定实际的主尺寸。看空间是否充足或者不够来分配或者收缩各项

flexbox布局

####折行与方向
flex-direction 可以反转方向

多行布局中可伸缩大小

可以利用可伸缩大小均匀填充每一行
flex:1 0 auto;//表示各项均分一份，不伸缩 按照继承宽高

列布局与个别排序

order:-1;可以让设定的项上移或者下移，改变排序方式

嵌套的flexbox布局

给元素设置外边距为auto就可以吃掉多余的空间

给父元素设置了display:flex;如果里面子元素未设置告诉则，默认以最高的计算，等高