Flexbox不适合移动
Flexbox不适合移动
提问于 2020-05-31 09:49:16
这是我使用flexbox的第一周，到目前为止，我非常喜欢它。我正在尽我所能摆脱浮动元素。所以我的主要目的不是一个解决办法，里面有浮动元素。我遇到了两个问题，我不太确定正确的解。
问题1:当我到达1200 is左右时，我可以看到两列开始一起移动。这怎么可能呢？
问题2:为什么我的专栏不适合768 on下的视图？我可以在手机上看到，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>
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-05-31 10:11:02
.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>
- 当我到达1200 is左右时，我可以看到两列开始一起移动。这怎么可能呢？
您的.column-layout-one具有最大宽度1200集，内部元素具有280+900 = 1180 px，并且在其父元素上使用了space-between。因此，当父项的空间大于其定义的宽度时，内部项将被1200-1180 =20 as的差值分隔；一旦父项缩小这个空间，由于这2个div留下的空间，
Space-between = outerWidth - (Total of inner width)
- 如果你想让你的图像适合手机屏幕，那么提供它
max-width: 100%，如果你不这样做，它将采取其原始宽度和扭曲您的设计。
Stack Overflow用户
发布于 2020-05-31 10:08:43
将您的.header-item-one和-two设置为flex: 1;，以填充您的flex框中的整个空间。然后，为预期的结果设置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/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62114361
复制相关文章
相似问题
腾讯云开发者
