1

Подскажите можно ли заставить остальные элементы flex-контейнера обтекать определенный элемент?

Макет

Верстаю на flexbox'ах, все делаю одним списком ul, он же и является контейнером. Необходимо заставить все элементы списка содержащие маленькие изображения обтекать li в котором находится картинка adidas. Это вообще возможно используя flexbox? Знаю что можно на гридах, но гриды использовать нельзя. Да и еще нужно чтобы li с adidas была как бы приклеена к правому краю, то есть при изменении ширины окна элемент оставался всегда у правого края и за ним не выстраивались остальные элементы.

Сейчас картина такая

Мой результат

1 ответ 1

1

Через flex никак. Можно решить через float, если нельзя использовать grid:

.parent {
  width: 302px;
  padding: 0;

}

.children {
  display: inline-block;
  width: 78px;
  height: 20px;
  margin: 10px;

  background: red;
  list-style-type: none;

}

.children--first {
  float: right;
  height: 60px;
}
<ul class='parent'>
  <li class='children children--first'>1</li>
  <li class='children'>2</li>
  <li class='children'>3</li>
  <li class='children'>4</li>
  <li class='children'>5</li>
  <li class='children'>6</li>
  <li class='children'>7</li>
  <li class='children'>8</li>
  <li class='children'>9</li>
  <li class='children'>10</li>
  <li class='children'>11</li>
  <li class='children'>12</li>
</ul>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.