CSS only：当宽度改变时向上移动 flexbox 的 2. item
Posted
技术标签:
【中文标题】CSS only：当宽度改变时向上移动 flexbox 的 2. item【英文标题】：CSS only: Move the 2. item of a flexbox upwards when the width changes 【发布时间】：2022-01-20 13:10:12 【问题描述】：我需要你的 CSS 帮助。我有一个带有 3 个 DIV 元素的盒子。 DIV 元素应保持其大小且不应更改。但是当总宽度变化时（它必须是动态的，例如当侧边栏上升时），我希望 B-DIV 元素到顶部，A-DIV 元素在 C-DIV 元素旁边下降。如果空间进一步缩小，顺序应该是 B - A - C。我尝试以图形方式显示：
这是我的示例代码不起作用！！！
.container
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
<html>
<div class="container">
<div id="a">10:00 - 10:30</div>
<div id="b">VerrrrrrrrryLooooooongText</div>
<div id="c">Room XY in Tower B</div>
</div>
</html>感谢您的帮助！
【问题讨论】：
你知道你的断点是什么（即你想要切换到第二个布局然后再切换到第三个布局的视口有多窄）？ 【参考方案1】：我个人不知道没有媒体查询的方法 - 你可以做这样的事情并操纵 css order 属性：
@media screen and (max-width: 1000px) /* change this to suit your needs */
#b
order: 1;
#a
order: 2;
#c
order: 3;
.container
flex-direction: column;
【讨论】：
以上是关于CSS only：当宽度改变时向上移动 flexbox 的 2. item的主要内容，如果未能解决你的问题，请参考以下文章