时间戳

首页 > 解决方案 > CSS-仅当右侧显示新组件时如何使一个组件向左移动

html - CSS-仅当右侧显示新组件时如何使一个组件向左移动

问题描述

两个组件 A 和 B。

只有在有B的情况下，A才会向左移动一点，否则，A仍然保持原来的位置。

代码如下：

return (
 <div className="menu">
   <A className="comp-a" />
   { showB && <B className="comp-b" /> }
 <div>
);

如果 shouldShowB == true，我知道一种方法是将 prop 传递给 A 以更改其样式。

但是如何仅通过更改 css 来自动使 A 移动？

谢谢。

标签： htmlcssreactjs

解决方案

利用display: flex; flex-wrap: wrap;

.menu {
  display:flex;
  flex-wrap: wrap;
}

然后，您需要定义它们何时应该彼此相邻 - 如果您将两个宽度都设置为 100% 到 50% 或低于 50% 以使两者都适合 100%，则此方法有效。

我通常使用以下代码执行此操作：

@media screen and (min-width: 0) {
  .a {width: 100%}
  .b {width: 100%}
}

然后另一个与他们应该彼此相邻的位置：

@media screen and (min-width: 400px) {
  .a {width: 50%}
  .b {width: 50%}
}

推荐阅读