乐趣区

页面基础布局相关知识-居中经典布局

jiezi

前言

PS: 这些只是个人学习, 仅供思路参考, 可能会有缺陷, 并且都在 chrome 中测试, 不一定适用其他浏览器, 而且不考虑 IE 的, 切记!!

PS: 2018/03/23 修改，重整了一下样式，新增了一些方法原理介绍，

建议先了解一下基础知识, 实际上算深入基础了，随意门:
想要清晰的明白（一）：CSS 视觉格式化模型 | 盒模型 | 定位方案 |BFC
想要清晰的明白（二）CSS 盒模型 Block box 与 Line box

基础配置如下, 只是一个基本的父子嵌套元素

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      #parentA,
      #parentB {
        width: 200px;
        height: 200px;
        background-color: red;
      }

      #childA {
        width: 100px;
        height: 100px;
      }

      #childB {
        width: 50px;
        height: 50px;
      }

      #childA,
      #childB {background-color: green;}
    </style>
  </head>

  <body>
    <p> 子元素固定高宽 A </p>
    <div id="parentA">
      <div id="childA">A</div>
    </div>
    <p> 子元素不定高宽 B </p>
    <div id="parentB">
      <div id="childB">B</div>
    </div>
  </body>

</html>

水平居中的各种方法优劣.

margin

因为 B 是块状，所以看不出效果，但是如果不设置宽度其实就默认占满全屏
这是最基础最简单的写法

#child {margin: 0 auto;}
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      #parentA,
      #parentB {
        width: 200px;
        height: 200px;
        background-color: red;
      }

      #childA {
        width: 100px;
        height: 100px;
      }

      #childA,
      #childB {
        margin: 0 auto;
        background-color: green;
      }
    </style>
  </head>

  <body>
    <p> 子元素固定高宽 A </p>
    <div id="parentA">
      <div id="childA">A</div>
    </div>
    <p> 子元素不定高宽 B </p>
    <div id="parentB">
      <div id="childB">B</div>
    </div>
  </body>

</html>

缺點:

1) 需要设置宽度(包括百分比等非固定宽度也可以)

绝对定位

原理：父元素设置相对定位，子元素设置绝对定位，偏移一侧父元素宽度 50%，子元素外边距反向负值调整自身宽度 50%。重点是从中可以看出这个需要知道子元素的宽度；

#parent{position: relative;}
#child {position: absolute; left: 50%; margin-left: -50px;}
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      #parentA,
      #parentB {
        position: relative;
        width: 200px;
        height: 200px;
        background-color: red;
      }

      #childA {
        width: 100px;
        height: 100px;
      }

      #childA,
      #childB {
        position: absolute;
        left: 50%;
        margin-left: -50px;
        background-color: green;
      }
    </style>
  </head>

  <body>
    <p> 子元素固定高宽 A </p>
    <div id="parentA">
      <div id="childA">A</div>
    </div>
    <p> 子元素不定高宽 B </p>
    <div id="parentB">
      <div id="childB">B</div>
    </div>
  </body>

</html>

缺點:

1) 需要设置子元素宽度(包括百分比等非固定宽度也可以)

原理：跟上面原理一样，但是使用了 css3 的 transform 属性可以自动计算子元素宽度调整

#parent{position: relative;}
#child {position: absolute; left: 50%; transform: translate(-50%);}
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      #parentA,
      #parentB {
        position: relative;
        width: 200px;
        height: 200px;
        background-color: red;
      }

      #childA {
        width: 100px;
        height: 100px;
      }

      #childA,
      #childB {
        position: absolute;
        left: 50%;
        transform: translate(-50%);
        background-color: green;
      }
    </style>
  </head>

  <body>
    <p> 子元素固定高宽 A </p>
    <div id="parentA">
      <div id="childA">A</div>
    </div>
    <p> 子元素不定高宽 B </p>
    <div id="parentB">
      <div id="childB">B</div>
    </div>
  </body>

</html>

优点:

1) 不需要知道子元素具体宽度;

缺點:

1) transform, 兼容性一般,IE9+;

原理：设置方向值, 同时给元素一个对应的高宽, 它会自动补全 margin，就能保持居中了。具体原理参见上面文章。

#parent{position: relative;}
#child {position: absolute; right: 0; left:0; margin: auto;}
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      #parentA,
      #parentB {
        position: relative;
        width: 200px;
        height: 200px;
        background-color: red;
      }

      #childA {
        width: 100px;
        height: 100px;
      }

      #childA,
      #childB {
        position: absolute;
        right: 0;
        left: 0;
        margin: auto;
        background-color: green;
      }
    </style>
  </head>

  <body>
    <p> 子元素固定高宽 A </p>
    <div id="parentA">
      <div id="childA">A</div>
    </div>
    <p> 子元素不定高宽 B </p>
    <div id="parentB">
      <div id="childB">B</div>
    </div>
  </body>

</html>

缺點:

1) 需要设置子元素宽度(包括百分比等非固定宽度也可以)

flex

原理：Flex 是 Flexible Box 的缩写，意为 ” 弹性布局 ”，用来为盒状模型提供最大的灵活性。
随意门:
Flex 布局教程：语法篇
Flex 布局教程：实例篇

#parent {
    display: flex;//fles 布局
    justify-content: center;// 主轴上的对齐方式（即水平定位）align-items: flex-start;// 交叉轴的起点对齐（即垂直定位）, 默认 stretch，如果项目未设置高度或设为 auto 会导致子元素高度占满父元素
}
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      #parentA,
      #parentB {
        width: 200px;
        height: 200px;
        background-color: red;
      }

      #childA {
        width: 100px;
        height: 100px;
      }

      #childA,
      #childB {background-color: green;}

      #parentA,
      #parentB {
        display: flex;
        justify-content: center;
        align-items: flex-start;
      }
    </style>
  </head>

  <body>
    <p> 子元素固定高宽 A </p>
    <div id="parentA">
      <div id="childA">A</div>
    </div>
    <p> 子元素不定高宽 B </p>
    <div id="parentB">
      <div id="childB">B</div>
    </div>
  </body>

</html>

真是前端救星, 有了这个可以无视以前各种诡异属性实现的居中

优点:

1) 布局灵活全面

缺點:

1) align-items 默认 stretch，如果项目未设置高度或设为 auto 会导致子元素高度占满父元素
2) 兼容性一般

inline-block+text-align

原理：子元素设置成行内块状元素，父元素设置文本居中对齐也能使其生效

#parent{text-align: center;}
#child {display: inline-block;}
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      #parentA,
      #parentB {
        width: 200px;
        height: 200px;
        text-align: center;
        background-color: red;
      }

      #childA {
        width: 100px;
        height: 100px;
      }

      #childA,
      #childB {
        display: inline-block;
        background-color: green;
      }
    </style>
  </head>

  <body>
    <p> 子元素固定高宽 A </p>
    <div id="parentA">
      <div id="childA">A</div>
    </div>
    <p> 子元素不定高宽 B </p>
    <div id="parentB">
      <div id="childB">B</div>
    </div>
  </body>

</html>

优点:

1) 不需要设置子元素具体宽度;
2) 兼容性好，甚至可以兼容 ie6、ie7;

缺點:

1) 因为 text-align 是继承样式，会导致下级所有元素文字生效

垂直居中的各种方法优劣.

table-cell+vertical-align

原理：table-cell 属性指让标签元素以表格单元格的形式呈现，类似于 td 标签。然后让子元素居中

CSS2.1 表格模型中的元素，可能不会全部包含在除 HTML 之外的文档语言中。这时，那些“丢失”的元素会被模拟出来，从而使得表格模型能够正常工作。所有的表格元素将会自动在自身周围生成所需的匿名 table 对象，使其符合 table/inline-table、table-row、table- cell 的三层嵌套关系。
特征:
1) 同行等高;
2) 宽度自动调节;

#parent{display:table-cell;vertical-align:middle;}

缺点:

1) display 类型有限制, 只有一个元素属于 inline 或是 inline-block（table-cell 也可以理解为 inline-block 水平）水平，其身上的 vertical-align 属性才会起作用。;
2) 父元素不能使用浮动属性;
3) IE8 下需要特殊处理;
4) 这是一个很复杂的属性组合, 下面文章能看的你怀疑人生;

随意门:
CSS 深入研究:display 的恐怖故事解密 (1) – inline-block
CSS 深入研究:display 的恐怖故事解密(2) – table-cell
大小不固定的图片、多行文字的水平垂直居中
我所知道的几种 display:table-cell 的应用
我对 CSS vertical-align 的一些理解与认识（一）
CSS vertical-align 的深入理解 (二) 之 text-top 篇
CSS 深入理解 vertical-align 和 line-height 的基友关系

绝对定位

原优缺点都同上，就不再重复了：

#parent{position: relative;}
#child {position: absolute; top: 50%; margin-top: -100px;}
#parent{position: relative;}
#child {position: absolute; top: 50%; transform: translate(0,-50%);}
#parent{position: relative;}
#child {position: absolute; top: 0; bottom: 0; margin: auto;}

flex

原理：Flex 是 Flexible Box 的缩写，意为 ” 弹性布局 ”，用来为盒状模型提供最大的灵活性。上面也提到过它的交叉轴的起点对齐（即垂直定位）align-items；

#parent{display: flex; align-items: center;}
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      #parentA,
      #parentB {
        display: flex;
        align-items: center;
        width: 200px;
        height: 200px;
        background-color: red;
      }

      #childA {
        width: 100px;
        height: 100px;
      }

      #childA,
      #childB {background-color: green;}
    </style>
  </head>

  <body>
    <p> 子元素固定高宽 A </p>
    <div id="parentA">
      <div id="childA">A</div>
    </div>
    <p> 子元素不定高宽 B </p>
    <div id="parentB">
      <div id="childB">B</div>
    </div>
  </body>

</html>

优点:
1) 布局灵活全面
2) 即使不设置宽度也不会默认占满全行
缺点:
1) 兼容性一般

水平垂直居中的各种方法.

table-cell+inline-block+vertical-align+text-align

#parent {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
#child {display: inline-block;}
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      #parentA,
      #parentB {
        display: table-cell;
        width: 200px;
        height: 200px;
        vertical-align: middle;
        text-align: center;
        background-color: red;
      }

      #childA {
        display: inline-block;
        width: 100px;
        height: 100px;
      }

      #childA,
      #childB {background-color: green;}
    </style>
  </head>

  <body>
    <p> 子元素固定高宽 A </p>
    <div id="parentA">
      <div id="childA">A</div>
    </div>
    <p> 子元素不定高宽 B </p>
    <div id="parentB">
      <div id="childB">B</div>
    </div>
  </body>

</html>

优缺点都已经总结过了，而且基本颠覆了父子元素表现形式还影响后代元素的样式，唯一的优点只有兼容性好了

absolute+transform

#parent {position: relative;}
#child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      #parentA,
      #parentB {
        position: relative;
        width: 200px;
        height: 200px;
        background-color: red;
      }

      #childA {
        width: 100px;
        height: 100px;
      }

      #childA,
      #childB {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: green;
      }
    </style>
  </head>

  <body>
    <p> 子元素固定高宽 A </p>
    <div id="parentA">
      <div id="childA">A</div>
    </div>
    <p> 子元素不定高宽 B </p>
    <div id="parentB">
      <div id="childB">B</div>
    </div>
  </body>

</html>

虽然代码量有点多，兼容性有点瑕疵，但还是相当不错的

flex

#parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      #parentA,
      #parentB {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 200px;
        height: 200px;
        background-color: red;
      }

      #childA {
        width: 100px;
        height: 100px;
      }

      #childA,
      #childB {background-color: green;}
    </style>
  </head>

  <body>
    <p> 子元素固定高宽 A </p>
    <div id="parentA">
      <div id="childA">A</div>
    </div>
    <p> 子元素不定高宽 B </p>
    <div id="parentB">
      <div id="childB">B</div>
    </div>
  </body>

</html>

完美布局，唯一能限制它的只有浏览器了

实战：

定宽 + 自适应

1) float 浮动属性
原理：通过 float 浮动属性让元素脱离文档流，后续元素不能定宽，也不能同使用浮动属性，但可以根据需求决定是或否使用 overflow 防止内容溢出

.left {float: left;}
.right {overflow: hidden;}
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * {margin: 0;padding: 0;}
        .header,
        .footer  {height: 60px;}
        .header{background-color: red;}
        .footer {background-color: yellow;}
        .content {height: 500px; color: #fff;}
        .left,
        .right{height: 100%;}
        .left{width: 100px; float: left; background-color: pink;}
        .right{overflow:hidden;  background-color: black;}
    </style>
  </head>

  <body>
    <div class="contanier">
      <header class="header"></header>
      <div class="content">
        <div class="left"></div>
        <div class="right">Done 当时光已逝 If the day is done , 假如时光已逝，If birds sing no more . 鸟儿不再歌唱，If the wind has fiagged tired , 风儿也吹倦了，Then draw the veil of darkness thick upon me , 那就用黑暗的厚幕把我盖上，Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed
                , 如同黄昏时节你用睡眠的衾被裹住大地，The petals of the drooping lotus at dusk. 又轻轻合上睡莲的花瓣。From the traverer, 路途未完，行囊已空, Whose sack of provisions is empty before the voyage is ended , 衣裳破裂污损，人已精疲力竭。Whose garment is torn and dust-laden , 你驱散了旅客的羞愧和困窘，Whose strength
                is exhausted,remove shame and poverty , 使他在你仁慈的夜幕下，And renew his life like a flower under 如花朵般焕发生机。The cover of thy kindly night . 在你慈爱的夜幕下苏醒。</div>
      </div>
      <footer class="footer"></footer>
    </div>
  </body>

</html>

2) table 属性
原理：通过模拟 table 表现形式达到效果，根据特性还能省略设置元素高宽就能自行占满

.content {display:table; table-layout:fixed;}
.left,
.right{display:table-cell;}
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * {margin: 0;padding: 0;}
        .header,
        .footer  {height: 60px;}
        .header{background-color: red;}
        .footer {background-color: yellow;}
        .content {display:table; table-layout:fixed; height: 500px; color: #fff;}
        .left,
        .right{display:table-cell; height: 100%;}
        .left{width: 100px; background-color: pink;}
        .right{background-color: black;}
    </style>
  </head>

  <body>
    <div class="contanier">
      <header class="header"></header>
      <div class="content">
        <div class="left"></div>
        <div class="right">Done 当时光已逝 If the day is done , 假如时光已逝，If birds sing no more . 鸟儿不再歌唱，If the wind has fiagged tired , 风儿也吹倦了，Then draw the veil of darkness thick upon me , 那就用黑暗的厚幕把我盖上，Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed
                , 如同黄昏时节你用睡眠的衾被裹住大地，The petals of the drooping lotus at dusk. 又轻轻合上睡莲的花瓣。From the traverer, 路途未完，行囊已空, Whose sack of provisions is empty before the voyage is ended , 衣裳破裂污损，人已精疲力竭。Whose garment is torn and dust-laden , 你驱散了旅客的羞愧和困窘，Whose strength
                is exhausted,remove shame and poverty , 使他在你仁慈的夜幕下，And renew his life like a flower under 如花朵般焕发生机。The cover of thy kindly night . 在你慈爱的夜幕下苏醒。</div>
      </div>
      <footer class="footer"></footer>
    </div>
  </body>

</html>

3) flex 布局
原理：Flex 布局，可以简便、完整、响应式地实现各种页面布局。

.content {display:flex;}
.right{flex:1;}
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * {margin: 0;padding: 0;}
        .header,
        .footer  {height: 60px;}
        .header{background-color: red;}
        .footer {background-color: yellow;}
        .content {display:flex; width:100%; height: 500px; color: #fff;}
        .left,
        .right{height: 100%;}
        .left{width: 100px; background-color: pink;}
        .right{flex:1; background-color: black;}
    </style>
  </head>

  <body>
    <div class="contanier">
      <header class="header"></header>
      <div class="content">
        <div class="left"></div>
        <div class="right">Done 当时光已逝 If the day is done , 假如时光已逝，If birds sing no more . 鸟儿不再歌唱，If the wind has fiagged tired , 风儿也吹倦了，Then draw the veil of darkness thick upon me , 那就用黑暗的厚幕把我盖上，Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed
                , 如同黄昏时节你用睡眠的衾被裹住大地，The petals of the drooping lotus at dusk. 又轻轻合上睡莲的花瓣。From the traverer, 路途未完，行囊已空, Whose sack of provisions is empty before the voyage is ended , 衣裳破裂污损，人已精疲力竭。Whose garment is torn and dust-laden , 你驱散了旅客的羞愧和困窘，Whose strength
                is exhausted,remove shame and poverty , 使他在你仁慈的夜幕下，And renew his life like a flower under 如花朵般焕发生机。The cover of thy kindly night . 在你慈爱的夜幕下苏醒。</div>
      </div>
      <footer class="footer"></footer>
    </div>
  </body>

</html>

圣杯布局 & 双飞翼布局（两列定宽 + 一列自适应）

基础结构

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      * {margin: 0;padding: 0;}
      .header,
      .footer  {height: 60px;}
      .header{background-color: red;}
      .footer {background-color: yellow;}
      .content {height: 500px; color: #fff; background-color: green;}
      .left,
      .right,
      .main{height: 100%; float: left;}
      .left{width: 100px; margin-left: -100%; background-color: pink;}
      .main{width: 100%; background-color: blue;}
      .right{width: 100px; margin-left: -100px; background-color: black;}
    </style>
  </head>

  <body>
    <div class="contanier">
      <header class="header"></header>
      <div class="content">
        <div class="main">
          When Day Is Done
          当时光已逝
          If the day is done ,
          假如时光已逝，If birds sing no more .
          鸟儿不再歌唱，If the wind has fiagged tired ,
          风儿也吹倦了，Then draw the veil of darkness thick upon me ,
          那就用黑暗的厚幕把我盖上，Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed ,
          如同黄昏时节你用睡眠的衾被裹住大地，The petals of the drooping lotus at dusk.
          又轻轻合上睡莲的花瓣。From the traverer,
          路途未完，行囊已空,
          Whose sack of provisions is empty before the voyage is ended ,
          衣裳破裂污损，人已精疲力竭。Whose garment is torn and dust-laden ,
          你驱散了旅客的羞愧和困窘，Whose strength is exhausted,remove shame and poverty ,
          使他在你仁慈的夜幕下，And renew his life like a flower under
          如花朵般焕发生机。The cover of thy kindly night .
          在你慈爱的夜幕下苏醒。</div>
        <div class="left"></div>
        <div class="right"></div>
      </div>
      <footer class="footer"></footer>
    </div>
  </body>

</html>

前期主要步骤:
1) content 子元素浮动;
2) main 宽度满屏放在首位, 中间栏要在浏览器中优先展示渲染(这里我没太懂有多大区别???);
3) left 和 right 分别用负边距强行并排;

到目前为止看起来效果已经满足了，实际 left 和 right 这种玩法是覆盖在 main 之上的，导致部分内容被遮盖了；
然后圣杯布局 & 双飞翼布局的差别就在后续步骤了

圣杯布局：
4) content 加上内边距 padding；
5) left 和 right 使用相对定位偏移；

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      * {margin: 0;padding: 0;}
      .header,
      .footer  {height: 60px;}
      .header{background-color: red;}
      .footer {background-color: yellow;}
      .content {height: 500px; padding: 0 100px; color: #fff;  background-color: green;}
      .left,
      .right{position: relative; width: 100px;}
      .left,
      .right,
      .main{height: 100%; float: left;}
      .left{left: -100px; margin-left: -100%; background-color: pink;}
      .main{width: 100%; background-color: blue;}
      .right{right: -100px; margin-left: -100px; background-color: black;}
    </style>
  </head>

  <body>
    <div class="contanier">
      <header class="header"></header>
      <div class="content">
        <div class="main">
          When Day Is Done
          当时光已逝
          If the day is done ,
          假如时光已逝，If birds sing no more .
          鸟儿不再歌唱，If the wind has fiagged tired ,
          风儿也吹倦了，Then draw the veil of darkness thick upon me ,
          那就用黑暗的厚幕把我盖上，Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed ,
          如同黄昏时节你用睡眠的衾被裹住大地，The petals of the drooping lotus at dusk.
          又轻轻合上睡莲的花瓣。From the traverer,
          路途未完，行囊已空,
          Whose sack of provisions is empty before the voyage is ended ,
          衣裳破裂污损，人已精疲力竭。Whose garment is torn and dust-laden ,
          你驱散了旅客的羞愧和困窘，Whose strength is exhausted,remove shame and poverty ,
          使他在你仁慈的夜幕下，And renew his life like a flower under
          如花朵般焕发生机。The cover of thy kindly night .
          在你慈爱的夜幕下苏醒。</div>
        <div class="left"></div>
        <div class="right"></div>
      </div>
      <footer class="footer"></footer>
    </div>
  </body>

</html>

双飞翼布局：
4) main 加上嵌套元素 inner，并设置内边距；

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      * {margin: 0;padding: 0;}
      .header,
      .footer  {height: 60px;}
      .header{background-color: red;}
      .footer {background-color: yellow;}
      .content {height: 500px;  color: #fff;  background-color: green;}
      .left,
      .right{position: relative; width: 100px;}
      .left,
      .right,
      .main{height: 100%; float: left;}
      .left{margin-left: -100%; background-color: pink;}
      .main{width: 100%; background-color: blue;}
      .right{margin-left: -100px; background-color: black;}
      .inner{padding: 100px;}
    </style>
  </head>

  <body>
    <div class="contanier">
      <header class="header"></header>
      <div class="content">
        <div class="main">
          <div class="inner">
            When Day Is Done
            当时光已逝
            If the day is done ,
            假如时光已逝，If birds sing no more .
            鸟儿不再歌唱，If the wind has fiagged tired ,
            风儿也吹倦了，Then draw the veil of darkness thick upon me ,
            那就用黑暗的厚幕把我盖上，Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed ,
            如同黄昏时节你用睡眠的衾被裹住大地，The petals of the drooping lotus at dusk.
            又轻轻合上睡莲的花瓣。From the traverer,
            路途未完，行囊已空,
            Whose sack of provisions is empty before the voyage is ended ,
            衣裳破裂污损，人已精疲力竭。Whose garment is torn and dust-laden ,
            你驱散了旅客的羞愧和困窘，Whose strength is exhausted,remove shame and poverty ,
            使他在你仁慈的夜幕下，And renew his life like a flower under
            如花朵般焕发生机。The cover of thy kindly night .
            在你慈爱的夜幕下苏醒。</div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
      </div>
      <footer class="footer"></footer>
    </div>
  </body>

</html>

从中可以看出之间的分歧在于：
圣杯布局：父元素设置内边距，子元素设置相对偏移，影响区域从上至下
双飞翼布局：目标元素嵌套多层元素，该元素内部设置内边距，影响区域仅限该元素

flex 写法：
1) contanier 设置 flex 布局，至少高度满屏，方向竖直，可以占据全屏效果;
2) content 设置 flex 布局，方向水平，放大比例 1，可以占满宽度；
3) main 放大比例 1，可以占据剩余空间；
4) left 排列顺序放前；

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      * {margin: 0;padding: 0;}
      .contanier{display: flex; min-height: 100vh; flex-direction: column;}
      .header,
      .footer  {height: 60px;}
      .header{background-color: red;}
      .footer {background-color: yellow;}
      .content {display: flex; flex: 1; color: #fff; background-color: green;}
      .left,
      .right{width: 100px;}
      .main{flex: 1;}
      .left{order: -1; background-color: pink;}
      .main{background-color: blue;}
      .right{background-color: black;}
    </style>
  </head>

  <body>
    <div class="contanier">
      <header class="header"></header>
      <div class="content">
        <div class="main">
          When Day Is Done
          当时光已逝
          If the day is done ,
          假如时光已逝，If birds sing no more .
          鸟儿不再歌唱，If the wind has fiagged tired ,
          风儿也吹倦了，Then draw the veil of darkness thick upon me ,
          那就用黑暗的厚幕把我盖上，Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed ,
          如同黄昏时节你用睡眠的衾被裹住大地，The petals of the drooping lotus at dusk.
          又轻轻合上睡莲的花瓣。From the traverer,
          路途未完，行囊已空,
          Whose sack of provisions is empty before the voyage is ended ,
          衣裳破裂污损，人已精疲力竭。Whose garment is torn and dust-laden ,
          你驱散了旅客的羞愧和困窘，Whose strength is exhausted,remove shame and poverty ,
          使他在你仁慈的夜幕下，And renew his life like a flower under
          如花朵般焕发生机。The cover of thy kindly night .
          在你慈爱的夜幕下苏醒。</div>
        <div class="left"></div>
        <div class="right"></div>
      </div>
      <footer class="footer"></footer>
    </div>
  </body>

</html>

抛弃颜色形状等干扰代码, 实际布局用到的 css

.contanier{display: flex; min-height: 100vh; flex-direction: column;}
.content {display: flex; flex: 1; color: #fff; background-color: green;}
.main{flex: 1;}
.left{order: -1;}

全程不需要计算数值，不需要偏移位置，用 flex 布局可以控制方向，比例，顺序，自动计算样式

上面的知识点可以让你应该绝大多数的页面布局了，移动端又会涉及更多知识点，随意门：
viewports 剖析

使用 Flexible 实现手淘 H5 页面的终端适配

退出移动版