Html Flexbox不适用于移动设备

这是我使用flexbox的第一周，到目前为止我非常喜欢它。我正在尽我所能摆脱漂浮的元素。因此，我的主要目的不是解决存在浮动元素的问题。我遇到两个问题，我不太确定正确的解决方法

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

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

.栏目布局{ 最大宽度：1200px； 背景色：fff； 保证金：40px自动0自动； } .第一栏{ 最大宽度：1200px； 背景色：fff； 保证金：40px自动0自动； } .标题项目1{ 顺序：1； } .标题项目二{ 顺序：2； } @介质最小宽度：768px{ .第一栏{ 显示器：flex； 证明内容：之间的空间； } } 将.header项1和-2设置为flex:1；填满flex box中的整个空间。然后，设置预期结果的最大宽度值

.标题项目1{ 弹性：1； 最大宽度：200px； 背景色：红色； 高度：300px； } .标题项目二{ 弹性：1； 最大宽度：900px； 背景颜色：蓝色； 高度：300px； } 关于另一个问题-div会越过视口边界，因为您有占位符图像。图像是固定宽度的内联块元素，这意味着它们将不适合用户的视口，除非您使用overflow-x:hidden裁剪它们；在父div中，或者执行类似div img{max width:100%；}的操作

删除图像并尝试使用css。小提琴：

.栏目布局{ 最大宽度：1200px； 背景色：fff； 保证金：40px自动0自动； } img{最大宽度：100%；} .第一栏{ 最大宽度：1200px； 背景色：fff； 保证金：40px自动0自动； } .标题项目1{ 顺序：1； } .标题项目二{ 顺序：2； } @介质最小宽度：768px{ .第一栏{ 显示器：flex； 证明内容：之间的空间； } }

---

你到底在问什么？您有占900像素宽的占位符图像，尽管您尝试将其调整到768像素以下。你想裁剪图像吗？正确的解决方案可能是它们堆叠在一起？你能添加预期结果的图像吗？？？如果你总是想在两个div之间保持20px的间距，直到它们并排，请告诉我，我会相应地更改代码，bu I hipe现在你知道为什么在达到1200px点时差距缩小了我没有得到你想要的输出是什么吗？您使用flex的方式很好，唯一的问题是，您的订单属性在移动设备上不起作用，因为您在min width 768上提供了display flex。您不能对图像有相同的行为，这是可能的，但您需要在图像外观上妥协，让我给您一个示例，选中此项，但正如您所看到的，图像视图与以前不同谢谢@Atul。我真的认为这种编码有时很糟糕。我对flexbox非常满意，因为我已经用Bootstrap工作了很多年，并且用了很多小时来解决浮动问题。我原以为Flexbox可以解决这个问题，但我想只有文本才能解决这个问题。所以基本上没有理由学习flexbox。谢谢你的回答。我刚刚将占位符图像更改为普通图像：。关于宽度，设置弹性基准不是更好吗？我只是在手机上查看页面，可以看到汽车图像仍在视口中。