falbar Самый простой способ создания боковых панелей на CSS, одинаковой высоты

Самый простой способ создания боковых панелей на CSS, одинаковой высоты

10 июня 2018 Перевод 420 0

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

Реклама

Конечно, есть некоторые ограничения в виде IE < 10 (давно устаревшие браузеры), которые не являются препятствием, так что данная технология является сегодня актуальной! Для большинства современных браузеров требования были унифицированы, что означает возможность использования без каких-либо изменений со всеми ними.

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

А теперь ближе к делу!

Первое знакомство с flexbox

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

<section id="page">
    <div id="main">
        <!-- Основной контент будет находиться здесь -->
    </div>
    <aside>
        <!-- Тут у нас будет боковая панель (сайтбар) -->
    </aside>
</section>

Нам надо, чтобы #main div и aside находились рядом друг с другом и были одинаковой высоты независимо от содержания, а также мы хотим, чтобы дизайн страницы являлся адаптивным, но при этом боковая панель могла менять только длину, а основной только ширину, заполняя всё свободное пространство. На небольших же дисплеях мы хотим видеть боковую панель (сайтбар) уже под блоком с основным контентом.

flexbox-bokovaya-panel

Для начала следует «включить» flexbox:

#page {
    display:flex;
}

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

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

#page {
    display:flex;
    /* Центрируем */
    max-width:1200px;
    margin:0 auto;
}

Замечательно! Следом зададим ширину для главной и боковой колонок:

#main {
    /* Это заставит элемент расти и занимать всё свободное пространство корме «боковушки» */
    flex-grow:1;
}
aside {
    /* Задаём боковой панели изначальную ширину, убираем возможность расширения */
    flex-shrink:0;
    width:280px;
}

Отлично, макет почти закончен. Когда контент внутри элемента #main приведёт к изменению его размера, тот в свою очередь начнёт изменять размер #page. Остался лишь финальный штрих – смещение боковой вниз на небольших экранах. Это легко реализовать, применив медиа-запрос:

@media all and (max-width: 800px) {
    #page {
        flex-flow:column;
    }
    /* Делаем так, чтобы боковая панель занимала всю ширину экрана, находясь под блоком с основным контентом */
    aside {
        width:auto;
    }
}

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

Я не стал упоминать другие свойства CSS, которые не относились к данному макету, а являлись скорее общими. Если хотите, то можете скачать весь код, нажав на кнопку в нижней части страницы. Стоит ещё сказать, что я не показал реализацию этой задачи для IE10, который использует старые версии flexbox, поэтому выравнивание по высоте CSS будет работать только с Firefox, Chrome, Safari, Opera и IE 11.

Наконец наша боковая панель готова!

Вывод

Эта статья является только вводной. Существует ещё целая куча материалов о разных приёмах с flexbox. Тем не менее данная технология является далеко не единственной технологией для реализации проектов в подобной сфере. Единственное условие для использования – это отказ от поддержки старых версий IE.

Реклама
Комментариев еще не оставлено
no_avatar