Перенос элементов в контейнере — CSS: Основы Flex
При использовании флекс-контейнера элементы стараются вместиться в него без переноса строки. При этом элементы внутри контейнера ведут себя примерно как строчные элементы — занимают только то пространство, которое им необходимо.
Что же произойдет, если элементам внутри контейнера не хватит места? По логике контейнера элементы обязаны располагаться в одну строку, если не указано другое. Поэтому элементы внутри просто начнут выходить за пределы контейнера, но останутся в одной строке. Это может быть немного неочевидно, но такое поведение частенько помогает сверстать макет, например, эта особенность пригодится при верстке слайдеров.
Добавим отступы у элементов внутри контейнера, чтобы вы могли увидеть его реальную ширину. Такое поведение хоть и бывает полезным, но не является ожидаемым в большинстве случаев. Как в таком случае переносить элементы? Для этого существует свойство flex-wrap, которое говорит контейнеру переносить дочерние элементы при нехватке места.
Свойство flex-wrap может принимать одно из трех значений:
- nowrap. Стандартное поведение флекс-контейнера. Элементы не переносятся и располагаются в одну строку даже при нехватке места.
- wrap. Данное значение говорит перенести элементы внутри контейнера при нехватке места.
- wrap-reverse. То же самое, что и wrap, но происходит не просто перенос, а переворот блоков по главной оси. В данном случае строка со значениями 1 и 2 окажется ниже, в отличие от ситуации с использованием простого wrap
Использование flex-wrap — отличный выбор при создании адаптивных сайтов. Хоть одно свойство и не может решить всех проблем сразу, но его использование на основном каркасе сайта поможет автоматически переносить элементы на новую строку при нехватке места на мобильных устройствах.
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
- 130 курсов, 2000+ часов теории
- 1000 практических заданий в браузере
- 360 000 студентов
Наши выпускники работают в компаниях:
flexbox — перенос блока на новую строку
Как при маленьком экране (к примеру max-width:480px ) сделать так, чтобы блок отправить переходил на новою строку?
.input-group < display:flex; flex-direction: row; >.modal-form < width: 100%; height: 100%; display:flex; >.modal-input-text < display: flex; align-items: center; padding: .375rem .75rem; margin-bottom: 0; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; text-align: center; white-space: nowrap; background-color: #e9ecef; border: 1px solid #ced4da; border-radius: .25rem; >.send-number
+380 Отправить
Отслеживать
110k 23 23 золотых знака 113 113 серебряных знаков 377 377 бронзовых знаков
задан 11 июл 2018 в 11:00
655 2 2 золотых знака 8 8 серебряных знаков 20 20 бронзовых знаков
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
В .modal-form добавляем правило переноса элементов:
.modal-form
Тогда, если во флексбокс не будет влезать его содержимое, то оно переедет на следующую строку. Для полной уверенности в переносе можно добавить @media запрос растягивающий кнопку на 100% по ширине от родителя:
@media screen and (max-width: 480px) < .send-number < width: 100%; >>
Как сделать перенос блока на новую строку?
Как сделать так чтобы блоки размещались не в одну строку, а чтобы каждый блок с новой строки?
.dialog < box-shadow: 0 0 5px rgba(0,0,0,0.2); padding: 10px 30px; >.d-content < display: inline-block; padding: 10px; background: #dcf8c6; border-radius: 0.4em; margin-top: 5px; >.mess_username < color: #1d5987; font-weight: 700; font-size: 12px; >.mess_date < color: #6c757d; font-weight: 400; font-size: 12px; >.mess_text < display: flex; >.new-message
- Вопрос задан более двух лет назад
- 13428 просмотров
5 комментариев
Простой 5 комментариев
Ankhena @Ankhena Куратор тега CSS
Перестать задавать им inline-block.
Блочные элементы сами по себе располагаются с новой строки.
Перенос div на новую строку при адаптивном режиме?
https://codepen.io/aptypkaa/pen/eYNYmXz
есть блок в котором 4 блока в ряд. все 4 блока по 25% ширины. итого 100% во весь блок. мне надо чтобы они
равномерно и адекватно складывались в столбик при уменьшении экрана
display:flex и flex-wrap:wrap не помогает
- Вопрос задан более трёх лет назад
- 10786 просмотров
9 комментариев
Простой 9 комментариев
Так пропишите media queries для разных разрешений.
art style @arttstyle Автор вопроса
kulaeff, Только так? какого-то автоматически адаптивного варианта нету?
25% ширины. итого 100%
нет есть еще бордеры
адекватно это как? make-pizgato — в разработке
так все переносится что сказали
* < box-sizing: border-box; >#main < width: 100%; background-color:#000; display:flex; flex-wrap: wrap; color: pink; >.asd
art style, а откуда браузеру знать, на каком разрешении складывать квадраты в столбик? Особенно если квадраты имеют относительный размер.
art style @arttstyle Автор вопроса
всем спасибо. ответ на вопрос простой: чтобы все было ровно нужно обернуть по 2 блока в еще один блок и задать им ширину и другие параметры. далее через media уже манипулируем этими блоками-обертками и содержимыми в них.
я просто не люблю такие каскадные структуры. люблю когда все просто 1 секция — 4 адаптивных блока внутри. но к сожалению так не получается..
получилось
-div
—div
—div
—div
—div
—div
—div