CSS - как заставить один компонент перемещаться влево, только если справа отображаются новые компоненты

#html #css #reactjs

Вопрос:

Два компонента A и B.

A перемещается немного влево только в том случае, если есть B, в противном случае A все еще сохраняет исходное положение.

Код выглядит так:

 return (  lt;div className="menu"gt;  lt;A className="comp-a" /gt;  { showB amp;amp; lt;B className="comp-b" /gt; }  lt;divgt; );

Я знаю, что один из способов-передать реквизит A, чтобы изменить его стиль, если shouldShowB == true.

Но как сделать шаг автоматически, изменив только css?

Спасибо.

Ответ №1:

Воспользуйся 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%} }