Как выстроить элементы в линию css

Шесть способов выстроить div-блоки в строку

HTML

<div > <div line_1"> <! — 2, 3 и т.д. до 6 — >
<div > <div > <div > </div>

CSS

body <
margin: 0;
padding: 0;
>

.description <
padding: 30px;
background-color: #f5f5f5;
font-family: sans-serif;
>

.content

.lang_en

.line <
width: 100%;
margin-bottom: 17rem;
>

.line__item <
width: calc(100% / 3);
height: 200px;
background-color: #2174fe;
border: solid #26344e 10px;
>

.line__item:nth-child(2)

.line__item:nth-child(3)

Способ 1. (Table)

.line_4 <
display: table;
table-layout: fixed;
>

.line_4 .line__item

Способ 2. (Float)

.line_5

.line_5 .line__item <
float: left;
box-sizing: border-box;
height: 220px;
>

Способ 3. (Flex)

Способ 4. (Inline)

.line_3

.line_3 .line__item <
display: inline-block;
box-sizing: border-box;
height: 220px;
>

Способ 5. (Grid)

.line_2 <
display: grid;
grid-template-columns: repeat(3, 1fr);
>

.line_2 .line__item

Способ 6. (List)

.line_6 <
columns: 3;
font-size: 0;
>

.line_6 .line__item <
width: 100%;
box-sizing: border-box;
height: 220px;
>

Урок: блоки в одну строку CSS

Для того, чтобы выстроить блоки в одну строку с помощью CSS необходимо понимать, что выстраиваемые блоки представляют собой не просто какие-то разрозненные блоки, а группу. Понимая это необходимо объединить их. Объединение осуществляется с помощью заключения всех блоков в какой-то другой блок, который будет «родительским» по отношению к этой группе.

Группа блоков внутри родительского блока:

Пусть будет известно, что будут располагаться блоки в одну строку и их количество будет равно 4-м, зная это можно рассчитать ширину блоков и отступов между ними в относительных величинах — в процентах.

Так как для дочерних блоков 100% ширины — это вся ширина родительского блока. Из этого следует, что для получения максимальной ширины дочернего блока, при расположении блоки в одну строку, надо воспользоваться формулой: 100 / 4 = 25, где 100 — это ширина родительского блока, а 4 — количество дочерних. Получается, что каждый блок должен быть не шире 25%, чтобы расположить блоки на одной строке.

Так как между блоками должно быть расстояние, чтобы они не «слипались», то необходимо рассчитать ширину отступа между блоками.

Количество отступов между блоками меньше количество самих блоков на единицу, то есть в данном случае отступов будет 3.

Если взять отступ равный 2%, то получится, что ширина каждого блока должна быть 23,5%: 4 * 23,5 + 3 * 2 = 100. Получается, что сумма всех ширин, включая отступы, по прежнему составляет 100%, как и должно быть.

10 современных раскладок в одну строку CSS-кода

Современный CSS позволяет разработчикам писать по-настоящему содержательные и надёжные правила с помощью всего нескольких нажатий клавиш.

Все приведённые в статье примеры можно опробовать во встроенном выше Glitch, или посетив 1linelayouts.glitch.me

01. Суперцентрирование: place-items: center

В первом примере «однострочной» раскладки давайте решим самую главную загадку во всём CSS: центрирование. Хочу, чтобы вы знали, что ‘place-items: center’ это проще, чем кажется.

Сначала задайте родительскому элементу свойству display со значением grid , а затем для него же place-items: center . Свойство place-items это краткая форма записи для align-items и justify-items , с помощью которого мы устанавливаем оба эти свойства в значение center .

Данный способ приводит к идеальному центрированию содержимого внутри родителя, независимо от его размера.

02. Адаптивные блоки: flex: <grow> <shrink> <baseWidth>

Это распространённая раскладка, например, для лендингов, в которой может располагаться ряд из 3 элементов, обычно содержащих изображение, заголовок и текст, описывающих особенности продукта. Но мы хотим, чтобы эти элементы также аккуратно располагались и при просмотре страницы с мобильных устройств.

Если использовать Flexbox, вам не придётся настраивать расположение элементов для разных размеров экрана с помощью медиа-запросов.

Свойство flex является сокращением и позволяет задать набор значений flex: <flex-grow> <flex-shrink> <flex-basis>

Если нужно, чтобы блоки имели <flex-basis> размер, сжимались на меньших размерах, но не увеличивались для заполнения дополнительного свободного пространства, следует указать flex: 0 1 <flex-basis> . В данном случае <flex-basis> равно 150px . Код будет следующим:

Если вы хотите, чтобы при переносе на новую строку блоки растягивали и заполняли пространство, установите <flex-grow> в значение 1 .

Теперь при изменении размера экрана Flex-элементы будут и сужаться и увеличиваться в размере.

03. Боковая панель: grid-template-columns: minmax(<min>, <max>) 1fr)

В этой демонстрации используется преимущество функции minmax для grid-раскладки. Мы устанавливаем минимальный размер боковой панели равным 150px , но на экранах бо́льшей ширины позволяем растягиваться на 25% . Таким образом, панель будет занимать 25% ширины родителя, пока эти 25% не станут меньше 150px .

Укажем эту функцию в значении свойства grid-template-columns . Элемент в первой колонке (в нашем случае это боковая панель) получает minmax между 150px и 25% , а второй элемент (в нашем случае это main ) занимает оставшееся пространство 1fr .

04. Липкий футер: grid-template-rows: auto 1fr auto

В отличие от примера с адаптивными блоками, здесь, при изменении размера экрана, расположение дочерних элементов не меняется. Как правило, называемая липким футером, эта раскладка часто используется как на вебсайтах, так и в мобильных приложениях, где футер это обычно панель инструментов.

Добавление display: grid к родительскому элементу создаст одноколоночную сетку. При этом, если в разделе «Main» будет недостаточно содержимого, чтобы достигнуть футера, данный блок всё равно увеличится, заполнив свободное пространство по высоте.

Чтобы прикрепить футер к нижней части, добавьте:

Высота хедера и футера будет установлена автоматически на основании минимального размера содержимого, а оставшееся свободное место ( 1fr ) займёт раздел «Main»

05. Классический «Святой Грааль»: grid-template: auto 1fr auto / auto 1fr auto

В данной раскладке присутствуют хедер, футер, левая и правая боковая панель, а также блок с основным содержимым. Он похож на предыдущий пример, но теперь с боковыми панелями.

Чтобы описать всю сетку с помощью одной строки кода, используйте свойство grid-template . Это свойство позволяет задавать значения для них обоих.

Записывается следующим образом: grid-template: auto 1fr auto / auto 1fr auto . Слеш разделяет значения для рядов ( grid-template-rows ) и колонок ( grid-template-columns ) сетки.

Как и в прошлом примере, где размер хедера и футера определялся автоматически на основании содержимого, здесь по такому же принципу определяется размер левой и правой боковых панелей. В этот раз речь о ширине, а не о высоте.

06. 12-колоночная сетка: grid-template-columns: repeat(12, 1fr)

В этом примере мы рассмотрим другой классический пример: 12-колоночную сетку. Вы можете быстро создавать подобные сетки в CSS с помощью функции repeat() . Использование repeat(12, 1fr); для шаблона колонок сетки создаёт 12 колонок, каждая шириной 1fr .

Теперь мы можем разместить на ней дочерние элементы. Один из вариантов — использовать grid-линии. Например, колонка со свойством grid-column: 1/13 будет начинаться с первой и заканчиваться последней (13-й) линией, охватывая все 12 колонок. Со свойством grid-column: 1/5 — первые 4 колонки.

Другой способ размещения дочерних элементов — использование ключевого слова span . В этом случае задаётся начальная линия и количество колонок, которое нужно охватить, начиная со стартовой точки. Например, grid-column: 1 / span 12 будет аналогом grid-column: 1 / 13 , а grid-columns: 2 / span 6 — аналогом grid-column: 2 / 8 .

07. RAM (Repeat, Auto, MinMax): grid-template-columns(auto-fit, minmax(<base>, 1fr))

В этом примере мы объединим некоторые из рассмотренных концепций создания отзывчивого интерфейса с автоматически позиционируемыми и гибкими дочерними элементами. Довольно удобно. Ключевые термины repeat , auto-(fit|fill) и minmax() можно запомнить с помощью акронима RAM.

Всё вместе это выглядит так:

Снова применяется функция repeat() , но на этот раз вместо числового значения используется ключевое слово auto-fit . Это активирует автоматическое расположение дочерних элементов, для которых базовая минимальная ширина равна 150px но может увеличиваться до 1fr . Это значит, что на маленьких экранах они будут занимать 1fr ширины, а при появлении достаточного пространства, элементы, расположенные ниже будут перетекать в первую строку.

Если в родительском элементе освобождается дополнительное место, в режиме auto-fit дочерние элементы будут растягиваться, чтобы это место заполнить. Если же изменить режим на auto-fill , элементы не будут превышать базовый размер из функции minmax(<baseWidth>, 1fr) .

08. Ряд карточек: justify-content: space-between

Ключевым моментом данной раскладки является свойство justify-content: space-between , которое размещает первый и последний дочерние элементы у края родителя, поровну распределяя доступное пространство между самими элементами. В нашем случае внутри карточек выбран режим раскладки Flexbox, с вертикальным расположением элементов, заданным с использованием flex-direction: column

Это размещает заголовок, описание и блок изображения в одну колонку внутри родительской карточки. Затем применяется свойство justify-content: space-between , прикрепляющее первый (заголовок) и последний (блок изображения) элементы к краям, а блок описания между ними.

09. Стилизация с помощью Clamp: clamp(<min>, <actual>, <max>)

Здесь мы познакомимся с технологией, менее поддерживаемой браузерами, но существенно влияющей на концепцию отзывчивого дизайна интерфейсов. В этом демо ширина задаётся с использованием функции ‘clamp’: width: clamp(<min>, <actual>, <max>) .

Она позволяет задать минимальное, предпочитаемое и максимальное значение.

Здесь минимальный размер — 23ch или 23 единицы ширины символа, а максимальный — 46ch . Единицы ширины символа основываются на размере шрифта элемента (в частности, ширине глифа 0 ). Предпочитаемая или «фактическая» ширина карточки равняется 50%, что означает 50% ширины родительского элемента.

В этой ситуации функция clamp() позволяет элементу сохранять ширину 50% от родителя до тех пор, пока она не превысит 46ch (на больших экранах) или не станет меньше 23ch (на маленьких). Видно, что во время увеличения или уменьшения размера родительского элемента, ширина карточки соответственно увеличивается до максимального возможного или уменьшается до минимально допустимого размера. Также, она остаётся по центру родительского элемента, поскольку мы использовали для этого дополнительные свойства. Это обеспечивает больше удобства при чтении, так как блок текста не будет слишком широким (более 46ch ) или слишком сжатым и узким (менее 23ch ).

Это также отличный способ реализовать отзывчивый размер шрифта. Например, можно написать: font-size: clamp(1.5rem, 20vw, 3rem) . В этом случае размер шрифта заголовка всегда будет оставаться в пределах между 1.5rem и 3rem , но будет увеличиваться или уменьшаться в зависимости от размера экрана, соответствуя значению 20vw .

Это отличный способ обеспечить удобство чтения, но помните, что данное свойство поддерживается ещё не во всех современных браузерах, поэтому убедитесь, что не забыли про фолбек.

10. Сохранение пропорций: aspect-ratio: <width> / <height>

И, наконец, последний инструмент — самый экспериментальный из всех. Он был недавно представлен в Chrome Canary в Chromium 84, а Firefox ведёт активную работу над его внедрением, но пока что в стабильных версиях браузеров он не поддерживается.

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

При использовании свойства aspect-ration , когда я изменяю размер карточки, зелёный блок сохраняет пропорции 16×9: aspect-ration: 16 / 9 .

Чтобы поддерживать соотношение сторон 16 x 9 без этого свойства, следует использовать хак с padding-top, задав padding 56.25%. Но сСкоро у нас появится свойство, позволяющее не прибегать к этому хаку и вычислению процентов. Можно сделать квадрат с соотношением сторон 1 / 1 или прямоугольник с соотношением 2 / 1 , или любым другим, необходимым для изображения определённых размеров.

Хотя эта функция все еще находится на стадии разработки, о ней полезно знать, поскольку она решает множество споров разработчиков, с которыми я и сама много раз сталкивалась, особенно когда речь идет о видео и фреймах.

Заключение

Благодарю, что ознакомились с этими 10 возможностями CSS. Чтобы узнать больше, можете посмотреть полное видео или поработать с демонстрацией.

display

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

Время чтения: меньше 5 мин

Кратко
Пример
Как понять
Как пишется
Подсказки
На практике
1. Алёна Батицкая советует
1. В чём разница между inline и inline-block?
Обновлено 10 октября 2022

Кратко

Скопировать ссылку на секцию «Кратко» Скопировано

По умолчанию почти все элементы в HTML имеют блочный и строчный тип отображения. Но в вёрстке часто бывает, что нам нужно сделать элемент не строчным, а блочным. И наоборот.

Тут на помощь приходит свойство display ✨

Помимо значений block (блочное отображение) и inline (строчное отображение) существует смешанное значение inline — block (строчно-блочное отображение).

Бывают и другие специфичные значения, например, flex , grid , table — cell .

Пример

Скопировать ссылку на секцию «Пример» Скопировано

Частая ситуация: на странице нужно показать иконки соцсетей со ссылками на аккаунты.

Обратите внимание, что внутри ссылок ничего не написано. Нам не нужно выводить название соцсети, а нужно вывести иконку с логотипом. Что мы и сделаем при помощи фона.

Выстраиваем пункты списка в ряд, а не друг под другом:

Превращаем ссылки из строчных в блочные элементы. После этого можем задать высоту и ширину:

Задаём иконки фоном для каждой отдельной ссылки:

По умолчанию ссылки — строчные. Это значит, что им нельзя задать размеры ( width и height ) и фоновую картинку.

Пишем display : block , и строка превращается в условный прямоугольник, у которого могут быть и размеры, и фон.

После этого смело меняем размер на нужный нам и фоном выводим иконки каждой из соцсетей.

Помимо этого по ходу решения задачи мы установили свойство display : inline — block для пунктов списка с классом social _ _ item . За счёт этого элементы, которые по умолчанию блочные, приобретают внешние признаки строчных элементов. Вместо того чтобы выстраиваться друг под другом, пункты списка теперь стоят рядом, в строку.

Как понять

Скопировать ссылку на секцию «Как понять» Скопировано

Каждый HTML-элемент по умолчанию имеет свой тип отображения. Например, ссылки нужны для оборачивания слов и фраз. Значит, они должны быть строчными, чтобы не разорвать окружающий текст.

Но по разным причинам может понадобиться изменить стандартное отображение на то, которое больше подходит под решение текущей задачи.

Как пишется

Скопировать ссылку на секцию «Как пишется» Скопировано

Пишем имя свойства display и после двоеточия через пробел указываем одно из доступных значений при помощи ключевого слова.

Значения свойства, которые встречаются в работе чаще всего:
- none — полностью скрывает элемент со страницы, не удаляя его при этом из HTML-разметки.
- block — элемент ведёт себя как блочный.
- inline — block — элемент ведёт себя снаружи как строчный, а внутри как блочный.
- flex — элемент становится флекс-контейнером, ведёт себя как блочный, а вложенные элементы становятся флекс-элементами. Подробнее в Гайде по flexbox.
- grid — элемент становится грид-контейнером. Снаружи грид-контейнер ведёт себя как блок. Дочерние элементы такого контейнера начинают подчиняться правилам грид-раскладки. Подробнее в Гайде по grid.
Остальные значения можно посмотреть в спецификации.

Это свойство можно применить к любому HTML-элементу.

Подсказки

Скопировать ссылку на секцию «Подсказки» Скопировано

�� Свойство display нельзя анимировать ��

�� Значение по умолчанию у каждого HTML-элемента своё. Если нет уверенности — загляните в «Инструменты разработчика» в браузере.

На практике

Скопировать ссылку на секцию «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку на секцию «Алёна Батицкая советует» Скопировано

�� Если задаёте display : inline — block , чтобы выстроить несколько блоков в строку, обязательно указывайте для родительского элемента font — size : 0 . Иначе между строчно-блочными элементами будут небольшие отступы, как между словами — пробелы.

�� Многие начинающие разработчики сталкиваются с проблемой при выводе иконок соцсетей фоном для ссылок. Ссылки изначально строчные. Для изменения размера ссылки и для возможности задать ей фон ссылку нужно сделать блочной ( display : block ) или строчно-блочной ( display : inline — block ).

�� Если нужно вывести на страницу данные в виде таблицы, то в HTML-разметке создайте таблицу при помощи соответствующих тегов. Не используйте display : table для визуального преобразования в таблицу тех элементов, которые не имеют никакого отношения к таблице. Помните про семантику! ☝️

Семантикой в вёрстке называют подбор тегов по смыслу элемента. Прошли эпохи вёрстки на таблицах и дивах. Теперь почти для всего есть отдельный тег. Например, для меню есть тег <nav> , а для основного контента страницы — <main> .

�� Если нужно плавно показывать элемент или наоборот, прятать его, стоит присмотреться к решениям с использованием visibility и opacity . Или менять стили элемента при помощи JavaScript. Например, можно показывать другой текст по наведению на элемент:

�� Очень много задач сегодня решает display : flex . С его появлением перестали так часто использоваться значение inline — block или свойство float . Например, частая задача вертикального выравнивания раньше решалась при помощи магических пассов — большого количества кода, — а теперь легко решается одним свойством align — items . Или прижать два блока к разным сторонам родителя раньше можно было при помощи float и заклинания для решения проблемы выпадания. Теперь достаточно написать justify — content : space — between , и два блока будут прижаты к краям родителя ��

На собеседовании

Скопировать ссылку на секцию «На собеседовании» Скопировано

Это партнёрская рубрика, мы выпускаем её совместно с сервисом онлайн-образования Яндекс Практикум. Приносите вопрос, на который не знаете ответа, в задачи, мы разложим всё по полочкам и опубликуем. Если знаете ответ, присылайте пулреквест на GitHub.

В чём разница между inline и inline — block ?

Скопировать ссылку на секцию «В чём разница между inline и inline-block?» Скопировано

Это вопрос без ответа. Вы можете помочь! Почитайте о том, как контрибьютить в Доку.
Похожие публикации: