html - 移除 flex 容器左右两侧的间隙

Question

我有这个包含左框、中框和右框的 flex 容器。

我应用 flex-start 对齐以重新排列块从位置 3 到位置 3 以及从位置 1 到位置 2，而由图像组成的中心框移动到列中的位置 1。

最初，这适用于移动版布局。flex 容器上方的标题在右侧有一个绝对定位的非画布菜单切换按钮，并且高度设置为 auto。

应用代码后，我发现移动布局在左侧框旁边和右侧框旁边显示奇怪的间隙。

假设左框和右框具有绝对定位以适应桌面版本中元素的复杂放置（即重叠的 web 3.0 样式现代块），其中由于绝对位置，左框和右框都应用了 margin-left，我认为 flex-start 属性会消除屏幕左右两侧的间隙（就像“鬼间隙”）。

理想情况下，我希望左框和右框或整个容器以及标题粘贴到屏幕的左侧和右侧。

这里有一些伪代码供参考：

HEADER
         header{height: auto;}

CONTAINER
         .container{width:750px; margin:auto; background: white: 
   padding: 15px;}

ROW (containing three boxes)
             .row{clear:both;
               width:750px;
               display: -webkit-box;
              display: -moz-box;
              display: -ms-flexbox;
              display: -webkit-flex;
             display: flex;
            flex-wrap: wrap;
           -webkit-box-orient: vertical;
           -moz-box-orient: vertical;
           -webkit-flex-direction: column;
          -ms-flex-direction: column;
          flex-direction: column;
           /* optional */
         -webkit-box-align: start;
           -moz-box-align: start;
          -ms-flex-align: start;
        -webkit-align-items: flex-start;
        align-items: flex-start;}

LEFT BOX
         #leftabout{
         -webkit-box-ordinal-group: 2;
         -moz-box-ordinal-group: 2;
         -ms-flex-order: 2;
         -webkit-order: 2;
          order: 2;
         width:750px; 
       display:block; margin-left:114px;
      }

CENTER BOX
        #centerimage{-webkit-box-ordinal-group: 1;
        -moz-box-ordinal-group: 1;
        -ms-flex-order: 1;
       -webkit-order: 1;
       order: 1}

RIGHT BOX
     #rightabout{
     -webkit-box-ordinal-group: 3;
     -moz-box-ordinal-group: 3;
     -ms-flex-order: 3;
      -webkit-order: 3;
       order: 3;
       width:750px; display:block; margin-top:0px;background: white; 
        height: 450px; padding: 0px 0px 20px 20px; margin-left: 114px;
 }

伪代码 HTML 结构：

标题 CONTAINER 行 LEFT CENTER RIGHT

问题的外观如下：

[ gap] [ left box] [center image] [right box] [gap]

这里我想去掉左右两边的[gap]，让左右两边的盒子粘在移动设备屏幕的侧面。

任何消除差距的建议和指导将不胜感激

编辑：这里是 JS fiddle 演示，以显示我的意思，用于演示目的以显示间隙，而不是它没有将 flex 的右侧带到设备屏幕： https ://jsfiddle.net/martyforever/6bd9ca3y/

标签： htmlcssflexbox