下面的flex
布局可以工作,但是当我们减小器件宽度时(例如:Chrome开发工具,触摸设备模拟),它不会减少其宽度,也不会保持列居中,两侧都有白色边距。
为什么?为什么?
在下面的片段中不容易看到,但这里有一个现场演示:https://gget.it/isp6/test.html
html, body { padding: 0; margin: 0; height: 100%; }
.container { display: flex; align-items: center; flex-direction: column; width: 80%; height: 100%; background-color: #ccc; margin: auto; }
img { max-height: 100%; max-width: 100%; }
.top { width: 50%; background-color: #ddd; }
.middle { background-color: #aaa; }
.bottom { flex-grow: 1; background-color: white; }
.footer { background-color: #eee; }
<div class="container">
<div class="top">
<img src="https://placehold.co/3000x2000">
</div>
<div class="middle">
middle
</div>
<div class="bottom">
bottom (should fill space with white, so that footer is always sticky on bottom)
</div>
<div class="footer">
footer
</div>
</div>
注意:它已经是230px左右的宽度的情况。为什么?为什么?
1条答案
按热度按时间5vf7fwbs1#
缺少视口标记:
添加类似上面的内容会指示浏览器在移动的视口中也显示此页面,而不是假设它仅适用于桌面。