flex-的理解

悦悦妍妍
218 阅读3分钟

给元素设置flex, 并不会对本身有任何影响，只是会影响直接子元素的排序方式,不会影响后代的元素的布局

1.父容器的 justify-content， 默认flex-start

flex-start | flex-end | center |space-between | space-around

2.父容器的 align-items定义了项目在交叉轴上是如何对齐显示的，默认 stretch ,继承父元素的高度(横项排列)|宽度100%（纵向排列）

  • 当然也可以给每个子元素给定高度或者宽度，这时会覆盖默认的 stretch

3.子元素的 flex-grow 默认值为0

  • 如果设置为1，表示当父元素空间有剩余时该元素按照这个比例扩大，占剩余的空间
  • 默认值为0，表示父元素空间有剩余时该元素也不会扩大

4.子元素的 flex-shrink 默认值为1

  • 默认值为1，表示当父元素空间不足时该元素按照这个比例缩小
  • 若设置值为0，表示当父元素空间不足时该元素也不会缩小

5.子元素的 flex-basic 默认值为auto

  • 默认值为auto，且flex-grow flex-shrink 为0下才是自身的宽度或者内容撑开的宽度
  • 值为固定值或者百分比(相对于父元素)会覆盖本身设定的width值
  • 有时希望父盒子的宽度或高度是设置固定的份数，不希望子盒子再次撑大该父盒子的宽度，这时可以设置父盒子
// 下列代码演示父盒子parent在外层父容器有剩余空间时，永远占据2份；就算子盒子宽度超过父盒子的两份，父盒子也不会撑开
.parent{
     overflow: hidden;
     flex: 2 0 0;
}

6.flex 属性 flex-grow属性、flex-shrink属性、flex-basis属性的简写。默认值为：0 1 auto；

  • flex: 0 1 auto 表示父容器有多余空间时该盒子不会扩大，宽度是自身的宽度或者内容撑开的宽度；当父容器空间不足时，按照比例缩小,这个时候盒子本身设置的宽度可以认为是失效的.

  • flex: 1 0 auto 表示父容器有多余空间该盒子会扩大,这个时候盒子本身设置的宽度可以认为是失效的；父容器空间不足时，不会缩小,盒子的宽度是自身的宽度或者内容撑开的宽度.

  • flex: 1 1 auto 表示父容器有多余空间该盒子会扩大,这个时候盒子本身设置的宽度可以认为是失效的；父容器空间不足时，也会缩小,这个时候盒子本身设置的宽度也是失效的

  • flex: 0 0 auto 该盒子不管是父盒子空间有剩余还是不足，宽度永远是自身的宽度或者内容撑开的宽度，不会扩大也不会缩小，当然这个时候auto可以换成固定的px或者百分比

  • 演示1个layout布局，浏览器不会有滚动条，当屏幕高度不够时内容容器本身有滚动条 image.png

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      list-style: none;
    }

    /* 整个滚动条 */
    ::-webkit-scrollbar {
      width: 8px;
      background-color: green;
      border-radius: 8px;
    }

    ::-webkit-scrollbar-thumb {
      background-color: red;
    }

    #main {
      height: 100vh;
      display: flex;
      flex-direction: column;
    }

    .header ul {
      display: flex;
    }

    .header li {
      line-height: 60px;
      flex: 1;
      background-color: pink;
    }

    .main-container {
      flex: 1;
      display: flex;
      overflow: hidden;

    }

    .main-container .left,
    .main-container .right {
      width: 300px;
      /* background-color: red; */
      overflow-y: auto;
    }

    .main-container .center {
      flex: 1;
      background-color: yellow;
      display: flex;
      flex-direction: column;
    }

    .main-container .center .top {
      background-color: purple;
    }

    .footer {
      line-height: 90px;
      background: pink;
    }

    .center .contain {
      overflow: auto;
    }
  </style>
</head>

<body>
  <div id="main">
    <div class="header">
      <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
      </ul>
    </div>
    <div class="main-container">
      <div class="left">
        <div>left</div>
        <div>left</div>
        <div>left</div>
        <div>left</div>
        <div>left</div>
        <div>left</div>
        <div>left</div>
        <div>left</div>
        <div>left</div>
        <div>left</div>
        <div>left</div>
        <div>left</div>
        <div>left</div>
        <div>left</div>
        <div>left</div>
        <div>left</div>
        <div>left</div>
        <div>left</div>
        <div>left</div>
        <div>left</div>
        <div>left</div>
        <div>left</div>
        <div>left</div>
        <div>left</div>
        <div>left</div>
        <div>left</div>
        <div>left</div>
        <div>left</div>
        <div>left</div>
        <div>left</div>
        <div>left</div>
        <div>left</div>
        <div>left</div>
        <div>left</div>
        <div>left</div>
      </div>
      <div class="center">
        <div class="top">top</div>
        <div class="contain">
          <p>contain</p>
          <p>contain</p>
          <p>contain</p>
          <p>contain</p>
          <p>contain</p>
          <p>contain</p>
          <p>contain</p>
          <p>contain</p>
          <p>contain</p>
          <p>contain</p>
          <p>contain</p>
          <p>contain</p>
          <p>contain</p>
          <p>contain</p>
          <p>contain</p>
          <p>contain</p>
          <p>contain</p>
          <p>contain</p>

        </div>
      </div>
      <div class="right">right</div>
    </div>
    <div class="footer">
      <div>footer</div>
    </div>
  </div>
</body>

</html>
avatar
文章
阅读
粉丝