弹性盒子实现圣杯布局

Question

如果使用弹性布局的话可以实现先加载内容的功能吗

 body {
      min-width: 550px;
    }

    #header {
      text-align: center;
      background: #F1F1F1;
    }

    #container {
      display: flex;
    }

    #center {
      background: #ccc;
      flex: 1;
    }

    #left {
      background: yellow;
      width: 200px;
    }

    #right {
      background: red;
      width: 150px;
    }

    #footer {
      text-align: center;
      background-color: #f1f1f1;
    }
    ....
    ....
  <div id="header">this is header</div>
  <div id="container">
    <div id="center" class="column">this is container</div>
    <div id="left" class="column">this is left</div>
    <div id="right" class="column">this is right</div>
  </div>
  <div id="footer">this is footer</div>

这样可以实现内容居中吗

Answer 1

双越 2020-09-17 19:27:06

弹性布局，不好实现内容先加载。

因为一般都是左中右的设置方式，对应到 html 代码，肯定是左侧的先写、然后中间的，最后右侧。

• 提问者 木头就是我呀 #1

  谢谢老师, 因为我看您之前的回复里提到弹性布局了, 所以很好奇这个问题, 自己思考了好久也没想到怎么实现内容放到前面

Answer 2

松树下的熊猫 2020-09-18 09:43:23

你可以试下 是这样的