search

博客列表 >BFC 和 flex 常用属性的这些知识点你掌握了吗？

BFC 和 flex 常用属性的这些知识点你掌握了吗？

黑色郁金香
黑色郁金香原创
2020年11月06日 19:30:081212浏览

BFC 的全称：（Block Formatting Context）,BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用(块级格式化上下文)。它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。 在进行盒子元素布局的时候，BFC 提供了一个环境，在这个环境中按照一定规则进行布局不会影响到其它环境中的布局。比如浮动元素会形成 BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。 也就是说，如果一个元素符合了成为 BFC 的条件，该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 BFC)，是一个隔离了的独立容器。（在 CSS3 中，BFC 叫做 Flow Root）

一、BFC 的特性：

1.BFC 实际上是一个页面中，相对独立的容器，不会影响外面的子元素。
2.BFC 内部中，块元素按照垂直方向排列，行内元素按照从左向右排序。
3.BFC 与浮动元素不叠加，解决浮动元素对布局的影响。 4.开启 BFC 的元素不会被浮动元素所覆盖 5.开启 BFC 的元素可以包含浮动的子元素 6.计算 BFC 高度时，浮动元素也参与计算。 解决了因浮动导致高度塌陷问题 。

（一）、如何创建元素的 BFC

1、浮动元素，float 除 none 以外的值，left 或者 right …其他的
2、设置元素绝对定位 position: absolute(或者 fixed)
3、display 为以下其中之一的值 inline-blocks，table-cells，table-captions
4、将元素的 overflow 设置为一个非 visible 的值,hidded、auto、scroll

（二）、BFC 的三个作用

1.BFC 解决 margin 塌陷问题：

margin 塌陷问题：在标准文档流中，块级标签之间竖直方向的 margin 会以大的为准，这就是 margin 的塌陷现象。可以用 overflow：hidden 产生 bfc 来解决

BFC塌陷

实例代码

  1.     <style>
  2.         .container {
  3.             overflow: hidden;
  4.             border: 0.2em solid;
  5.             background-color: cornsilk;
  6.             padding: 1em;
  7.         }
  8.         .contner {
  9.             float: left;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <div class="container">
  15.         <div class="contner">
  16.             <img src="/09/02.png" alt="">
  17.         </div>
  18.         <p>免费课程初识HTML(5)+CSS(3)</p>
  19.     </div>

解决问题后

解决问题后

2.BFC 解决外边距折叠问题:

相邻两个元素在垂直方向上外边距会有折叠，当父级转换为 BFC 后，就解决了垂直方向上外边距折叠的问题。

创建BFC是针对父容器，它划定独立王国的边界，如2个div相邻，外边距折叠了，此时在任何一个div上创建BFC，外边距仍然是折叠的。要给其中一个div套个父容器，指明其父容器为BFC才可以防止这2个div外边距折叠。

BFC内所有子孙元素(包括 浮动元素 )都被限定在内容区content(为了显示 这个，上面案例中对背景进行裁切，灰色表示内容区，灰色与边距之间就是padding，它是透明的)，可以清除浮动给布局和容器高度的影响。而定位元素则不受BFC影响。

实例图

解决外边距折叠

实例代码

  1.         <style>
  2.         .container {
  3.             overflow: hidden;
  4.             border: 0.2em dotted;
  5.         }
  6.         .fole {
  7.             overflow: hidden;
  8.         }
  9.         .box.box1 {
  10.             width: 5em;
  11.             height: 5em;
  12.             background-color:lightskyblue;
  13.             color: white;
  14.             margin-bottom: 1em;
  15.         }
  16.         .box.box2 {
  17.             width: 5em;
  18.             height: 5em;
  19.             background-color:lightskyblue;
  20.             color: white;
  21.             margin-top: 2em;
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <div class="container">
  27.         <div class="fole">
  28.         <div class="box box1">第一个盒子</div>
  29.         </div>
  30.         <div class="box box2">第二个盒子</div>
  31.     </div>

3.BFC 不会与外部的浮动元素重叠

在一个容器内图文混排的时候，图片元素进行浮动，文字会包裹图片进行排列。如果给另一个元素创建了 BFC 后，文字将不再包裹图片进行排列，非常利于浮动后的页面布局

实例代码

  1.     <style>
  2.         img {
  3.             float: left;
  4.         }
  5.         .container > p {
  6.             overflow: hidden;
  7.         }
  8.     </style>
  9. </head>
  11. <body>
  12.     <div class="container">
  13.         <img src="/09/202.jpg" alt="">
  14.         <p>体系课-数据可视化入门到精通-打造前端差异化竞争力
  15.             体系课-数据可视化入门到精通-打造前端差异化竞争力
  16.             体系课-数据可视化入门到精通-打造前端差异化竞争力
  17.             体系课-数据可视化入门到精通-打造前端差异化竞争力
  18.             体系课-数据可视化入门到精通-打造前端差异化竞争力
  19.         </p>
  20.     </div>

实例图

实例

总结：

  • BFC,我们需要记得它的特性：独立空间、父容器
  • BFC、子元素都限制在 padding 内、子元素外边距都限制在 border 内，能解决浮动元素带来的高度塌陷和布局的影响，能防止外边距折叠,以及实现浮动下，图文混排元素相互间不影响和重叠。

二、Flex 常用的四个属性

1.:主轴方向和换行方式flex-flow

flex-flow简写是包括flex-direction和flex-wrap两个，在实际应用中我一般都是分开来写。主轴方向可取:row、column，row-reverse、column-reverse。而换行则分为换行wrap和不换行nowrap。

实例

2.justify-content:项目在主轴上的

分配有两种模式:

主轴方向上一行的所有项目为一个整体,行内的所有项目相互挨着，将主轴的剩余空间分配到整体的两侧，若是多行则各行均按规则排列

  • flex-start 紧贴起始线，默认值
  • center 紧贴中间线
  • flex-end 紧贴终止线

主轴方向上一行的所有项目为个体 ,将主轴上的剩余空间分配给个体，若是多行则各行按规则排列。

  • space-between 两端对齐: 剩余空间在”除了首尾项目之外”的每个项目之间进行平均分配
  • space-around 分散对齐: 剩余空间在每个项目”两侧”进行平均分配
  • space-evenly 两端对齐: 平均对齐: 剩余空间在每个项目”之间”进行平均分配

实例

3.项目在交叉轴上的对齐方式align-items

在交叉轴上，项目对齐方式默认值为stretch，会充满主轴方向上的一行容器的高度，即等高列。

取值说明：

  • stretch 主轴方向上一行的所有项目等高；若有多行则各行内的所有项目等高，各行之间的项目不一定等高。
  • flex-start 项目高度由项目内容决定，各行的项目顶部对齐
  • center 项目高度由项目内容决定，各行的项目中部对齐
  • flex-end 项目高度由项目内容决定，各行的项目底部对齐

实例

4.项目在多行容器中的对齐方式align-content

align-content是定义主轴方向上各行在交叉轴上如何分配剩余空间，如果只有主轴上只有一行则无效

分配两种模式:

交叉轴上所有行视为一个整体,将交叉轴上的剩余空间分配到整体的两侧。
  • stretch 默认值，轴线占满整个交叉轴，即缩放行高占满整个交叉轴
  • flex-start 紧贴起始线
  • center 紧贴中间线
  • flex-end 紧贴终止线
    交叉轴上一行视为一个整体，各行视为个体 ,将交叉轴上的剩余空间分配给个体
  • space-between 两端对齐: 剩余空间在”除了首尾项目之外”的每个项目之间进行平均分配
  • space-around 分散对齐: 剩余空间在每个项目”两侧”进行平均分配
  • space-evenly 两端对齐: 平均对齐: 剩余空间在每个项目”之间”进行平均分配

实例

实例代码

  1. <style>
  2.         * {
  3.             box-sizing: border-box;
  4.             font-size: 20px;
  5.         }
  6.          /* flex弹性布局 */
  7.         .container {
  8.             height: 10em;
  9.             border: 1px dotted rgb(236, 30, 243);
  10.             padding: 1em;
  11.             margin: 1em;
  12.             display: flex;
  13.         }
  15.         .container > .item {
  16.             /* 项目属性 */
  17.             width: 5em;
  18.             background-color: rgb(139, 233, 250);
  19.             border: 1px solid rgb(30, 102, 210);
  20.         }
  21.         /* ==================flex-flow: 主轴方向 换行方式 ============= */
  22.       .container {
  23.         /* flex-flow: 主轴方向 换行方式  */
  24.         /* 1、默认值 */
  25.         flex-flow: row nowrap;
  26.         /* 2、多行容器 */
  27.         flex-flow: row wrap;
  28.       }
  29.        /* =================justify-content:项目在主轴上的============= */
  30.        .container {
  31.         /* 1. 将所有项目视为一个整体 */
  32.         /* 紧贴起始线 */
  33.         justify-content: flex-start;
  34.         /* 紧贴终止线 */
  35.         justify-content: flex-end;
  36.         justify-content: flex-end;
  37.         /* 紧贴中间线 */
  38.         justify-content: center;
  39.         /* 2. 将每一个项目视为一个独立的个体 */
  40.         /* 两端对齐: 剩余空间在"除了首尾项目之外"的每个项目之间进行平均分配 */
  41.         justify-content: space-between;
  42.         /* 分散对齐: 剩余空间在每个项目"二侧"进行平均分配 */
  43.         justify-content: space-around;
  44.         /* 平均对齐: 剩余空间在每个项目"之间"进行平均分配 */
  45.         justify-content: space-evenly;
  46.       }
  47. /* =================align-items:项目在交叉轴上的对齐方式============ */
  48. .container {
  49.         flex-flow: row nowrap;
  50.         /* 默认会充满单行容器的高度 */
  51.         align-items: stretch;
  52.         align-items: flex-start;
  53.         align-items: flex-end;
  54.         align-items: center;
  55.         /* 单行容器中,剩余空间只会产生在主轴上, 交叉轴不存在剩余空间 */
  56.       }
  57.       /* ===============align-content:项目在多行容器中的对齐方式============ */
  58.       .container {
  59.         /* 生成多行容器 */
  60.         flex-flow: row wrap;
  61.         /* align-content: 控制项目在交叉轴上每一行的间隙; */
  62.         align-content: stretch;
  63.         align-content: flex-end;
  64.         align-content: flex-start;
  65.         align-content: center;
  66.         align-content: space-around;
  67.         align-content: space-between;
  68.         align-content: space-evenly;
  69.       }
  70.     </style>
  71. </head>
  73. <body>
  74.     <div class="container">
  75.         <div class="item">单元1</div>
  76.         <div class="item">单元2</div>
  77.         <div class="item">单元3</div>
  78.         <div class="item">单元4</div>
  79.         <div class="item">单元5</div>
  80.         <div class="item">单元6</div>
  81.         <div class="item">单元7</div>
  82.         <div class="item">单元8</div>
  83.     </div>

总结：

flex弹性布局 ，flex也是BFC的一种，今天主要学习基本概念和基本属性，理解弹性就是它根据容器大小缩放项目尺寸适应变化。重点探讨了justify-content、align-items和align-content相同点和不同点，并通过firefox浏览器如何查看flex的各部分，更深入理解了flex的容器属性的意义。

上一条：自己第一个PC站点布局设计下一条：循环、函数、获取dom元素方法 dom的遍历方法, 实例演示dataset, classList对象的使用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
黑色郁金香2020-11-06 19:30:592楼
非常感谢周同学的指正，已修改。谢谢啦！
吾逍遥2020-11-05 15:04:331楼
关于外边距折叠，你的案例有点问题，可以实际测试下

相关文章

查看更多