这是本人学习的总结，主要学习资料如下
目录
–
1、一般属性
display是css中的一个重要属性，它的值基本决定了元素的布局。这里就对它的值如何影响元素布局做一个总结。
display:block：这是默认值，元素会占据一整行，是个行级元素。display:inline：它让元素不再占据一行，而是一个块级元素。但是元素不能再设置高度和宽度。display:contents：布局方面和block一行，但这个值会让元素的container消失，只展示文字部分。所以那些background-color，border-color等属性都会失效。同时height也会失效。
2、flex系列
首先说一下最基本的display:flex。其他flex的属性都是在这个基础上延展其他的特性。
display:flex修饰的元素仍然是一个行级元素，就被修饰元素的排列而言，它与display:block产生的效果没有区别。
这个属性影响的是子元素的排列。它会让元素变成一个flex的容器。
接下来的重点就是flex容器和普通容器的区别。
2.1、flex容器的维度
一般来说，元素的排列我们需要考虑到两个维度，行和列。
比如下面的例子，div1是第一行的第一列元素，div2是第一行第二列，div3是第二行第一列。
<div style="display: inline-block; background-color: red; height: 40px">div1</div>
<div style="display: inline-block; background-color: green; height: 40px">div2</div>
<div style="display: block; background-color: blue; height: 40px" >div2</div>
但是在flex容器中，我们只需要考虑一维的排列。也就是说flex容器中只有一行或者一列。
还是上面的例子，三个div。把他们放在flex容器中，因为容器只有一行的空间，所以他们三个都在同一行排列。即使div3是display:block。
<div style="display:flex">
<div style="display: inline-block; background-color: red; height: 40px">div1</div>
<div style="display: inline-block; background-color: green; height: 40px">div2</div>
<div style="display: block; background-color: blue; height: 40px" >div2</div>
</div>
2.2、flex其他的关联属性
flex-direction：维度的方向，主要有column和row两个值，表示横着排列元素或者竖着排列元素。flex-wrap： 主要有wrap和unwrap两个值。表示如果容器内元素过多，一行展示不下时，多余的元素是换行展示还是给容器加上滚动条展示。justify-content：比较常用的一个属性，对容器内元素的排版做进一步的要求，向左对齐，中间对齐，向右对齐等。
