Самый легкий способ создать боковые колонки одинаковой высоты

Самый легкий способ создать боковые колонки одинаковой высоты

От автора: Очень продолжительное время мы были вынуждены создавать интерфейсы для наших веб-приложений, применяя СSS техники, которые изначально задумывались для верстки печатных документов. Неудивительно, что их использование вызывает столько затруднений у новичков! К счастью, времена меняются. Теперь у нас есть модуль Flexbox. Если вы можете позволить себе не заботиться о поддержке в браузерах IE < 10 (а это большое «если»), то вы можете использовать Flexbox уже сегодня! Спецификация является завершенной, и почти все браузеры поддерживают данный модуль без необходимости применения вендорных префиксов.

скачать исходникидемо

В этой небольшой обучающей статье я покажу, как использовать flexbox, чтобы создать нечто базовое, что раньше вызывало затруднения. И это нечто называется боковая колонка (sidebar), который при этом имеет одинаковую высоту с вашим основным контентом. Основная трудность заключается в том, чтобы объем содержимого в основном блоке и боковой колонке мог меняться, но при этом данные блоки оставались бы одинаковой высоты. С flexbox это очень легко сделать. Вот как это делается.

Скажите «Привет, Flexbox»

В Интернете можно найти множество руководств, в которых рассматривается flexbox. В этой статье мы подойдем к рассмотрению flexbox с практической точки зрения, т.е. сразу же перейдем к его использованию. Сначала создадим HTML разметку:

<section id="page">

	<div id="main">
		<!-- Здесь расположен контент страницы -->
	</div>

	<aside>
		<!-- Здесь расположена боковая колонка -->
	</aside>
	
</section>

Нам нужно, чтобы блоки #main div и aside располагались рядом друг с другом и были одинаковой высоты, независимо от объема содержимого, которое в них находится. Нам также хотелось бы, чтобы страница была отзывчивой, т.е. чтобы у боковой колонки была фиксированная ширина, а основной блок с контентом мог сжиматься/расширяться для заполнения доступного пространства. И, наконец, на устройствах с маленьким экраном боковая колонка должна перемещаться под основной блок с контентом.

Вот, как это можно сделать. Для начала активируем модуль flexbox:

#page {
    display:flex;
}

Благодаря этому элемент #page становится flex-контейнером (т.е. «резиновым»). Он будет отображаться, как блочный элемент (т.е. будет растягиваться на всю ширину страницы), а все элементы, являющиеся дочерними по отношению к нему, превратятся в flex-элементы. Это очень важный момент, т.к. нам нужно, чтобы основной блок с контентом и боковая колонка растягивались на всю высоту страницы.

Но мы также зададим максимальную ширину 1200px для элемента #page и отцентрируем его. Поскольку это обычный блочный элемент, то можно написать так:

#page {
    display:flex;

    /* Центрирование страницы */
    max-width:1200px;
    margin:0 auto;
}

Превосходно! Теперь нам нужно задать ширину для элемента #main и боковой колонки:

#main {
    /* Это заставит элемент растягиваться и занять все доступное пространство, незанятое боковой колонкой */
    flex-grow:1;
}

aside {
    /* Задаем для боковой колонки ширину по умолчанию и предотвращаем ее сжатие */
    flex-shrink:0;
    width:280px;
}

Готово! Мы почти закончили. Когда элемент #main будет растягиваться за счет увеличения контента, он будет растягивать и элемент #page, из-за чего впоследствии растянется и элемент aside (и наоборот). Последнее, что нам осталось сделать, это расположить боковую колонку под основным блоком с контентом на устройствах с маленьким экраном. Для этого нам потребуется простой медиа-запрос:

@media all and (max-width: 800px) {

    #page {
        flex-flow:column;
    }

    /* Заставляет боковую колонку растягиваться на всю ширину экрана */

    aside {
        width:auto;
    }

}

По умолчанию для flex-контейнеров установлено значение row для свойства flex-flow, которое позволяет расположить элементы рядом друг с другом. На маленьких экранах мы переключаемся на вертикальную ориентацию, что заставляет боковую колонку переместиться под основной блок с контентом.

Для краткости я пропустил часть CSS кода, не влияющую на разметку. Но вы можете посмотреть все стили, скачав исходники к данной статье. Также стоит упомянуть, что я не рассказал про альтернативные варианты для работы с flexbox в IE 10, для которого используется немного устаревшая версия спецификации flexbox, т.е. мой пример будет работать только в браузерах Firefox, Chrome, Safari, Opera и IE 11.

Вот наша боковая колонка и готова!

Заключение

Вам предстоит еще многое узнать о flexbox, но я надеюсь, что эта статья даст вам «быстрый старт». Безусловно, модуль Flexbox не является единственным решением для создания подобной разметки страницы, но это за ним стоит будущее разработки веб-интерфейсов. Если вам не нужна поддержка старых версий IE, то вы можете пользоваться им уже сейчас.

Автор: Martin Angelov

Источник: http://tutorialzine.com/

Редакция: Команда webformyself.

Фреймворк Bootstrap: практика адаптивной верстки от А до Я

Научись верстать сайты, используя все возможности фреймворка Bootstrap.

Научиться

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (5)

  1. Iryna

    Спасибо, очень познавательно)
    Ещё было бы интересно узнать «про альтернативные варианты для работы с flexbox в IE 10″.

  2. BECEJLbE / Данил

    Знаю проще. Намного. Если соберусь с мыслями,напишу на хабре (искать в песочнице)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree