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 золотых знака 114 114 серебряных знаков 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%; >>
Как перенести div на новую строку?
Проблема в том, что div(page-navigation) выводится справа от div(content), а нужно с новой строки. У div(content) стоит height: auto;, а если поставить какую-нибудь константу, то div(page-navigation) будет отображаться корректно снизу под div(content).
Константу я задать немогу, потому-как не знаю заранее сколько будет элементов выводиться, что тут можно сделать?
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Как перенести в новую строку
как перенести в новую строку
Как перенести div на следующую строку?
Создал макет, и возникла проблема с переносом блоков. <div Левый блок 1 </div> .
Как перенести на новую строку?
Здравствуйте! Работаю в С++ Builder XE4 Есть код.
424 / 368 / 75
Регистрация: 27.02.2012
Сообщений: 1,375
Записей в блоге: 91
s197, примените к div />
1 2 3
div#content { clear: both; }
Добавлено через 1 минуту
Либо так же должно помочь
1 2 3
div#content, div.page-navigation { display: block; }
Как перенести блок на новую строку css
Имеется несколько inline-block’ов подряд.
Нужно задать такой общий стиль CSS, чтобы эти блоки переносились на новую строку после каждого третьего.
То есть вместо одной цепочки блоков должно получиться несколько строк, по три блока в каждой строке.
сами блоки менять нельзя, в html они все одинаковые и имеют одинаковые названия стилей. можно только файл css изменять.
Внимание, вопрос: Как это сделать?
Очень нужно. Кто шарит в CSS?
это CSS3. работает только в свежих браузерах
(2) (4) Да что туда поставить то.
Кто шарит в CSS?
Ну нет, так нет.
(5) по ссылке сходить не судьба чтоль?
каждый третий элемент будет :nth-of-type(3n+0)
можно попробовать так:
(8) По ссылке про селектор, а вопрос скорее в том что именно туда вставить по этому селектору, аналог
на CSS.
(8) :after вставит контент внутрь блока. А надо после блока.
Подниму, пожалуй
У меня обычно решалось так: фиксируем ширину блока, фиксируем ширину родительского элемента так, чтобы влезало максимум 3 и они сами будут переноситься.
(12) у меня родительский блок на много шире трех блоков.
Никто не знает аналог
на CSS?
А если им сделать float: left, а каждому третьему еще clear: right?
(15) Тогда они все съедут влево, и все испортится.
Они должны быть по центру
сделать их блоками, флоатами, а у каждого третьего — клеар: справа
float:left;
width:33%;
(19) весело будет, если у них будет разная высота
(19) по центру не будут (21) так же
(21) так они тоже не по центру как должны быть, а на всю ширину
(26) ну заверни их в блок, который будет по центру
(27) Не вариант.
Сделал по другому. Закройте тему
Выдавать глобальные идеи — это удовольствие; искать сволочные маленькие ошибки — вот настоящая работа. Фредерик Брукс-младший
Перенос элементов в контейнере — CSS: Основы Flex
При использовании флекс-контейнера элементы стараются вместиться в него без переноса строки. При этом элементы внутри контейнера ведут себя примерно как строчные элементы — занимают только то пространство, которое им необходимо.
Что же произойдет, если элементам внутри контейнера не хватит места? По логике контейнера элементы обязаны располагаться в одну строку, если не указано другое. Поэтому элементы внутри просто начнут выходить за пределы контейнера, но останутся в одной строке. Это может быть немного неочевидно, но такое поведение частенько помогает сверстать макет, например, эта особенность пригодится при верстке слайдеров.
Добавим отступы у элементов внутри контейнера, чтобы вы могли увидеть его реальную ширину. Такое поведение хоть и бывает полезным, но не является ожидаемым в большинстве случаев. Как в таком случае переносить элементы? Для этого существует свойство flex-wrap, которое говорит контейнеру переносить дочерние элементы при нехватке места.
Свойство flex-wrap может принимать одно из трех значений:
- nowrap. Стандартное поведение флекс-контейнера. Элементы не переносятся и располагаются в одну строку даже при нехватке места.
- wrap. Данное значение говорит перенести элементы внутри контейнера при нехватке места.
- wrap-reverse. То же самое, что и wrap, но происходит не просто перенос, а переворот блоков по главной оси. В данном случае строка со значениями 1 и 2 окажется ниже, в отличие от ситуации с использованием простого wrap
Использование flex-wrap — отличный выбор при создании адаптивных сайтов. Хоть одно свойство и не может решить всех проблем сразу, но его использование на основном каркасе сайта поможет автоматически переносить элементы на новую строку при нехватке места на мобильных устройствах.
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
- 130 курсов, 2000+ часов теории
- 1000 практических заданий в браузере
- 360 000 студентов
Наши выпускники работают в компаниях: