Любой блок по-умолчанию занимает 100% ширину своего контейнера. Это стандартное поведение, которое описывается свойством display: block
. У блоковых тэгов DIV, P, H1 и т.д. это свойство определено изначально.
Строчные тэги, например SPAN, B, I и т.д. описаны как display: inline
. В отличие от блочных они не создают перенос строки.
У блочных элементов можно указывать размеры в виде ширины и высоты. У строчных такие свойства работать не будут. В некоторых случаях такое поведение создает определенные трудности, когда в тексте нужно вывести элемент с фиксированными размерами, например иконку.
Рассмотрим пример, где для SPAN (строчный элемент) задаём размеры:
<span style="background: yellow; width: 50px; height: 50px;">1</span>
Как видим, браузер проигнорировал свойства width и height.
Чтобы решить данную проблему, следует использовать display: inline-block
:
<span style="background: yellow; width: 50px; height: 50px; display: inline-block;">1</span>
В css-классах UniCSS данный пример будет выглядеть так (желтый цвет немного другой):
<span class="bg-yellow w50px h50px b-inline">1</span>
Скорее всего использовать display: block
и display: inline
вам придется очень редко, поскольку для этого предназначены html-тэги без каких-либо хитростей. Там, где элемент должен быть блочный, используем DIV (и другие подобные), где строчный — используем SPAN. Задавать css-свойства уже не требуется.
У display есть еще одно замечательное значение flex, которое позволяет создавать ячейки и колонки. С flex будет связано много самых разных задач по верстке. Рассмотрим несколько примеров с использованием классов UniCSS.
Любой flex-блок задается по единым правилам:
display: flex
<div class="flex"> <div class="bg-red">1</div> <div class="bg-green">2</div> <div class="bg-blue">3</div> </div>
Здесь мы задали три flex-ячейки. Они, хоть и являются DIV-тэгами, но уже не растягиваются на всю ширину родителя. Их поведение теперь больше похоже на ячейки таблиц.
У ячеек можно задать ширину. Во flex-модели ширина является лишь рекомендательной характеристикой. Это позволяет избежать очень многих проблем верстки. Рассмотрим пример, где ячейки имеют ширину по 30% (классами .wXX
).
<div class="flex"> <div class="bg-red w30">1</div> <div class="bg-green w30">2</div> <div class="bg-blue w30">3</div> </div>
Суммарно ячейки занимают всего 90% ширины. Попробуем дать ячейкам по 50%:
<div class="flex"> <div class="bg-red w50">1</div> <div class="bg-green w50">2</div> <div class="bg-blue w50">3</div> </div>
Как видим ничего страшного не произошло — браузер разместил ячейки просто равномерно по доступному месту.
По умолчанию во flex-модели размещение ячеек происходит в одну строку. Если нужно разрешить перенос, то у контейнера добавляется свойство wrap
:
<div class="flex flex-wrap"> <div class="bg-red w50">1</div> <div class="bg-green w50">2</div> <div class="bg-blue w50">3</div> </div>
Здесь flex аккуратно разместил все ячейки по 50%.
Каждая ячейка может сама являться flex-контейнером для дочерних. Посмотрите на этот пример:
<div class="flex"> <div class="w30 bg-red"> <div class="bg-red100 w30">11</div> <div class="bg-red200 w30">12</div> <div class="bg-red300 w30">13</div> </div> <div class="w30 bg-green">2</div> <div class="w30 bg-blue">3</div> </div>
В первой ячейке мы разместили ещё три блока по 30%. Поскольку это обычные DIV-элементы, а родитель у них такой же обычный (с их позиции) DIV-элемент, то и поведение у них как у обычных DIV — вывод с новой строки.
Но, если непосредственному родительскому контейнеру добавить .flex
, то они превращаются во flex-ячейки.
<div class="flex"> <div class="w30 bg-red flex"> <div class="bg-red100 w30">11</div> <div class="bg-red200 w30">12</div> <div class="bg-red300 w30">13</div> </div> <div class="w30 bg-green">2</div> <div class="w30 bg-blue">3</div> </div>
Таким способом можно создавать довольно сложные сетки.
К ячейкам применимы все привычные для блоков свойства, например padding:
<div class="flex"> <div class="w45 bg-red flex pad30"> <div class="bg-red100 w10 pad20"></div> <div class="bg-red200 w20 pad20"></div> <div class="bg-red300 w30 pad20"></div> <div class="bg-red400 w40 pad20"></div> </div> <div class="w45 bg-green flex pad30"> <div class="bg-green100 w25 pad20"></div> <div class="bg-green200 w20 pad20"></div> <div class="bg-green300 w10 pad20"></div> <div class="bg-green200 w20 pad20"></div> <div class="bg-green100 w25 pad20"></div> </div> </div>
Здесь классы .padXX
задают внутренний отступ padding.
Вы можете использовать UniCSS.Builder для создания и проверки html-кода с UniCSS-классами.
Перед началом работы следует выбрать css-файл UniCSS. Нижнее поле используется для ввода html-кода, верхнее — его результат. В левой колонке вы можете выбрать готовые примеры блоков сгруппированные по функциональности.
UniCSS.Builder позволяет сохранять html-код в локальном хранилище браузера (Local Storage). После его закрытия, код будет доступен для дальнейшего использования. Функциональные кнопки позволяют добавить, удалить или заменить html-код в хранилище. Также можно одной кнопкой очистить все сохраненные кода.
Правую колонку можно скрыть, если нужно протестировать код (почти) на всю ширину браузера. Аналогично можно настроить пропорции между верхним и нижним окнами.
1. Все приведённые примеры проверьте в UniCSS.Builder.
2. Найдите в UniCSS.Builder другие примеры верстки. Научитесь здесь же создавать и сохранять (LocalStorage) свои html-фрагменты кода.
3. Попробуйте сверстать с помощь flex в UniCSS.Builder такой блок. Это необязательное задание, разбору которого мы посвятим следующий урок.