Question

这是我使用flexbox的第一周，直到现在我都非常喜欢。我正在尽一切可能摆脱浮动元素。因此，我的主要目的不是要解决其中存在浮动元素的问题。我遇到了两个问题，即我不太确定该方法的正确性。

问题1： 当我达到1200px左右时，我可以看到2列开始一起移动。这个怎么可能？

问题2： 为什么我的列不适合768px以下的视口？我可以在手机上看到900x200越过电话上最大宽度的边缘。

.column-layout {
  max-width: 1200px;
  background-color: #fff;
  margin: 40px auto 0 auto;
}

.column-layout-one {
  max-width: 1200px;
  background-color: #fff;
  margin: 40px auto 0 auto;
}

.header-item-one {
  order: 1;
}

.header-item-two {
  order: 2;
}

@media (min-width: 768px) {
  .column-layout-one {
    display: flex;
    justify-content: space-between;
  }
}

<div class="column-layout-one">
  <div class="header-item-one">
    <img src="http://placehold.it/280x200">
  </div>
  <div class="header-item-two">
    <img src="http://placehold.it/900x200">
  </div>
</div>

Answer 1

.column-layout {
  max-width: 1200px;
  background-color: #fff;
  margin: 40px auto 0 auto;
}
img {max-width: 100%;}
.column-layout-one {
  max-width: 1200px;
  background-color: #fff;
  margin: 40px auto 0 auto;
}

.header-item-one {
  order: 1;
}

.header-item-two {
  order: 2;
}

@media (min-width: 768px) {
  .column-layout-one {
    display: flex;
    justify-content: space-between;
  }
}

<div class="column-layout-one">
  <div class="header-item-one">
    <img src="http://placehold.it/280x200">
  </div>
  <div class="header-item-two">
    <img src="http://placehold.it/900x200">
  </div>
</div>

当我达到1200px时，我可以看到2列开始一起移动。怎么可能？

您的.column-layout-one的最大宽度为1200，内部元素的宽度为280 + 900 = 1180 px，并且您在space-between的父元素上使用过。因此，当父级的空间大于其定义的宽度时，内部项目将被1200-1180 = 20px的差异分开；父对象缩小后，该空间将减小，因为它是这2个div留下的空间，

Space-between = outerWidth - (Total of inner width)

如果您希望图像适合在移动设备的屏幕上显示，请提供 max-width: 100%，如果不这样做，它将采用原始宽度并扭曲您的设计。

Answer 2

将.header-item-one和-two设置为flex: 1;，以填充弹性框中的整个空间。然后，为预期结果设置max-width值。

.header-item-one {
  flex: 1;
  max-width: 200px;
  background-color: red;
  height: 300px;
}

.header-item-two {
  flex: 1;
  max-width: 900px;
  background-color: blue;
  height: 300px;
}

关于另一个问题-div超出视口边界，因为您有占位符图像。图片是固定宽度的嵌入式块元素，这意味着它们不适合用户的视口，除非您在父div中使用overflow-x: hidden;进行裁剪或进行类似div img { max-width: 100%; }的操作

删除图像，然后尝试使用该CSS。小提琴：https://jsfiddle.net/59meh6vs/

Flexbox不适合移动设备

2 个答案: