logo

Zde je nejjednodušší způsob, jak vytvořit stejně vysoké boční panely

Dlouhou dobu jsme byli nuceni vytvářet rozhraní našich webových aplikací pomocí režimů rozložení CSS, které byly původně navrženy pro pokládání dokumentů. Není divu, že pro začátečníky je to taková bolest! Naštěstí se věci mění – nyní máme režim rozložení flexboxu. Pokud si můžete dovolit ignorovat IE <10 (což je velké kdyby), můžete jej použít ještě dnes! Specifikace je dokončena a většina prohlížečů ji již podporuje bez předpony.

V tomto rychlém tutoriálu vám ukážu, jak pomocí flexboxu vytvořit něco základního, co bylo až dosud překvapivě složité – postranní panel, který má stejnou výšku jako váš hlavní obsah. Záludná část spočívá v tom, že chcete, aby postranní panel i prvek hlavní stránky měly obsah s různou délkou, ale zároveň by měly mít stejnou výšku. S flex boxem je to velmi snadné. Zde je návod, jak to udělat.

Pozdravte Flexbox

Existuje spousta průvodců, které vám poskytnou přehled o flexboxu. Zde použijeme praktičtější přístup a vrhneme se přímo na jeho používání. Nejprve je zde HTML:

<section id="page">

    <div id="main">
        <!-- The content of the page will go here -->
    </div>

    <aside>
        <!-- This is the sidebar -->
    </aside>

</section>

Chceme vytvořit #main div a strana zobrazovat vedle sebe a být ve stejné výšce, bez ohledu na obsah, který mají. Chceme také, aby byla stránka responzivní, takže postranní panel má pevnou šířku, ale hlavní prvek se zmenšuje/roztahuje, aby zaplnil dostupný prostor. A konečně, na malých obrazovkách chceme, aby postranní panel byl pod hlavním obsahem.

Zde je návod, jak na to. Nejprve aktivujeme flexbox:

#page {
    display:flex;
}

Tím se obrátí #stránka prvek do ohebného kontejneru. Zobrazí se jako prvek na úrovni bloku (zabere celou šířku stránky) a promění všechny prvky v něm na flexibilní položky . To je důležité – chceme, aby náš hlavní obsah a postranní panel byly flexibilní položky, takže zabírají celou výšku stránky.

Ale chceme také vytvořit #stránku prvek široký maximálně 1200 pixelů a chceme, aby byl vycentrován. Je to stále normální blokový prvek, takže jej můžeme jako takový vycentrovat:

#page {
    display:flex;

    /* Centering the page */
    max-width:1200px;
    margin:0 auto;
}

Perfektní! Nyní musíme zadat šířky #main prvek a postranní panel:

#main {
    /* This makes the element grow and take all available space, not taken by the sidebar */
    flex-grow:1;
}

aside {
    /* Give the sidebar a default width, and prevent it from shrinking */
    flex-shrink:0;
    width:280px;
}

Hotovo! Náš layout je téměř hotový. Když obsah #main způsobí, že se prodlouží, zvětší #stránku , která by zase rostla stranou (a naopak). Poslední věcí, kterou musíte udělat, je umístit postranní panel pod hlavní obsah na malých obrazovkách, což lze provést jednoduchým dotazem na média:

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

    #page {
        flex-flow:column;
    }

    /* Make the sidebar take the entire width of the screen */

    aside {
        width:auto;
    }

}

Ve výchozím nastavení mají flexibilní kontejnery flex-flow hodnotu řádku , která zobrazuje prvky vedle sebe. Na malých obrazovkách to přepneme na vertikální orientaci, což posune postranní panel pod hlavní obsah.

Pro stručnost jsem vynechal některé CSS, které se netýkají rozvržení. Celý příklad si můžete stáhnout z tlačítka v horní části tohoto článku. Za zmínku stojí, že jsem neuvedl záložní verze pro IE 10, který implementuje o něco starší verzi specifikace flexboxu, takže funguje pouze ve Firefoxu, Chrome, Safari, Opeře a IE 11.

Tím je náš postranní panel připraven!

Závěr

O flexboxu se můžete dozvědět více, ale doufám, že vám tento článek poskytne rychlý začátek. Flexbox není v žádném případě jediný způsob, jak vytvořit toto rozložení, ale je to cesta vpřed pro vytváření webových rozhraní. Pokud si můžete dovolit ukončit podporu pro starší IE, můžete ji použít dnes.


No