这是本人学习的总结,主要学习资料如下
目录
- 1、一般属性
- 2、flex系列
- 2.1、flex容器的维度
- 2.2、flex其他的关联属性
–
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
:比较常用的一个属性,对容器内元素的排版做进一步的要求,向左对齐,中间对齐,向右对齐等。