Выстроить блок в линию с переносом

210

19 января 2019, 07:10

Как сделать, чтобы все дочерние элементы block были бы в одну строку, а если они не помещаются по ширине, то переносились бы на следующую, но не каким-то отдельным узлом, а именно частично.

    <div id="block">
        <div>Текст1</div>
        <a>Текст2</a>
        <span>Текст3</span>
    </div>

UPD: В моём случае хватило .block > div {display:inline;}

Answer 1

.block { 
  background: #512; 
  display: flex; 
  flex-wrap: wrap; 
} 
 
.item { 
  padding: 40px; 
  background: #693; 
  color: #fff; 
}

<div class="block"> 
  <div class="div item">div</div> 
  <a class="link item">link</a> 
  <span class="span item">span</span> 
  <div class="div item">div</div> 
  <a class="link item">link</a> 
  <span class="span item">span</span> 
  <span class="span item">span</span> 
  <div class="div item">div</div> 
  <a class="link item">link</a> 
  <span class="span item">span</span> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Порядок выполнения needle

Помогите пожалуйста с порядком выполненияНе могу понять, как сделать порядок выполнения

213

javascript

Выход из try-catch

Использую axios для отправки запросов во vuejs 2 в laravel 5

242

javascript

Запуск N Promise параллельно с потоком в k Promise

Итак, я пытаюсь написать программу, запускающую N Promise с потоком в k Promise параллельноПроблема в том, что при запуске без yield sleep 1 программа запускает...

218

javascript

Как задать срок хранения ключа?

Как задать срок хранения ключа? как предотвратить появление модального окна после закрытия а потом октрытия браузера?

206