html中关于display值以及display：flex弹性布局

个人觉得相对于用float浮动布局（浮动布局一般适用于文字环绕）弹性布局会更加方便简洁而且强大（这是一篇长长的文章，前前面是值以及属性表，后面是各个属性的效果图）

一、属性及其值

属性	描述与值
display	指定 HTML 元素盒子类型： none: 表示此元素不会被显示。 block: 元素将显示为块级元素，前后会带有换行符。 Inline:元素会被显示为内联（行内）元素，元素前后没有换行符 inline-block: 行内块元素。 list-item: 元素会作为列表显示
flex-direction	指定了弹性容器中子元素的排列方式： row（默认值）：水平方向排列，起点在左端。 row-reverse：反向水平排列，起点在右端。 column：纵向垂直排列，起点在上方。 column-reverse：反向纵向垂直排列，起点在下方。
justify-content	设置弹性盒子元素在主轴（水平排列是x轴,垂直排列是y轴）方向上的对齐方式： flex-start（默认值）：左对齐 flex-end：右对齐 center：居中 space-between：两端对齐，项目之间的间隔都相等。 space-around：每个元素两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍。 space-evenly:每个间隔一样大小
align-items	设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式： flex-start：右上 flex-end：右下 center：居中放置 baseline：如元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。 stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制
flex-wrap	设置弹性盒子的子元素超出父容器时是否换行： nowrap（默认）：不换行。 wrap：换行，第一行在上方。 wrap-reverse：反向换行，第一行在下方。
flex-flow	flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
align-content:	只有一根轴线，那么该属性将不起作用，即容器内必须要有多行的项目，该属性才能有效果效果：（一般位置与flex-directio的值相关） flex-start：与交叉轴的起对齐与flex-start类似。 flex-end：与交叉轴的终点对齐与flex-end类似。 center：与交叉轴的中点对齐。 space-between：位置与与交叉轴两端对齐，轴线之间的间隔平均分布。 space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 stretch（默认值）：轴线占满整个交叉轴（flex-directio平行占满父容器的宽，垂直则占满父容器的高）。
order	设置弹性盒子的子元素排列顺序。(Internet Explorer 和 Safari 不支持 order 属性)
align-self	覆盖容器的 align-items 属性也就是重写了容器的 align-items 属性（允许单个项目有与其他项目不一样的对齐方式）
flex	设置弹性盒子的子元素如何分配空间。
flex-basis	规定弹性项目的初始长度
flex-shrink	flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-grow	定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大