Девятый урок. Свойства Display. Сетка Flex

Любой блок по-умолчанию занимает 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

Вы можете использовать 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 такой блок. Это необязательное задание, разбору которого мы посвятим следующий урок.