(入门/)

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> 的值。