这是本人学习的总结，主要学习资料如下

–

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：比较常用的一个属性，对容器内元素的排版做进一步的要求，向左对齐，中间对齐，向右对齐等。