Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 了解BFC的三个特征，flex常用的四个属性演示
Blogger Information
Blog 16
fans 0
comment 1
visits 16929
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
了解BFC的三个特征，flex常用的四个属性演示
半生
Original
872 people have browsed it

BFC

BFC是什么？

  • BFC是块级格式化上下文

  • BFC是相当于html中的一个“独立王国”有权接管内部的全部元素，也包括了“浮动元素”。

  • BFC有三个特质：1.能够包含住浮动元素。2.不会在垂直方向产生外边距的折叠。3.不会与外部的浮动元素重叠。

f

BFC的特征1：包含住浮动元素

  • 代码主体：
    `<body>
     <div class="container">


    </div>
    </body>`

    1.  <div class="box"></div>

  • 代码样式：
    `<style>

  • {


    </style>`

    1.      /* 转为ie盒子 */

    2.      box-sizing: border-box;

    3.  }


    5.  .container {

    6.      /* 虚线 */

    7.      border: 5px dashed;

    8.      border-top-color: red;

    9.      border-bottom-color: green;

    10.  }

    11.  .container > .box {

    12.      color: #000;

    13.      width: 10em;

    14.      height: 5em;

    15.      background-color: gold;

    16.      border: 2px solid;

    17.      /* 设置浮动 */

    18.      float: left;

    19.  }

    20.  /* 容器中的子元素浮动会导致父级容器的高度的消失，也叫容器“高度折叠” */


    22.  /* 这里使用一个新的元素：BFC  */

    23.  /* BFC ：是html页面中的一个独立王国，有权接管内部的全部元素，

    24.  当然也包含了“浮动元素” */

    25.  /* BFC ：块级格式化上下文 */


    27.  /* BFC特征1：能够包含住浮动元素  */

    28.  .container {

    29.      /* overflow:是一个除了visible之外任何值，都会创建一个BFC  */

    30.      overflow: hidden;

    31.  }

  • 效果图

BFC的特征2：不会在垂直方向产生外边距的折叠

  • 代码主体
    `<body>
    <div class="container">


    </div>
    </body>`

    1.  <div class="box box1">盒子1</div>

    2.  <div class="box box2">盒子2</div>

  • 样式代码
    `<style>

    • {


      </style>`

    1.    /* 转为ie盒子 */

    2.    box-sizing: border-box;

    3. }


    5. .container {

    6.    /* 虚线 */

    7.    border: 5px dashed;

    8.    border-top-color: red;

    9.    border-bottom-color: green;

    10. }

    11. .container > .box {

    12.    color: #000;

    13.    width: 10em;

    14.    height: 5em;

    15.    background-color: gold;

    16.    border: 2px solid;

    17.    /* 设置浮动 */

    18.    float: left;

    19. }


    21. /* BFC特征2: 不会在垂直方向上产生外边距的折叠 */

    22. .box.box1 {

    23.    float: none;

    24.    margin-bottom: 1em;

    25.    overflow: auto;

    26. }

    27. .box.box2 {

    28.    float: none;

    29.    margin-top: 2em;

    30.    overflow: auto;

    31. }

  • 效果图1

BFC的特征三：不会与外部的浮动元素重叠

  • 代码主体
    `<body>
    <div class="container">


    </div>
    </body>`

    1.  <img src="https://img.php.cn/upload/course/000/000/001/5f72d73a23372909.png" alt="">

    2.  <p>

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

    4.      BFC的三个特征：1. 能够包含浮动元素。2. 不会在垂直方向上产生外边距的折叠。3. 不会与外部的浮动元素重叠。

    5.      BFC的三个特征：1. 能够包含浮动元素。2. 不会在垂直方向上产生外边距的折叠。3. 不会与外部的浮动元素重叠。

    6.      BFC的三个特征：1. 能够包含浮动元素。2. 不会在垂直方向上产生外边距的折叠。3. 不会与外部的浮动元素重叠。

    7.      BFC的三个特征：1. 能够包含浮动元素。2. 不会在垂直方向上产生外边距的折叠。3. 不会与外部的浮动元素重叠。


    9.      BFC的三个特征：1. 能够包含浮动元素。2. 不会在垂直方向上产生外边距的折叠。3. 不会与外部的浮动元素重叠。BFC的三个特征：1. 能够包含浮动元素。2. 不会在垂直方向上产生外边距的折叠。3. 不会与外部的浮动元素重叠。


    11.      BFC的三个特征：1. 能够包含浮动元素。2. 不会在垂直方向上产生外边距的折叠。3. 不会与外部的浮动元素重叠。

    12.      BFC的三个特征：1. 能够包含浮动元素。2. 不会在垂直方向上产生外边距的折叠。3. 不会与外部的浮动元素重叠。

    13.      BFC的三个特征：1. 能够包含浮动元素。2. 不会在垂直方向上产生外边距的折叠。3. 不会与外部的浮动元素重叠。

    14.      BFC的三个特征：1. 能够包含浮动元素。2. 不会在垂直方向上产生外边距的折叠。3. 不会与外部的浮动元素重叠。

    15.      BFC的三个特征：1. 能够包含浮动元素。2. 不会在垂直方向上产生外边距的折叠。3. 不会与外部的浮动元素重叠。

    16.      BFC的三个特征：1. 能够包含浮动元素。2. 不会在垂直方向上产生外边距的折叠。3. 不会与外部的浮动元素重叠。


    18.      BFC的三个特征：1. 能够包含浮动元素。2. 不会在垂直方向上产生外边距的折叠。3. 不会与外部的浮动元素重叠。BFC的三个特征：1. 能够包含浮动元素。2. 不会在垂直方向上产生外边距的折叠。3. 不会与外部的浮动元素重叠。


    20.      BFC的三个特征：1. 能够包含浮动元素。

    21.  </p>

  • 样式代码
    `<style>

    • {


      </style>`

    1.    /* 转为ie盒子 */

    2.    box-sizing: border-box;

    3. }


    5. .container {

    6.    /* 虚线 */

    7.    border: 5px dashed;

    8.    border-top-color: red;

    9.    border-bottom-color: green;

    10. }


    12. /* BFC特征3：BFC 不会与外部的浮动元素重叠 */

    13. .container img {

    14.    margin: 1em;

    15.    float: left;

    16. }

    17. .container p {

    18.    overflow: hidden;

    19. }

  • 效果图

  • BFC属性的总结:


    1. 1. overflow: hidden / auto /scroll, 不能是visible;

    2. 2. display:flex; display:grid;

    3. 3. position:absolute / fixed;

    4. 4. float:left / right , 不能 none;

flex容器常用的四个属性

flex

1. 术语

  1. 容器: 具有display:flex属性元素

  2. 项目: flex 容器的”子元素”

  3. 主轴: 项目排列的轴线

  4. 交叉轴: 与主轴垂直的轴线

2. 容器属性

序号属性描述
1flex-flow主轴方向与换行方式
2justify-content项目在主轴上的对齐方式
3align-items项目在交叉轴上的对齐方式
4align-content项目在多行容器中的对齐方式

3. 项目属性

序号属性描述
1flex项目的缩放比例与基准宽度
3align-self单个项目在交叉轴上的对齐方式
4order项目在主轴上排列顺序

案例1:flex-flow

  • 代码块

  • 主体
    `<body>
     <div class="container">


     </div>
    </body>`

    1.  <div class="item">item1</div>

    2.  <div class="item">item2</div>

    3.  <div class="item">item3</div>

    4.  <div class="item">item4</div>

    5.  <div class="item">item5</div>

    6.  <div class="item">item6</div>

    7.  <div class="item">item7</div>

    8.  <div class="item">item8</div>

  • 样式代码
    `<style>


    </style>`

    1.  * {

    2.      box-sizing: border-box;

    3.  }

    4.  /* 弹性容器与项目的基础样式 */

    5.  .container {

    6.      height: 20em;

    7.      border: 2px solid aqua;

    8.      padding: 2em;

    9.      margin: 2em;

    10.      display: flex;

    11.  }


    13.  .container > .item {

    14.      width: 8em;

    15.      background-color: gold;

    16.      border: 2px solid #000;

    17.  }


    19.  /* flex-flow: 是主轴方向 的换行方式 */

    20.  /* 主轴方向：row / column /row-reverse /column-reverse */

    21.  /* 换行方式： 不换行：nowrap。 换行：wrap */

    22.  /* 1. 在单行容器中 */

    23.  .container {

    24.      /* 这是默认值，不写也可以 */

    25.      flex-flow: row nowrap;

    26.  }


    28.  /* 2. 多行容器 */

    29.  .container {

    30.      /* 垂直主轴换行 */

    31.      flex-flow: row wrap;

    32.  }


    34.  /* 改变主轴方向 */

    35.  .container {

    36.      /* 在主轴水平排列不换行 */

    37.      flex-flow: column nowrap;

    38.      /* 在主轴水平排列换行 */

    39.      flex-flow: column wrap;

    40.      height: 10em;

    41.      /* 在主轴上水平反向排列 ,靠右边显示*/

    42.      flex-flow: column wrap-reverse;

    43.  }

  • 效果图

案例2：项目在主轴的对齐方式justify-content

  • 代码块

  • 主体
    `<body>
     <div class="container">


     </div>
    </body>`

    1.  <div class="item">项目1</div>

    2.  <div class="item">项目2</div>

    3.  <div class="item">项目3</div>

    4.  <div class="item">项目4</div>

  • 样式代码
    `<style>

    • {


      </style>`

    1.    box-sizing: border-box;

    2. }

    3. /* 设置弹性容器与项目的基础样式 */

    4. .container {

    5.    height: 20em;

    6.    border: 2px solid;

    7.    padding: 2em;

    8.    margin: 2em;

    9.    display: flex;

    10. }


    12. .container > .item {

    13.    width: 5em;

    14.    background-color: gold;

    15.    border: 2px solid;

    16. }


    18. /* 项目在主轴上的对齐方式 */

    19. /* 本质上就是将主轴的剩余空间在项目中进行分配 */

    20. .container {

    21.    /* 默认值 */

    22.    flex-flow: row nowrap;

    23.    /* 在水平不换行排列 */

    24.    flex-flow: column nowrap;


    26.    /* 1.将所有项目视为一个整体 */

    27.    /* . 紧贴起始线排列 */

    28.    justify-content: flex-start;

    29.    /* 紧贴终止线排列 */

    30.    justify-content: flex-end;

    31.    /* 紧贴中间线 */

    32.    justify-content: center;


    34.    /* 2. 将每一个项目视为一个独立的个体 */

    35.    /* 两端对齐：剩余空间在“除了首尾项目之外”的每个项目之间进行平均分配 */

    36.    justify-content: space-between;

    37.    /* 分散对齐：剩余空间在每个项目两侧进行平均分配 */

    38.    justify-content: space-around;

    39.    /* 平均对齐：剩余空间在每个项目之间进行平均分配 */

    40.    justify-content: space-evenly;


    42. }

  • 效果图

案例3：项目在交叉轴的对齐方式 align-items

  • 代码块

  • 主体
    `<body>
     <div class="container">


     </div>
    </body>`

    1.  <div class="item">项目1</div>

    2.  <div class="item">项目2</div>

    3.  <div class="item">项目3</div>

    4.  <div class="item">项目4</div>

  • 样式代码
    <style>

    • {


      / 项目在交叉轴上的对齐方式 /
       .container {


      }
      </style>`

    1.    box-sizing: border-box;

    2. }

    3. /* 设置弹性容器与项目的基础样式 */

    4. .container {

    5.    height: 20em;

    6.    border: 2px solid;

    7.    padding: 2em;

    8.    margin: 2em;

    9.    display: flex;

    10. }


    12. .container > .item {

    13.    width: 5em;

    14.    background-color: gold;

    15.    border: 2px solid;

    16. }

    1. flex-flow: row nowrap;

    2. /* 默认会充满单行容器的高度 */

    3. align-items: stretch;

    4. /* 紧贴起始线 */

    5. align-items: flex-start;

    6. /* 紧贴终止线 */

    7. align-items: flex-end;

    8. /* 紧贴中间线 */

    9. align-items: center;

  • 效果图

案例4：

  • 代码块
    `<body>
     <div class="container">


     </div>`

    1.  <div class="item">项目1</div>

    2.  <div class="item">项目2</div>

    3.  <div class="item">项目3</div>

    4.  <div class="item">项目4</div>

    5.  <div class="item">项目5</div>

    6.  <div class="item">项目6</div>

    7.  <div class="item">项目7</div>

    8.  <div class="item">项目8</div>

    9.  <div class="item">项目9</div>

    10.  <div class="item">项目10</div>

    11.  <div class="item">项目11</div>

    12.  <div class="item">项目12</div>

  • 样式代码
    `<style>


    1.  * {

    2.      box-sizing: border-box;

    3.  }

    4.  /* 弹性容器与项目的基础样式 */

    5.  .container {

    6.      height: 20em;

    7.      border: 2px solid;

    8.      padding: 2em;

    9.      margin: 2em;

    10.      display: flex;

    11.  }


    13.  .container > .item {

    14.      width: 5em;

    15.      background-color: gold;

    16.      border: 2px solid;

    17.  }


    19.  /* 生成多行容器 */

    20.  .container {

    21.      /* 换行 */

    22.      flex-flow: row wrap;


    24.      /* align-content:  控制项目在交叉轴上每一行的间隙; */

    25.       /* 默认充满容器高度 */

    26.      align-content: stretch;

    27.      /* 起始线排列 */

    28.      align-content: flex-start;

    29.      /* 终止线排列 */

    30.      align-content: flex-end;

    31.      /* 中间线 */

    32.      align-content: center;

        /* 两端对齐对齐 */        align-content: space-around;        /* 分散对齐 */        align-content: space-between;        /* 平均对齐 */        align-content: space-evenly;    }</style>`

  • 效果图

flex属性的总结：

    1. flex-flow: 设置主轴方向和项目在主轴的换行方式    2. justify-content: 项目在主轴的对齐方式    3. align-items: 项目在交叉轴上的对齐方式    4. align-content：设置项目在多行容器中的对齐方式
Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post