display弹性标签

梓旭 • 2022年7月21日 pm5:30 • 编程

(入门/)

display简介

默认样式横排，

<div class="left-nav">zuo</div>
<div class="right-main">you</div>

使用display:flex;让盒子竖排

.nav {
  display: flex;
}
.left-nav,
.right-main {
  border: 1px solid blue;
}

第一步

找到弹性项的父框，然后给父框添加一个弹性盒子的属性
变成一个容器，容器的儿子级标签变成弹性项
父框原有属性不变
因为弹性项默认高度把父框填满，因此需要检查父框
无高度（父子必须一个有高度）
子项（儿子一级），默认：
横着排成一行，一行排不下不允许换行
高度把父框填满，宽度由内容决定（如果没有内容则为零）；
第二步：
给子项配置弹性属性
弹性项经理三个阶段：初始阶段 =>弹性增长或弹性收缩 =>最终阶段

初始值

有flex属性，则由第三个参数值决定；
如果有属性width，则由width决定
如果没有属性width，则由内容决定
保证最小显示要求
flex的第三个参数 > width > 内容默认宽度
如果有flex值width值没有作用

6.第一参数（超出父框为负值第一个参数无效，需要设置执行第二个参数）

6.1父框剩余为正（真正有剩余），激活第一个参数，第二个参数失效

6.2弹性项从父框

7.第二参数 ”没有超出父框,父框有剩余空间，直接执行第一个参数，第二个参数无效 “

7.1父框剩余为负（“宽度不足，子项溢出”）激活第二个参数，第一个参数失效。

7.2弹性项从父框剩余空间中（缺额）。

7.3按照第二个约定值和初始值的加权比值，不利于口算，

因此尽可能创造有利于第一个参数，

8.非必要尽可能。第三个参数都给 ”0“ 于是父框基本上都是正剩余

于是第二个参数就没有了意义，一般填写为1，防万一有别人改代码，就乱套。

于是第一个参数用于美工设计稿的数字作为比例

.left{
  width: 100px;
  flex: 1 2 200px;
  }

.left-nav {
  width: 100px;
  flex: 270 1 0;
/* .left{
  width: 100px;
  flex: 1 2 200px;
  } */
/*写成这个格式是防止别人动代码，不然乱套*/

.nav {
  display: flex;
}
.left-nav,
.right-main {
  border: 1px solid blue;
}
.left-nav {
  width: 100px;
  flex: 270 1 0;
  /* .left{
  width: 100px;
  flex: 1 2 200px;
  } */
}
.right-main {
  width: 300px;
  flex: 882 1 0;
}

后期补间距不影响弹性盒子

.left-nav {
  width: 100px;
  flex: 270 1 0;
  /* .left{
  width: 100px;
  flex: 1 2 200px;
  } */
  margin-left: 20px;
  margin-right: 20px;
}

扩展延伸，弹性项防止溢出处理

场景

（1）例如：横排，子项A，初始宽度50px，弹性伸长宽度100px，最终宽度50px+100px=150px，如果本子项内放一个宽度200px的图片会怎样呢？显然宽度不够放不下图片，这时图片要么从子项A中溢出，要不把子项A的宽度撑开到200px。如果是撑开到200px，则会导致其它子项的宽度、甚至父框的宽度都跟着乱套。

（2）例如：竖排，高度上也出现上述类似问题，

解决

当弹性项内的内容宽度或者高度，可能存在超过弹性项的大小的风险时，让弹性项启用溢出隐藏处理，规避潜在的隐性bug。

overflow:hidden;

设置定宽实现板块宽度值不变

.left-nav {
  width: 100px;
  flex: 0 0 270px;
  /* .left{
  width: 100px;
  flex: 1 2 200px;
  } */
  margin-top: 24px;
  margin-left: 20px;
  margin-right: 20px;
}

隐藏小屏幕display: none;

@media screen and (max-width: calc(1290px - 1px)) {
  html {
    /* 30px左右间距，900px主体间距 */
    min-width: calc(30px + 900px 30px);
  }
  .banxin {
    width: 990px;

    margin-right: auto;
  }
  .left-nav {
    display: none;
  }
}

弹性盒子-flex-direction: column; 对比 flex-direction: row: ;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html {
        height: 100%;
        min-height: 600px;
      }
      body,
      .container {
        height: 100%;
      }
      .container {
        display: flex;
        flex-direction: column;
        /*对比
        1.flex-direction: row: ;
          (1)子项默认正向横排，一排不下不换行
          (2)子项默认高度把父框填满。宽度初始值决定。没有初始值和内容时，宽度为零
          (3)检查父框的宽度
          (4)初始值的弹性都是宽度，宽度
          (5)设置宽度无效，高度可以设置
        2.flex-direction: column;
          (1)默认竖着排,一行排不下不换行
          (2)子项默认宽度把父框填满。宽度初始值决定。没有初始值和内容时，宽度为零
          (3)检查父框的高度和宽度
          (4)初始值的弹性都是宽度，高度
          (5)设置高度无效，宽度可以设置
        */
        /*目测*/
        background-color: aqua;
      }
      header {
        flex: 0 0 60px;
        border-bottom: 2px solid green;
      }
      .main {
        flex: 2 1 0;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        background-color: #fff;
      }
      footer {
        border-top: 2px solid blue;
        flex: 0 0 calc(18px * 2);
      }
      .left {
        flex: 0 0 200px;
        border: 2px solid red;
        margin: 10px;
      }
      .middle {
        flex: 1 1 0;
        border: 2px solid blue;
      }
      .right {
        flex: 0 0 100px;
        border: 2px solid red;
        margin: 10px;
        height: 40%;
      }
      @media screen and (max-width: calc(1290px - 1px)) {
        html {
          /* 30px左右间距，900px主体间距 */
          min-width: calc(30px + 900px 30px);
        }
        .banxin {
          width: 990px;
          margin-right: auto;
        }
        .left,
        .right {
          display: none;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <header>11</header>
      <span class="main">
        <div class="left"></div>
        <span class="middle"></span>
        <span class="right"></span>
      </span>
      <footer>33</footer>
    </div>
  </body>
</html>

flex: 0 0 100px;其实是三值语法其含义是

三值语法：

第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。
第二个值必须为一个无单位数，并且它会被当作 <flex-shrink> 的值。
第三个值必须为一个有效的宽度值，并且它会被当作 <flex-basis> 的值。

梓旭梓旭

THE END

二维码

响应式布局

< <上一篇

CSS3总结：弹性盒子(flex)、弹性盒子布局

下一篇>>

搜索内容