资料：

https://www.cnblogs.com/linfangshuhellowored/p/4934406.html

https://www.cnblogs.com/zhuzhenwei918/p/6058457.html

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

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

display 常见的属性有：none，block，inline，inline-block，inherit，flex。

块级元素和行内元素

示例：

div { border: 1px solid red; } span { border: 1px solid green; } <div style="width:100px;height:100px;margin:10px;">11</div> <div style="padding:10px;">11</div> <div>11</div> <div> <span style="font-size:20px;margin:10px;">111</span> <span style="font-size:30px;padding:10px;">1111</span> <span>11111</span> </div>

div，p，h1，li 是常见的块级元素；span，a，em，img 是常见的行内元素；

块级元素特点：

占一整行，宽度默认充满父元素宽度，修改后仍然占一行；可以设置高度，宽度，margin 和 padding；可以包含其他元素；默认属性为 block；

行内元素特点：

不单独占一行；同级的行内元素会从左到右，从上到下一次排列；不可以设置高，宽；高度一般由字体大小决定，宽度一般由内容的长度决定；margin 和 padding 只对水平方向有效，对竖直方向无效；可以通过设置左右的padding值来改变行内元素的宽度。一般不包含块级元素；默认属性为 inline；

display:none

表示不显示

display:block

使用后元素变为块级元素；

display:inline

使用后元素变为行内元素

display:inline-block

使元素既像 block 设置高、宽，又像 inline 不独占一行；

display:inherit

可以继承父元素的 display 属性

display:flex

是弹性布局（flexible box），设置后，float、clear、vertical-align 属性失效。任何一个元素都可以指定为 flex 布局。

父元素设置了 display:flex 后，（父元素）有以下属性可用：

flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content

其中：flex-direction决定了主轴的方向，其值有：row（默认值，自左向右）/row-reverse（自右向左）/column（主轴为垂直的，自上而下）/column-reverse（自下而上）。

flex-wrap定义一排容不下的时候是否换行，默认为nowrap不换行（一行容不下时，各条目的宽度会按比例缩小）。wrap为正常换行。wrap-reverse是换行时第一行跑到了下面，第二行跑到了上面（暂时还没想好如何描述更清楚）。

flex-flow是flex-direction和flex-wrap的合并写法。默认为row nowrap。

justify-content定义了条目在主轴上的排列方式：有左对齐flex-start（默认值），右对齐flex-end，居中对齐center，两端对齐space-between，等分space-around即每个条目两端的空隙相等。

align-item定义了条目在纵轴上的排列方式：有顶部对齐flex-start，底部对齐flex-end，居中对齐center，strecth（默认值，如果条目不设置具体数值的高度，则高度会沾满整个父元素的高度），baseline，以条目里的第一行文字的基线为准。

align-content定义了多跟轴线时，条目的在纵轴的对齐方式，如果只有一根主轴线则该属性不起作用。值和justify-content的值是一样的。

子元素拥有的属性：

orderflex-growflex-shrinkflex-basisalign-selfflex

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

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。