Найпростіший cпосіб cтворювати сайдбари однакової висоти

15 листопада 2014 14:59 comandante 1314 0

Довгий час ми були змушені створювати інтерфейси наших веб-додатків з використанням CSS макетів, які спочатку були призначені для горизонтального розміщення елементів. Не дивно, що це велика проблема для початківців! На щастя, ситуація змінюється - тепер у нас є flexbox. Якщо ви можете дозволити собі ігнорувати IE < 10, то почніть використовувати його прямо сьогодні! Більшість браузерів вже підтримують його без префіксів.

У цій короткій статті, я покажу вам, як використовувати flexbox для створення базових речей - бічної панелі, яка має однакову висоту з вашим основним вмістом. Хитрість полягає в тому, що ви хочете, щоб бічна панель і елемент головної сторінки мали вміст різної довжини, але в той же час були однакової висоти. З flexbox, це дуже легко. Ось, як це зробити.

Привіт, Flexbox!

Є багато детальних гідів по flexbox. Ми скористаємось більш практичним підходом і перейдемо прямо до використання. По-перше, ось HTML:

<section id="page">
    <div id="main">
        <!-- Контент -->
    </div>
    <aside>
        <!-- Сайдбар -->
    </aside>
</section>

Ми хочемо зробити так, щоб #main і aside були однакової висоти, незалежно від змісту. Ми також хочемо зробити сторінку адаптивною, щоб бічна панель мала фіксовану ширину, але головний елемент стискався/розширювався, заповнюючи весь доступний простір. Нарешті, на маленьких екранах, нам потрібно, щоб сайдбар був під основним контентом.

Ось, як це зробити. Спершу, активуємо flexbox:

#page {
    display:flex;
}

Це перетворить #page елемент в контейнер flex. Він буде відображатися як блок елемент (займе всю ширину сторінки). Також, це перетворить всі елементи всередині нього у flex елементи. Це важливо - нам потрібно, щоб main і sidebar були flex елементами, тому вони займуть всю висоту сторінки.

Але ми також хочемо, щоб #page був 1200 px завширшки (як максимум) і знаходився по центру. Це звичайний блок елемент, тому ми можемо центрувати його так:

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

Відмінно! Тепер ми повинні встановити ширину для #main і боковій панелі:

#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 контейнери мають значення flex-flow рядка , тож елементи відображаються side-by-side. На маленьких екранах ми перемикаємо його на вертикальну орієнтацію, яка штовхає на бічну панель нижче основного вмісту.

Я опустив деякі стилі, які не відносяться до макету для стислості. Варто зазначити, що в цьому прикладі не забезпечена підтримка IE 10, яка реалізується більш старою версією flexbox. Все гарно працює в Firefox, Chrome, Safari, Opera і IE 11.

Flexbox - це аж ніяк не єдиний спосіб створити цей макет, але це шлях вперед для побудови веб-інтерфейсів. Якщо ви можете дозволити собі відмовитися від підтримки старих IE, ви можете використовувати його вже сьогодні.

Демо

Завантажити

flexbox, css3