常用flex布局

总结一下日常工作中用到的几种flex布局

水平垂直居中

 <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      border: 1px solid red;
    }

    .box {
      height: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .box div {
      width: 60px;
      height: 60px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div>11111</div>
    <div>22222</div>
    <div>33333</div>
  </div>
</body>

水平方向2边对齐，垂直居中

html布局一样，我们只看css样式

  .box {
      height: 120px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

左侧固定200px,右侧自适应

html

    <div class="box1">
      <div class="left">左侧200px</div>
      <div class="right">右侧自适应
        <div style="min-width: 800px;"></div>
      </div>
    </div>

css

    .box1 {
      display: flex;
    }

    .box1 .left {
      width: 200px;
      flex-basis: 200px;
      min-width: 200px;
      height: 50vh;
      background-color: #999;
    }

    .box1 .right {
      flex: 1;
      background-color: bisque;
    }

min-width: 200px;

N个元素,最后一个元素靠右

html

    <div class="box2">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>

css


    .box2 {
      display: flex;
    }

    .box2>div {
      width: 60px;
      height: 60px;
      margin-top: 12px;
      margin-left: 12px;
      background-color: red;
    }

    .box2>div:last-child {
      margin-left: auto;
      margin-right: 12px;
    }

margin-left: auto;

一行三列,2边对齐,最后一列不足的时候左对齐

动态计算最后一列是否整除,控制样式,插入空白div

文字溢出无效

父元素 width: 0;，或者不使用flex布局,display: inline-block;