Как сделать увеличение блока до 100% при переносе на другую строку?

Чтобы сделать блок увеличивающимся до 100% при переносе на другую строку, можно использовать CSS свойство flex.

Прежде всего, необходимо создать контейнер, в котором будут располагаться наши блоки. Для этого мы будем использовать элемент <div>.

HTML код выглядит следующим образом:

<div class="container">
  <div class="block">Блок 1</div>
  <div class="block">Блок 2</div>
  <div class="block">Блок 3</div>
</div>

Далее, применим CSS стили к контейнеру и блокам:

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

.block {
  flex-basis: 100%;
  text-align: center;
  background-color: #f0f0f0;
  padding: 20px;
  margin-bottom: 10px;
}

В данном случае, мы устанавливаем свойство display контейнера на flex, чтобы создать гибкую верстку. Затем, с помощью свойства flex-wrap: wrap говорим, что элементы контейнера могут переноситься на другие строки при необходимости.

Свойство flex-basis: 100% устанавливает ширину блока на 100% от ширины контейнера.

Таким образом, при переносе блока на другую строку, он будет автоматически растягиваться по ширине контейнера.

Надеюсь, это ответ поможет вам создать блок, увеличивающийся до 100% при переносе на другую строку!