Question

我有这个flex容器，其中包含左框，中间框和右框。

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

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

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

假定左盒和右盒具有绝对的位置，以适应桌面版本中元素的复杂放置（即，重叠的Web 3.0样式的现代块），其中由于绝对位置，我认为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结构：

标题集装箱行剩下中央正确

问题的外观如下：

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

在这里，我要消除左右两边的[gap]，以便将左盒和右盒粘贴到移动设备屏幕的侧面。

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

编辑：这是JS小提琴演示，目的是演示演示时我的意思，以显示间隙，但它没有将flex的右侧显示在设备屏幕上： https://jsfiddle.net/martyforever/6bd9ca3y/

消除伸缩容器左右两侧的间隙

0 个答案: