Flex布局-margin 妙用技巧

在 flex 布局 中, 通过对子项设置 margin-auto; 的方式去吃掉剩余空间, 这种小技巧在很多时候能极大简化我们的布局哦.

单元素水平垂直居中

如果父容器是 flex, 要实现元素水平垂直居中, 直接在容器项添加:

display: flex;

justify-content: center;

align-items: center;

但其实我们可以直接给子项添加 margin: auto; 就搞定啦!

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>flex + margin</title>

  <style>

    .main {

      width: 500px;

      height: 300px;

      background-color: #ccc;

      display: flex;

    }

    .main div {

      width: 100px;

      height: 100px;

      background-color: pink;

      /* 水平垂直居中 */

      margin: auto;

    }

  </style>

</head>

<body>

  <div class="main">

    <div></div>

  </div>

</body>

</html>

原理就是通过子项的 margin 去占满它 top / right / bottom / left 的空间. 四个方向都能设置, 那对齐方式就自由控制四个方向啦.

某些项靠右对齐

初始是这样的:

a, b, c

现在想要将 c 挤压到最右边去:

a, b,             c

道理是一样的, 直接在子项中给 c 设置 margin-left: right 就搞定.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>flex + margin</title>

  <style>

    .main {

      width: 500px;

      height: 300px;

      background-color: #ccc;

      display: flex;

    }

    .main div {

      width: 100px;

      height: 100px;

      background-color: pink;

    }

    .move {

      margin-left: auto;

    }

  </style>

</head>

<body>

  <div class="main">

    <div>a</div>

    <div>b</div>

    <div class="move">c</div>

  </div>

</body>

</html>

同理, 如果是要移动两个到右边也是一样的操作, 给 b 盒子设置上 margin-left: auto 即可.

a            b, c

同理, 如果是要实现这样的效果, 也是直接找出 c 盒子, 左右 margin: auto; 就搞定.

ab          c       d

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>flex + margin</title>

  <style>

    .main {

      width: 500px;

      height: 300px;

      background-color: #ccc;

      display: flex;

    }

    .main div {

      width: 100px;

      height: 100px;

      background-color: pink;

    }

    .move {

      margin-left: auto;

      margin-right: auto;

    }

  </style>

</head>

<body>

  <div class="main">

    <div>a</div>

    <div>b</div>

    <div class="move">c</div>

    <div>d</div>

  </div>

</body>

</html>

列表布局

子元素横向排列, 可以控制每行排列几个元素, 当排不下时, 自动换行.

就有点像二维布局了, 但这里我们不用 grid. 就非要用 flex 技巧.

如果在父容器上进行操作,

display: flex;

flex-wrap: wrap;

justify-content: space-between;

这样肯定是不行的, 不仅不能控制每一行的元素个数, 且最后一行的排列必定出问题哦.

但还是可以在子项设置 margin, 不过这里要给 margin 固定值哈, 类似设置这样就好:

.main div {

    background-color: pink;

    width: 30px;

    height: 40px;

    margin: 15px 20px;

}

假设我们现在每行要排列 7个盒子, 且知道每个盒子的宽度是定值 30px, 则剩余空间为父容器的宽度 100% 减去盒子宽度乘7即可.

剩余宽度 = 100% - 盒宽 * 7

每个盒子的左右 margin 为:  剩余宽度 / 7 / 2

/* 每个盒子的左右 margin 为:  剩余宽度 / 7 / 2 */

margin: 10px calc((100% - 30px * 7) / 7 / 2);

最后可将每行排列几个设置为变量即可, 主要应用于页面做响应式的场景.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>flex + margin</title>

  <style>

    .main {

      width: 500px;

      height: 300px;

      background-color: #ccc;

      display: flex;

      /* 允许元素换行, 并设置交叉轴, 从起点开始放置元素 */

      flex-wrap: wrap;

      align-content: flex-start;

    }

    .main div {

      width: 40px;

      height: 40px;

      background-color: pink;

      /* --n: 7; */

      /* --n: 10; */

      --n: 6;

      --gap: calc((100% - 40px * var(--n)) / var(--n) / 2);

      margin: 10px var(--gap);

    }

  </style>

</head>

<body>

  <div class="main">

    <div>1</div>

    <div>2</div>

    <div>3</div>

    <div>4</div>

    <div>5</div>

    <div>6</div>

    <div>7</div>

    <div>8</div>

    <div>9</div>

    <div>10</div>

    <div>11</div>

    <div>12</div>

    <div>13</div>

    <div>14</div>

    <div>15</div>

    <div>16</div>

  </div>

</body>

</html>

通过变量来动态计算 margin, 不仅是每行可以控制几个元素排列, 盒子大小也可以做变量, 就很强大哦!

实际项目中熟练应用这几个小技巧, 就已经很够用了. 尤其是左右布局的时候, margin-left: auto; 简直是一个神来之笔呢.