Применить flex ко всем братьям и сестрам, если один из братьев должен согнуться - PullRequest
Новая
       25

Применить flex ко всем братьям и сестрам, если один из братьев должен согнуться

0 голосов
/ 16 апреля 2020

Пример задачи:

Когда не хватает места, один ряд начинает сгибаться, а другие - нет, если у них все еще достаточно места, могу ли я сделать так, чтобы каждый ряд сгибался, если хотя бы один должен?

Так что вместо это Я хочу это

Активы: 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 510 510"><title>x</title><line x1="5" y1="5" x2="505" y2="505" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:10px"/><line x1="5" y1="505" x2="505" y2="5" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:10px"/><rect x="5" y="5" width="500" height="500" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:10px"/></svg>

html: 

<div className='container'>
  <div className='container__side top'>
    <div className='container__row nameone'>
      <img className='container__type' src='...'/>
      <svg className='container__item' ... />
      // each row have different amount of svg items, because it loop throw array fecthed from api
    </div>
    <div className='container__row nametow'>
    </div>
    // etc
  </div>
  <div className='container__side bottom'>
  </div>
</div>

s css: 

.container {
   background: white;
   display: flex;
   flex-direction: column;
   padding: 1rem;

   &__row {
     display: flex;
   }

   &__type {
      margin-right: 2rem;
      width: 5rem;
      height: 5rem;
      object-fit: contain;
   }
   &__item {
      padding: .5rem;
      width: 7rem;
      height: 7rem;
   }
}

1 Ответ

0 голосов
/ 16 апреля 2020

Вы можете просто добавить flex-shrink: 0; к &__item.

Ваш окончательный вариант CSS должен выглядеть следующим образом: 

&__item {
    padding: .5rem;
    width: 7rem;
    height: 7rem;
    flex-shrink: 0;
}
...