伸缩盒模型-新

第三版标准，和旧版大同小异，只是添加了几个属性，更改了些细节，推荐和旧标准一起写防止不兼容

下面的属性需要前置条件，display: flex;依然需要前缀

flex

flex-grow,flex-shrink,flex-basis的集合属性

none: none的计算值为0 0 auto

1: 计算值为1 1 0%

auto: 计算值为1 1 auto

o auto: 计算值为0 1 auto

flex-grow

定义扩展比例，和box-flex类似,注意：新版的是分配所有剩余空间，而不是分配剩余空间，只生效于父元素大于子元素所有长度和的情况

取值:

number: 定义扩展比例，不允许负值，默认0

这里总共有600px,按1:2:3的比例，第一个分到100,第二个分到200，第三个分到300，和旧标准不一样。旧标准可以设置width: 0;来模仿新标准

flex-shrink

定义伸缩比例，生效于父元素的长度小于子元素和的长度，flex-shrink,flex-grow加起来等于box-flex

取值:

number: 定义收缩比例，不允许负值，默认0

父DIV宽度200，子DIV宽度100，收缩比例为1：2：3。100*3-200=100;第一个div=100-100/6*1=82.328。第二个div=100-100/6*2=64.672,第三个div=100-100/6*3=47

flex-basis

如果子元素之和大于父元素，则根据设置的基准值按比例伸缩剩余空间

取值:

length: 用长度值来定义基准值
percentage: 用百分比定义基准值
auto(默认): 取决于其他影响宽度的属性
content: 基于内容自动计算

按1:2:1的比例进行分配

flex-flow

flex-direction,flex-wrap的复合属性

flex-direction

定义对齐方式,旧标准的box-orient+box-direction合在一起就是这个属性的效果

取值:

row(默认): 主轴与行内轴方向作为默认的书写模式。即横向从左到右排列（左对齐）
row-reverse: 对齐方式与row相反
column: 主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。
column-reverse: 对齐方式与column相反。

flex-direction:row

flex-direction:row-reverse

flex-direction:column

flex-direction:column-reverse

flex-wrap

当子元素定宽或定高的时候，flex-shrink:0;可能会产生溢出的情况，flex-wrap定义是否折行

取值:

nowrap: flex容器为单行。该情况下flex子项可能会溢出容器
wrap: flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse: 反转 wrap 排列

子元素超过父元素宽度，且收缩比例为0，溢出

flex-wrap: warp;子元素折行

flex-wrap: warp-reverse;子元素折行且反转

align-content

设置多行盒模型的对齐方式

取值:

flex-start

各行向弹性盒容器的起始位置堆叠

flex-end

各行向弹性盒容器的结束位置堆叠

center

各行向弹性盒容器的中间位置堆叠

space-between

各行在弹性盒容器中平均分布,如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'flex-start'

space-around

各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'center'

stretch

各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于'flex-start'。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。

align-content:flex-start

align-content:flex-end

align-content:center

align-content:space-between

align-content:space-around

align-content:strecth

align-items

和旧标准的box-align类似，设置侧轴方向上的对齐方式

取值:

flex-start: 子元素从开始方向排列
center: 子元素居中对齐
flex-end: 结束位置对齐
baseline: 子元素基线对齐
stretch(默认值): 自适应父元素尺寸

align-items: start;

align-items: center;

align-items: end;

align-items: baseline;

align-items: stretch;

align-self

用于子元素的对齐方式，可以使子元素拥有自己的对齐方式，而不是有父元素固定一个对齐方式

和align-items基本类似，不过是作用于子元素

取值:

auto

如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。

flex-start

弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界

flex-end

弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

center

弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

baseline

如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。