likes
comments
collection
share

用flex 实现圣杯布局和双飞翼布局一样的效果 ？？？ 不是很强但是很骚

作者站长头像
站长
· 阅读数 7

谁说flex不能实现圣杯布局和双飞翼布局 进来看骚操作

哈喽哈喽，大家好！！！ 我是你们的金樽清酒。最近啊，我在复习css的内容，为面试做准备。记得高中的时候，在上物理课上大家都学到过左手定则吧。老师在上课讲的时候我就在想一定得左手吧，右手不行嘛，左手磁感线穿手心，右手就磁感线穿手背呗。于是我就把我的想法告诉了我的老师，虽然老师说我傻，但是拉近了与老师的距离，后面老师说一看见你我就想起来你的右手定则。希望大家看了之后不要忘记这个用flex实现圣杯布局的男人。只求博人一笑。

假如您也和我一样，在准备春招。欢迎加我微信shunwuyu，这里有几十位一心去大厂的友友可以相互鼓励，分享信息，模拟面试，共读源码，齐刷算法，手撕面经。来吧，友友们！”

圣杯布局和双飞翼布局

我们都知道圣杯布局和双飞翼布局是实战常用的布局方式，非常的牛逼。它们牛逼的点在什么地方呢？那就是将主体部分的html结构放在前面，这种方式可以将重要的内容展示出来，不会先让用户先看广告。

让我们看一下圣杯布局的小demo

<!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>
    .wrap {
      height: 200px;
      padding: 0 200px 0 200px;
    }

    .left {
      width: 200px;
      height: 100%;
      background-color: aqua;

      float: left;
      position: relative;
      right: 200px;
      margin-left: -100%;
    }

    .content {
      width: 100%;
      height: 100%;
      background-color: cadetblue;
      float: left;

    }

    .right {
      width: 200px;
      height: 100%;
      background-color: bisque;
      float: left;
      margin-left: -200px;
      position: relative;
      right: -200px;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <div class="content">content</div>

    <div class="left">left</div>
    <div class="right">right</div>


  </div>
</body>

</html>

用flex 实现圣杯布局和双飞翼布局一样的效果 ？？？ 不是很强但是很骚

双飞翼布局的小demo

<!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>
    .wrap {
      height: 200px;
    }

    .conatiner {
      height: 100%;
      background-color: cadetblue;
      padding: 0 200px 0 200px;
      float: left;
      width: 100%;
      box-sizing: border-box;
    }

    .left {
      width: 200px;
      height: 100%;
      background-color: aqua;
      float: left;
      margin-left: -100%;
    }

    .right {
      width: 200px;
      height: 100%;
      background-color: bisque;
      float: left;
      margin-left: -200px;
    }
  </style>
</head>

<body>
  <div class="wrap">

    <div class="conatiner">
      <div class="content">content</div>
    </div>

    <div class="left">left</div>
    <div class="right">right</div>

  </div>
</body>

</html>

用flex 实现圣杯布局和双飞翼布局一样的效果 ？？？ 不是很强但是很骚

这两种布局牛逼的地方都是在html结构上将中间主体部分放在前面先加载。那我们能不能用flex来实现呢？

用flex实现圣杯布局和双飞翼布局

<!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>
        .wrap {
            height: 200px;
            display: flex;
        }

        .left {
            width: 200px;
            height: 100%;
            background-color: aqua;
            order: 3;
        }

        .content {
            width: 100%;
            height: 100%;
            background-color: cadetblue;
            flex: 1;
            order: 2;
        }

        .right {
            width: 200px;
            height: 100%;
            background-color: bisque;
            order: 1;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="content">content</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    弹性布局的方法
</body>

</html>

用flex 实现圣杯布局和双飞翼布局一样的效果 ？？？ 不是很强但是很骚 我们都知道，flex可以轻松实现三栏布局，但是主体内容得放在第二个位置。那我就放在第一个位置，然后用flex里面得order给盒子排序也能达到这个效果，就这样轻松用flex完成了圣杯布局和双飞翼布局一样的办法。可能比较搞笑，但是我还是得给它起个名字叫排序布局吧。

总结

三栏布局是很常见的一种布局方式，将左右两边固定宽度，然后中间的主体内容可以自适应宽度。而圣杯布局和双飞翼布局的html结构将主体放在前面，先加载主体内容，在实际应用的时候就不会让用户看广告了。而用弹性布局可以简单的实现三栏布局，但是主体内容没有放在前面，但是可以放在前面，用order属性调整盒子出现的顺序就行了，但博一乐，轻点喷哦，友友们。

假如您也和我一样，在准备春招。欢迎加我微信shunwuyu，这里有几十位一心去大厂的友友可以相互鼓励，分享信息，模拟面试，共读源码，齐刷算法，手撕面经。来吧，友友们！”