Jak používat Flex k zarovnání prvků HTML

Vlastnosti flex v CSS vám umožňují zarovnávat položky flexibilněji a citlivěji. To je užitečné, když chcete, aby vaše prvky HTML byly ve webovém prohlížeči citlivější.

Tento článek probere, jak můžete použít určité vlastnosti flex. To zahrnuje vlastnosti flex-direction, justify-content, align-self, align-items, align-content a gap.

Jak nastavit CSS Flex Display

Příklad struktury, kterou můžete použít k prozkoumání základy flexboxu je sada podřízených divů pod jedním nadřazeným div. V níže uvedeném kódu je hlavní „rodičovský“ div. Tři podřízené prvky div představují položky, které můžete zarovnat pomocí vlastností flex.

Aby jakýkoli flexibilní styl fungoval, budete muset přidat displej: flex vlastnost do nadřazeného flex kontejneru.

.parent {
 displej: flex;
}

Bez ohybu se podřízené divy zobrazují jeden po druhém ve sloupcové formaci na stránce.

Chcete-li zobrazit příklad tohoto nastavení, zobrazte a spusťte kód v tomto Fragment kódu CodePen.

Jak ovládat směr rozvržení

The flex-direction vlastnost určuje směr řádku nebo sloupce podřízených položek.

Možnosti pro vlastnost flex-direction zahrnují:

směr ohybu: řádek | sloupec | řada-zpět | sloupec-reverzní

Budete muset přidat nadřazený kontejner obklopující položky, které chcete zarovnat.

HTML:

CSS:

.červená { barva pozadí: červená; }
.oranžová { barva pozadí: oranžová; }
.žlutá { barva pozadí: žlutá; }
.zelená { barva pozadí: zelená;}
.modrá { barva pozadí: modrá; }
.fialová { barva pozadí: fialová; }
.parent div {
 šířka: 40px;
 výška: 40px;
}

Aplikujte vlastnost flex-direction na nadřazený flex kontejner. Tím se zarovnají podřízené položky div.

.parent {
 šířka: 300px;
 displej: flex; 
 směr ohybu: řádek;
}

Mnoho vlastností ohybu se vztahuje ke konceptu hlavní osy a příčné osy. Když je směr flex řádek, hlavní osa představuje horizontální směr a křížová osa představuje vertikální. Hodnota sloupce přepíná tyto osy.

Podívejte se na kód pro vlastnost flex-direction v tomto Fragment kódu CodePen vidět nějaké příklady.

Jak zarovnat položky podél příčné osy

The zarovnat-položky vlastnost řídí zarovnání položek podél příčné osy. Pro výchozí ohybový směr, řádek, zarovnání-položky řídí vertikální zarovnání položek.

Možnosti pro vlastnost align-items zahrnují:

align-items: flex-start | ohebný konec | zarovnat-položky | protáhnout se

Přidejte vlastnost align-items do nadřazeného kontejneru, abyste zarovnali jeho potomky.

.parent {
 displej: flex; 
 align-items: flex-start;
}

Navíc si můžete vybrat zarovnání položek pomocí účaří. Ve výchozím nastavení možnost účaří zarovná všechny položky na základě základu položek.

Můžete si také vybrat, odkud účaří začíná, například nahoře (první účaří) nebo dole (poslední účaří).

align-items: baseline | první základní linie | poslední základní linie;

Pro zarovnání položek: základní čára pracovat, ujistěte se, že každá položka má jinou výšku nebo šířku (v závislosti na ose, kterou používáte).

​​​

Zde si prohlédněte kód pro vlastnost align-items Fragment kódu CodePen vidět nějaké příklady.

Jak přepsat zarovnání u jednotlivých položek

Můžete použít sladit-sebe vlastnost, která přepíše jakýkoli styl align-items nadřazeného kontejneru. To znamená, že můžete nastavit samostatné zarovnání flex na jednotlivé položky.

Možnosti pro vlastnost align-self zahrnují:

align-self: auto | flex-start | ohebný konec | centrum | základní linie | protáhnout se

Řekněme například, že nadřazený kontejner má styl ve směru ohybu nastaven na "řádek".

.parent {
 displej: flex; 
 směr ohybu: řádek;
}

Vlastnost align-self můžete použít na jednotlivé položky. Jednotlivá položka použije styl vlastnosti align-self a vycentruje položku přes nadřazený kontejner.

Zde si prohlédněte kód pro vlastnost align-self Fragment kódu CodePen vidět nějaké příklady.

Jak rozmístit čáry přes příčnou osu

The zarovnat-obsah vlastnost zarovná děti podél svislé osy. Může také určit mezery mezi položkami, které jsou na více řádcích.

Možnosti pro vlastnost align-content zahrnují:

zarovnat-obsah: flex-start | ohebný konec | centrum | protáhnout | mezera-mezi | prostor kolem

Přidejte vlastnost align-content do nadřazeného kontejneru Flex. Vlastnost align-content bude fungovat pouze v případě, že je nastavena vlastnost flex-wrap. Přidejte flex-wrap: zabalte do nadřazeného kontejneru a zmenšete šířku nadřazeného prvku div, abyste vynutili položky na více než jeden řádek.

.parent {
 flex-wrap: zavinovačka;
 displej: flex;
 zarovnat-obsah: flex-start;
 šířka: 180px;
}

Zde si prohlédněte kód pro vlastnost align-content Fragment kódu CodePen vidět nějaké příklady.

Jak zarovnat položky na hlavní ose

The ospravedlnit-obsah vlastnost přidá podřízeným položkám zarovnání vpravo, vlevo nebo na střed. Položky také rozloží přidáním mezer mezi nimi při zarovnávání obsahu.

Možnosti pro vlastnost justify-content zahrnují:

justify-content: flex-start | ohebný konec | centrum | mezera-mezi | prostor kolem | prostorově rovnoměrně

Zabalte položky, které chcete zarovnat, pod nadřazený flexibilní kontejner.

HTML:

CSS:

.červená { barva pozadí: červená; }
.zelená { barva pozadí: světlezelená; }
.modrá { barva pozadí: modrá; }

Přidejte vlastnost justify-content do nadřazeného kontejneru flex.

.parent {
 šířka: 300px;
 displej: flex; 
 justify-content: flex-start;
}

Vlastnost justify-content také podporuje hodnoty uvedené ve specifikaci CSS Box Alignment. To zahrnuje hodnoty jako „start“, „end“, „left“ a „right“. Některé prohlížeče je nepodporují.

Vlastnost justify-content má také klíčové slovo „safe“, které můžete použít. To zajistí, že se prvky pokusí zůstat v rozsahu nadřazeného kontejneru.

Používá se také k zabránění ztrátě dat v případě, že vycentrujete dlouhé slovo. Použití klíčového slova safe zabrání kratšímu div v oříznutí prvního a posledního písmena.

.parent {
 displej: flex; 
 justify-content: bezpečné centrum;
}

Klíčové slovo bezpečné je také omezeno na určité prohlížeče. Kompatibilitu můžete zkontrolovat na Mohu použít.

Zde si prohlédněte kód pro vlastnost justify-content Fragment kódu CodePen vidět nějaké příklady.

Jak přidat mezery mezi položky

The mezera vlastnost umožňuje přidat mezi položky určitý prostor. Je to jeden z novější funkce CSS, které vám mohou pomoci vytvořit responzivní rozvržení.

Aplikujte vlastnost gap na nadřazený flexibilní kontejner.

.parent {
 displej: flex;
 mezera: 70px;
}

Pokud přidáte mezeru, která způsobí, že délka položek přesáhne šířku nadřazené položky, položky se zmenší, aby se pokusily vejít do řádku.

.parent { 
 šířka: 300px;
 mezera: 120px;
}

Pokud použijete flex-wrap: wrap k posunutí položek na nový řádek, bude se velikost mezery vztahovat také na prostor mezi řádky.

.parent { 
 šířka: 300px;
 flex-wrap: zavinovačka;
 mezera: 120px;
}

Kromě toho můžete také nastavit řádek-mezera a sloupec-mezera vlastnosti. Opět je budete muset použít na nadřazený flex kontejner.

Vlastnost row-gap určuje mezeru mezi jednotlivými řádky. Vlastnost column-gap určuje mezeru mezi jednotlivými sloupci.

.parent { 
 mezera mezi řádky: 120px; 
}
.parent { 
 sloupec-gap: 120px; 
}

Podívejte se na kód pro vlastnost gap v tomto Fragment kódu CodePen vidět nějaké příklady.

Využijte více vlastností Flex na vašem webu

Doufejme, že jste nyní obeznámeni s různými vlastnostmi flex, které můžete použít k zarovnání položek na své webové stránce. To zahrnuje, jak můžete použít vlastnosti flex-direction, justify-content, align-self, align-items, align-content a gap.

Flexbox je výkonná technika rozvržení, ale je to jen jedna malá část CSS. Můžete se také dozvědět o nových vlastnostech CSS, technikách čistého kódování a nástrojích používaných pro optimalizaci CSS.

11 užitečných nástrojů pro kontrolu, čištění a optimalizaci souborů CSS

Přečtěte si další

O autorovi