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，解决浮动元素塌陷。

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