viviier

css Flex和BFC 学习笔记

Flex

语法篇

对全部语法感兴趣的可以去查阅文档,这里只说几个常用到的以及个别坑:

  1. display: flex || line-flex
  2. flex-direction: row || row-reverse || column || column-reverse
  3. justify-content: flex-start || flex-end || center || space-between || space-around
  4. align-items: flex-start || flex-end || center || baseline // 这里说一下baseline 以项目的第一行文字对齐
  5. align-content: 同justify-content
  6. order: 数值越小 排列越靠前
  7. flex-basis: 将项目占据固定的空间,有些flex布局才有效果
  8. flex: 一般用于设置项目所占的大小比例
  9. align-self: 同align-items
  10. 另外,设置了flex布局后,子元素的float,clear,vertical-align属性会失效

实例篇

flex圣杯布局
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<div class="container">
<header>header</header>
<div class="main">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
<footer>footer</footer>
</div>
<!-- 对应的css -->
.container {
height: 500px;
display: flex;
flex-direction: column;
text-align: center;
}
.main {
flex: 1;
display: flex;
}
header,footer {
height: 60px;
background-color: #ccc;
line-height: 60px;
}
.left {
flex: 1;
background-color: #f00;
}
.center {
flex: 3;
background-color: #f0f;
}
.right {
flex: 1;
background-color: #0f0;
}

BFC(块级格式化上下文)

BFC是一个独立的布局环境,其中的元素布局不受外界影响。

触发BFC的方式:

  1. position不为static,relative
  2. float的值不为none
  3. overflow的值不为visible
  4. display的值不为inline,block,none

触发BFC能解决什么?

  1. 外边距重叠
  2. 包含浮动(类似清除浮动)
外边距重叠
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="container">
<p>item1</p>
<p>item2</p>
<p>item3</p>
</div>
<!-- 对应的css -->
<style>
.container {
background-color: #ccc;
}
p {
margin: 10px 0;
}
</style>

这样设置的margin就会触发重叠,item2和item以及item3之间的间距并不会相加为20px,而都是10px,想要解决这种问题,就可以触发BFC。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="container">
<p>item1</p>
<div class="new-bfc">
<p>item2</p>
</div>
<p>item3</p>
</div>
<!-- 对应的css -->
.container {
background-color: #ccc;
}
.new-bfc {
overflow: hidden;
}
p {
margin: 10px 0;
}

通过overflow:hidden 触发bfc之后,外边距就不会重叠在一起了。

包含浮动
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="container">
<div class="box">123</div>
<div class="box">123</div>
</div>
<!-- 对应的css -->
.container {
background-color: #ccc;
border:1px solid #ccc;
}
.box {
float: left;
}

浮动塌陷,父元素无法获得能够撑开资源的高度。我们通常使用clearfix hack方法,不过用bfc也可以解决这个问题。

1
2
3
4
5
6
7
8
.container {
background-color: #ccc;
border:1px solid #ccc;
overflow: hidden;
}
.box {
float: left;
}

同样,通过overflow:hidden来触发bfc,解决浮动元素塌陷。

------本文结束感谢阅读------