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

5 хв. читання

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

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

Привіт, Flexbox!

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

    <section id="page">
    
        <div>
            
        </div>
    
        <aside>
            
        </aside>
        

Ми хочемо зробити так, щоб #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, ви можете використовувати його вже сьогодні.

Демо

Завантажити

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 5.2K
Приєднався: 9 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація