常见布局

一、flex布局（弹性布局）

任何一个容器都能使用。如：.test{display:flex;}。

行内元素也可使用，如：.test{display:inline-flex;}。

-webkit内核的浏览器，需加上前缀-webkit，如：.test{display:-webkit-flex;}

注：设为flex布局后，子元素的float、vertical-align、clear都将没有作用。

1、被设定为flex的元素成为容器，容器的子元素称为项目。
2、6个属性用于容器，即flex-wrap ,flex-flow ,flex-direction ,align-items ,align-content ,justify-content.

2.1 flex-direction

flex-direction属性决定水平方向（从左往右），即主轴方向。

.box{

flex-direction ：row | row-reverse | column |column-reverse;

}

row：默认值，从左往右；

row-reverse：从右往左；

column：从下到上；

column-reverse：从上到下；

2.2 flex-wrap

属性定义如何换行。

flex-wrap：nowrap | wrap | wrap-reverse

nowrap：默认值，不换行

warp：换行

wrap-reverse：反过来换行。即第一行在下面，第二行在上面。

2.3 align-items

属性定义如何在交叉轴上对齐。

align-items：flex-start | flex-end | center | stretch | baseline

flex-strat：交叉轴的起点对齐

flex-end：交叉轴的重点对齐

center：交叉轴的中间对齐

stretch：默认值，若项目未设置高度或设为auto，则占满整个高度

baseline：项目的第一行文字的基线对齐

2.4 justify-content

属性定义在主轴（水平方向）上的对齐方式

justify-content：flex-start | flex-end | center | space-between | space-around

flex-strat：左对齐

flex-end：右对齐

center：居中对齐

space-between：两端对齐，项目间的距离一样

space-around：项目两边的距离相等，所以中间的项目间距离是首位项目与边框的距离的2倍

2.5 flex-flow

flex-flow是flex-direction和flex-wrap的简写属性，默认值为row nowrap。

flex-flow：<flex-direction> | <flex-wrap>

3、有6个属性用在项目上，order，flex-grow，flex-shrink，flex，flex-basis，align-self

3.1 order

属性定义项目的排列顺序，值越小，越靠前。默认为0

order：数值

3.2 flex-grow

属性定义项目的放大比例，默认值为0.

flex-grow：数值

3.3 flex-shrink

属性定义项目的缩小比例，默认值为1

flex-shrink：数值

3.4 flex-basis

属性定义了在分配多余空间的时候，计算项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。

flex-basis：数值 | auto; 默认值为auto

3.5 flex

flex：<flex-grow> <flex-shrink> <flex-basis>后面2项可选，默认值为0 1 auto

3.6 align-self

属性定义单个项目与其他不一样的对齐方式，可覆盖align-items，默认值为auto时，表示继承父元素align-items的值，若没有父元素，则相当于stretch。

align-self：auto | flex-start | flex-end | center | baseline | stretch

二、盒模型

盒模型包括w3c标准盒模型与 ie盒模型。

标准盒模型中，width、height指元素的width，height，不包括边框、内外边距。

ie盒模型中，width、height指元素的width+padding+border。

切换盒模型的方法：box-sizing：content-box | border-box | inherit

box-sizing：content-box；//是w3c盒模型。元素本身宽高

box-sizing：border-box；//是ie盒模型。元素本身宽高+内边距+border

box-sizing：inherit；//继承父元素box-sizing的值

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