css3--box

css3 新盒模型

box-sizing

box-sizing : border-box;( 怪异盒模型 ) / content-box ( 默认值 )

resize:both;可由鼠标点击移动变化盒子大小；适用于：所有 <’ overflow '> 设置为非visible的元素

display : flex; / inline-flex; 在父级添加后，父级就成为弹性盒子区域，子级就可以使用提供的方法和属性

设置display-flex后，子级盒子默认主轴水平方向排列，

flex-direction 设置主轴方向；
flex-direction : row （ 默认 水平方向）
：column( 竖直方向 )
：row-reverse ( 水平 逆反方向 )
： column-reverse ( 竖直你反方向 )
子级盒子会进行伸缩；

flex-warp 子级盒子换行；
flex-wrap : nowrap ( 默认 不换行 ) ；
：wrap ( 可以换行 )；
：wrap - reverse ( 逆换行 )；

justify-content flex容器水平对其方式；
justify-content : flex-start;起始位置对齐；
：flex-end；结束位置对其；
：center ； 居中；
：space-between;两边剧中对其；
：space-around；元素之间的间距相同；

align-items;flex容器垂直对其方式；
align-items：stretch; 没设置高的情况下撑开到父元素高度（ 默认值）
：center；主要对于，单行元素的对齐方式；
：flex-start;
: flex-end;
: baseline;基于元素文字对齐；

align-content:center;对于多行元素进行对齐处理；

align-self 元素自身对齐方式，权重大于父级对其方式( 除过 align-content多行文本 )；
align-self：stretch; 没设置高的情况下撑开到父元素高度（ 默认值）
：center；
：flex-start;
: flex-end;
: baseline;基于元素文字对齐；
：auto;

flex-grow : 1 ; 当这一行还有剩余空间时，会将剩余空间按照当前设的比例进行分配，撑满本行。

flex-shrink : 3 ( 填比例 自身像素占总像素的 比例 * 多出来的像素 就是要压缩的像素 )

flex-basis : 可以取代 – width ，但是当内容区宽度不够时，flex-basis会将内容区撑开; 同时设置时，flex-basis权重大；

**只写basis或者basis > width,代表元素的最小宽度，设置了width并且basis小于width, 则 basis < 真实宽度 < width; **