返回文章

BFC 与 FFC

此文是 flex 学习的回忆与补充， 源码地址 BFC 和 FFC 是什么 css 布局的各种 FC 简单介绍：BFC，IFC，GFC，FFC 一文中详细的讲解了 BFC 和 FFC 的概念与区别，总结起来为以下几点 ，格式化上下文，渲染区域的渲染规则会决定子元素的排列 ，块级格式化上下文，1、内部的 box 垂直方向紧挨着；2、内部两个相邻的 box margin 会重叠，3、BFC 不会和 f…

此文是 flex 学习的回忆与补充，源码地址

BFC 和 FFC 是什么

css 布局的各种 FC 简单介绍：BFC，IFC，GFC，FFC 一文中详细的讲解了 BFC 和 FFC 的概念与区别，总结起来为以下几点

  1. FC (Formatting Context):，格式化上下文，渲染区域的渲染规则会决定子元素的排列
  2. BFC (Block Formatting Context):，块级格式化上下文，1、内部的 box 垂直方向紧挨着；2、内部两个相邻的 box margin 会重叠，3、BFC 不会和 float 的元素区域重叠，4、BFC 里面的子元素不会影响外面的元素，5、float：left，right；absolute，fixed 会形成 BFC
  3. FFC (Flex Formatting Context):，自适应格式化上下文，1、display:flex 会形成 FFC，2、与 BFC 的区别是，FFC 不支持 float，不支持一些特殊的伪类

flex 回忆

阮一峰 flex 教程

  • 一、容器的属性
flex-direction  # 排列方向
flex-wrap # 水平方向是否换行 安卓4.3以下不能用，ios8以下不能用
flex-flow # <direction> <wrap>
justify-content #  水平方向上的元素分布
align-items     # 垂直方向上的元素分布
align-content   # 多跟轴线的对齐方式
  • 二、项目的属性
order # 顺序，数值越小，排列越靠前
flex-grow # 放大比例
flex-shrink # 缩小比例
flex-basis  # 占据水平方向的空间，可以和设置长度，代表占据空间
flex # <grow> < shrink> <basis>
align-self # 单个项目的对齐方式  会覆盖align-items属性

flex 与 margin 的那些事

参考Coco的话

  1. BFC 中，margin-top:auto,margin-bottom:auto，那么它们的值为 0
  2. FFC 中，margin:auto 的值会从设置过 justify-content 和 align-self 的 dom 的空闲空间中分配
  3. FFC 中，使用了 margin:auto 的 flex 子项目，其 flex 容器的 justify-content，子项目的 align-self 会失效，如此例
  • 一、使用 inline-flex 加 margin:auto 实现水平垂直居中
<div class="flex0">
  <p>水平垂直居中</p>
</div>

.flex0 {
  width: 100%;
  box-sizing: border-box;
  height: 200px;
  display: flex;
  display: inline-flex;
  display: grid;
  display: inline-grid;
  border: solid 1px black;
}
.flex0 p {
  width: 200px;
  margin: auto;
  text-align: center;
}
  • 二、使用 flex 实现 space-around
<ul class="flex1">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

.flex1 {
  display: flex;
  justify-content: space-around;
  border: solid 1px black;
}
.flex1 {
  display: flex;
}
  • 三、使用 margin 实现 space-around
<ul class="flex2">
  <li>一</li>
  <li>二</li>
  <li>三</li>
</ul>

.flex2 {
  display: flex;
  border: solid 1px black;
  height: 50px;
  /* justify-content: center; */
}
.flex2 li {
  margin: auto;
  /* align-self: center; */
}
  • 四、使用 flex 实现 space-between
<ul class="flex3">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

.flex3 {
  display: flex;
  justify-content: space-between;
  border: solid 1px black;
}
  • 五、使用 margin 实现 space-between
<ul class="flex4">
  <li>⑴</li>
  <li>⑵</li>
  <li>⑶</li>
</ul>

.flex4 {
  display: flex;
  border: solid 1px black;
}
.flex4 li {
  margin: auto;
}
.flex4 li:first-child {
  margin-left: 0;
}
.flex4 li:last-child {
  margin-right: 0;
}
  • 六、使用 flex 实现 align-self:flex-end
<ul class="flex5">
  <li>a-1</li>
  <li>a-2</li>
  <li>a-3</li>
</ul>

.flex5 {
  display: flex;
  justify-content: space-between;
  height: 100px;
  border: solid 1px black;
}
.flex5 li {
  height: 50px;
  background: palevioletred;
}
.flex5 li:last-child {
  align-self: flex-end;
}
  • 七、使用 margin 实现 align-self:flex-end
<ul class="flex1">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

.flex6 {
  display: flex;
  justify-content: space-between;
  height: 100px;
  border: solid 1px black;
}
.flex6 li {
  height: 50px;
  background: goldenrod;
  margin-top: 0;
}
.flex6 li:last-child {
  margin-bottom: 0;
  margin-top: auto;
}
  • 八、使用 margin 实现不规则两端对齐布局
<ul class="flex7">
  <li>导航A</li>
  <li>导航B</li>
  <li>导航C</li>
  <li class="sign">登陆</li>
  <li class="sign">注册</li>
</ul>

.flex7 {
  display: flex;
  border: solid 1px black;
}
.flex7 li {
  width: 25%;
}
.flex7 .sign {
  width: auto;
  margin-left: auto;
}
  • 九、使用 margin 实现容器中高度不固定，指定内容在剩余宽度内居中
<ul class="flex8">
  <li class="header">header</li>
  <div class="overage">
    <li>overage1</li>
    <li>overage2</li>
  </div>
  <li class="footer">footer</li>
</ul>

.flex8 {
  display: flex;
  flex-flow: column wrap;
  height: 200px;
  border: solid 1px black;
}
.flex8 .header {
  align-self: center;
}
.flex8 .footer {
  align-self: center;
}
.flex8 .overage {
  margin: auto 0;
}
  • 十、使用 margin 实现 粘性 footer 布局
<div class="flex9">
  <ul class="navs">
    <li>导航A</li>
    <li>导航B</li>
    <li>导航C</li>
    <li class="sign">登陆</li>
    <li class="sign">注册</li>
  </ul>
  <div class="news">news</div>
  <div class="footer">footer</div>
</div>

.flex9 {
  height: 100px;
  display: flex;
  flex-direction: column;
  background: yellowgreen;
  border: solid 1px black;
}
.flex9 .navs {
  display: flex;
}
.flex9 .navs li {
  width: 25%;
}
.flex9 .navs .sign {
  width: auto;
  margin-left: auto;
}
.flex9 .news {
  align-self: flex-end;
}
.flex9 .footer {
  margin-top: auto;
  /* 固定高度，不会因为空间不足而缩小 */
  flex-shrink: 0;
  height: 30px;
  background: rgb(162, 100, 224);
}
  • 十一、使用 justify-content 和 align-self 实现水平垂直居中
<ul class="flex10">
  <li>flex垂直居中</li>
</ul>

.flex10 {
  display: flex;
  flex-flow: row wrap;
  /* flex-flow: column wrap; */
  height: 50px;
  justify-content: center;
  /* align-items: center; */
  border: solid 1px black;
}
.flex10 li {
  align-self: center;
}

实现效果

flex-margin

参考

探秘 flex 上下文中神奇的自动 margin

暂无评论