search

博客列表 >BFC块和flex基础属性细说

BFC块和flex基础属性细说

G
G原创
2020年10月28日 16:02:321073浏览

BFC块和flex基础属性细说

BFC 特征：

  1. 能够包含住”浮动元素”
  2. 不会在垂直方向上产生外边距的折叠
  3. BFC 不会与外部的浮动元素重叠

下列方式会创建块格式化上下文：

元素 值
根元素 <html>
浮动元素 元素的 float 不是 none
绝对定位元素 元素的 position 为 absolute 或 fixed
行内块元素 元素的 display 为 inline-block
表格单元格 元素的 display 为 table-caption，HTML 表格标题默认为该值
表格标题 元素的 display 为 table-caption，HTML 表格标题默认为该值
匿名表格单元格元素 元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table
overflow 值不为 visible 的块元素
display 值为 flow-root 的元素
contain 值为 layout、content 或 paint 的元素
弹性元素 display 为 flex 或 inline-flex 元素的直接子元素
网格元素 display 为 grid 或 inline-grid 元素的直接子元素
多列容器 元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1
column-span 为 all 的元素始终会创建一个新的 BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）

块格式化上下文包含创建它的元素内部的所有内容.
块格式化上下文对浮动定位（参见 float）与清除浮动（参见 clear）都很重要。浮动定位和清除浮动时只会应用于同一个 BFC 内的元素。浮动不会影响其它 BFC 中元素的布局，而清除浮动只能清除同一 BFC 中在它前面的元素的浮动。外边距折叠（Margin collapsing）也只会发生在属于同一 BFC 的块级元素之间。

  1. <div class="container">
  2.   <div class="box1">容器1</div>
  3.   <div class="box2">容器2</div>
  4. </div>
  1.       .container {
  2.         /* 以下三种都可以消除折叠 */
  3.         overflow: hidden;
  4.         /* overflow: auto; */
  5.         /* overflow: scroll; */
  6.         /* 值不能为visible */
  7.         /* overflow: visible; */
  8.       }

  • BFC 的三个作用

    • 用途一:解决子元素浮动导致高度塌陷问题
    1. .container {
    2.       border: 5px dashed red;
    3.     }
    4.     .container > .box {
    5.       width: 10em;
    6.       height: 5em;
    7.       background-color: cyan;
    8.       border: 1px solid blue;
    9.       /* 将容器中的子元素进行浮动 */
    10.       float: left;
    11.     }
    12.     /* 创建一个BFC容器，解决高度折叠 */
    13.     .container {
    14.       overflow: hidden;
    15.     }

    效果展示：

    解决后的效果：

    • 用途二:解决外边距折叠问题
    1. <div class="container">
    2.   <div class="box1">盒子1</div>
    3.   <div class="box2">盒子2</div>
    4. </div>
    1.     /* 创建一个BFC容器，解决高度折叠 */
    2.     .container {
    3.       overflow: hidden;
    4.     }
    5.     .box1,
    6.     .box2 {
    7.       background-color: cyan;
    8.       width: 10em;
    9.       height: 5em;
    10.     }
    11.     .box1 {
    12.       margin-bottom: 1.5em;
    13.     }
    14.     .box2 {
    15.       margin-top: 1.5em;
    16.     }

    效果展示：

    • 用途 3：解决浮动对布局的影响
  1.     <title>解决浮动对布局排列的影响</title>
  2.     <style>
  3.       .container {
  4.         /* overflow: 是一个除了 visible 之外的任何值, 都会创建一个 "BFC"; */
  5.         overflow: hidden;
  6.       }
  7.       .container img {
  8.         float: left;
  9.       }
  11.       .container p {
  12.         overflow: hidden;
  13.       }
  14.     </style>
  15.   </head>
  16.   <body>
  17.     <div class="container">
  18.       <img
  19.         src="https://img.php.cn/upload/course/000/000/001/5f606a9a7fe99960.jpg"
  20.         alt=""
  21.       />
  22.       <p>
  23.         BFC特征3: BFC不会与外部的浮动元素重叠BFC特征3:
  24.         BFC不会与外部的浮动元素重叠BFC特征3:
  25.         BFC不会与外部的浮动元素重叠BFC特征3:
  26.         BFC不会与外部的浮动元素重叠BFC特征3:
  27.         BFC不会与外部的浮动元素重叠BFC特征3:
  28.         BFC不会与外部的浮动元素重叠BFC特征3:
  29.         BFC不会与外部的浮动元素重叠BFC特征3:
  30.         BFC不会与外部的浮动元素重叠BFC特征3:
  31.         BFC不会与外部的浮动元素重叠BFC特征3:
  32.         BFC不会与外部的浮动元素重叠BFC特征3:
  33.         BFC不会与外部的浮动元素重叠BFC特征3:
  34.         BFC不会与外部的浮动元素重叠BFC特征3:
  35.         BFC不会与外部的浮动元素重叠BFC特征3:
  36.         BFC不会与外部的浮动元素重叠BFC特征3:
  37.         BFC不会与外部的浮动元素重叠BFC特征3:
  38.         BFC不会与外部的浮动元素重叠BFC特征3:
  39.         BFC不会与外部的浮动元素重叠BFC特征3:
  40.         BFC不会与外部的浮动元素重叠BFC特征3:
  41.         BFC不会与外部的浮动元素重叠BFC特征3:
  42.         BFC不会与外部的浮动元素重叠BFC特征3:
  43.         BFC不会与外部的浮动元素重叠BFC特征3:
  44.         BFC不会与外部的浮动元素重叠BFC特征3:
  45.         BFC不会与外部的浮动元素重叠BFC特征3:
  46.         BFC不会与外部的浮动元素重叠BFC特征3:
  47.         BFC不会与外部的浮动元素重叠BFC特征3:
  48.         BFC不会与外部的浮动元素重叠BFC特征3: BFC不会与外部的浮动元素重叠
  49.       </p>
  50.     </div>
  51.   </body>

效果展示：

flex 布局

  • flex 是什么：Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。

  • flex 有那些：弹性容器 和 弹性项目

  • 弹性容器：采用了 flexbox 的区域就叫做 flex 容器。为了创建 flex 容器， 我们把一个容器的 display 属性值改为 flex 或者 inline-flex。 完成这一步之后，容器中的直系子元素就会变为 flex 元素。

  • 弹性项目：弹性容器之中的子元素。

  • 容器属性：

序号 属性 描述
1 flex-flow 主轴方向与换行方式
2 justify-content 项目在主轴上的对齐方式
3 align-items 项目在交叉轴上的对齐方式
4 align-content 项目在多行容器中的对齐方式
  • 项目属性
序号 属性 描述
1 flex 项目的缩放比例与基准宽度
3 align-self 单个项目在交叉轴上的对齐方式
4 order 项目在主轴上排列顺序
  • 案例演示：
  1.     <style>
  2.       /* 样式初始化 */
  3.       * {
  4.         margin: 0;
  5.         padding: 0;
  6.         box-sizing: border-box;
  7.       }
  8.       /* 创建一个弹性容器 */
  9.       .container {
  10.         display: flex;
  11.         width: 10em;
  12.         height: 8em;
  13.         background-color: aquamarine;
  14.         /* 水平垂直居中 */
  15.         justify-content: center;
  16.         align-items: center;
  17.       }
  18.       .container > .box1,
  19.       .box2 {
  20.         background-color: blueviolet;
  21.         width: 3em;
  22.         height: 3em;
  23.       }
  24.     </style>
  25.   </head>
  26.   <body>
  27.     <div class="container">
  28.       <div class="box1"></div>
  29.       <div class="box2"></div>
  30.     </div>
  31.   </body>

效果展示：

flex 主轴方向和交叉轴方向。

  1. 主轴和交叉轴：

  2. flex-flow
    flex-flow属性设置了 flex 容器的布局主轴方向和是否换行，它的各种属性值如下：
值 作用
row 水平从左到右排列
row-reverse 水平从右到左排列，row的颠倒
column 垂直从上到下排列
column reverse 垂直从下到上排列，column的颠倒
row wrap 多行容器，水平排列允许换行
row nowrap 单行容器，水平排列不允许换行

下列演示均以此 html 代码为基础：

  1. <body>
  2.   <div class="container">
  3.     <div class="box">弹性项目1</div>
  4.     <div class="box">弹性项目2</div>
  5.   </div>
  6. </body>
  • row排列方式：
  1.       .container {
  2.         /* 设置主轴方向及是否换行 */
  3.         flex-flow: row nowrap; /*水平 不换行*/
  4.       }

  • row-reverse排列方式：
  1.       .container {
  2.         /* 设置主轴方向及是否换行 */
  3.         flex-flow: row-reverse;
  4.       }

  • column排列方式：
  1. .container{
  2.         flex-flow: column;
  3. }

  • column-reverse排列方式：
  1. .container{
  2.     flex-flow:column-reverser;
  3. }

  1. justify-content

    CSS 语法：

  1. justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

  • 属性值

    | 值| 描述|
    | ——- | ——— |
    | flex-start| 默认值项目位于容器的开头。|
    | flex-end| 项目位于容器的结尾。|
    | center| 项目位于容器的中心。|
    | space-between| 项目位于各行之间留有空白的容器内。|
    | space-around| 项目位于各行之前、之间、之后都留有空白的容器内。|
    | inherit| 设置该属性为它的默认值|
    | initial| 从父元素继承该属性|

  • flex-start、flex-end

  1. /* 沿起始线开始排列：flex-start */
  2. .container{
  3.   flex-flow:column；
  4.   justify-content:flex-start；
  5. }

  1. /* 沿终止线开始排列：flex-end */
  2. .container{
  3.   flex-flow:column；
  4.   justify-content:flex-end；
  5. }

  • center
  1. .container{
  2.   flex-flow:column;
  3.   justify-content:center;
  4. }

  • space-between
  1. .container {
  2.   flex-flow: column;
  3.   justify-content: space-between;
  4. }

  • space-around
  1. .container{
  2.     flex-flow:column;
  3.     justify-content:space-around;
  4. }

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

    align-items 属性定义 flex 子项在 flex 容器的当前行的侧轴（纵轴）方向上的对齐方式。

CSS 语法

  1. align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;
值 描述
stretch 默认值。元素被拉伸以适应容器。
center 元素位于容器的中心。
flex-start 元素位于容器的开头。
flex-end 元素位于容器的结尾。
baseline 元素位于容器的基线上。
initial 设置该属性为它的默认值。
inherit 从父元素继承该属性。
  • stretch
  • center
  1. .container{
  2.         flex-flow: row;
  3.         align-items: center;
  4. }

  • flex-start
  1. .container{
  2.         flex-flow: row;
  3.         align-items: flex-start;
  4. }

  • flex-end
  1. .container{
  2.         flex-flow: row;
  3.         align-items: flex-end;
  4. }

  • baseline
  1. .container{
  2.         flex-flow: row;
  3.         align-items: baseline;
  4. }

  1. align-content
值 描述
stretch 默认值。元素被拉伸以适应容器。
center 元素位于容器的中心。
flex-start 元素位于容器的开头。
flex-end 元素位于容器的结尾。
space-between 元素位于各行之间留有空白的容器内。
space-around 元素位于各行之前、之间、之后都留有空白的容器内。
initial 设置该属性为它的默认值。
inherit 从父元素继承该属性。
上一条：天勒！这个装修网站pc端的首页布局原形，太有创意了！下一条：弹性盒子flex容器的四个属性，要这样理解才对！
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多