Ako používať Flex na zarovnanie prvkov HTML

Flex vlastnosti v CSS vám umožňujú zarovnať položky flexibilnejšie a pohotovejšie. Je to užitočné, keď chcete, aby vaše prvky HTML boli vo webovom prehliadači pohotovejšie.

V tomto článku sa dozviete, ako môžete použiť určité vlastnosti ohybu. To zahŕňa vlastnosti flex-direction, justify-content, align-self, align-items, align-content a gap.

Ako nastaviť CSS Flex Display

Príklad štruktúry, ktorú môžete použiť na preskúmanie základy flexboxu je množina podradených divov pod jednou nadradenou div. V nižšie uvedenom kóde je hlavný „rodičovský“ div. Tri podradené prvky div predstavujú položky, ktoré môžete zarovnať pomocou vlastností flex.

Aby akýkoľvek flexibilný styling fungoval, budete musieť pridať displej: flex majetku do nadradeného flexibilného kontajnera.

.parent {
 displej: flex;
}

Bez ohybu sa podradené divy zobrazujú jeden po druhom v stĺpcovom útvare nadol na stránke.

Ak chcete zobraziť príklad tohto nastavenia, zobrazte a spustite kód v tomto Útržok kódu CodePen.

Ako ovládať smer rozloženia

The flex-direction vlastnosť určuje smer riadkov alebo stĺpcov podradených položiek.

Možnosti pre vlastnosť flex-direction zahŕňajú:

Smer ohybu: riadok | stĺpec | rad-spiatočka | stĺpec-spätne

Budete musieť pridať nadradený kontajner obklopujúci položky, ktoré chcete zarovnať.

HTML:

CSS:

.červená { farba pozadia: červená; }
.oranžová { farba pozadia: oranžová; }
.yellow { farba pozadia: žltá; }
.zelená { farba pozadia: zelená;}
.modrá { farba pozadia: modrá; }
.fialová { farba pozadia: fialová; }
.parent div {
 šírka: 40px;
 výška: 40px;
}

Aplikujte vlastnosť flex-direction na nadradený ohybný kontajner. Tým sa zarovnajú podradené položky div.

.parent {
 šírka: 300px;
 displej: flex; 
 smer ohybu: riadok;
}

Mnohé vlastnosti ohybu sa vzťahujú na koncepciu hlavnej osi a priečnej osi. Keď je smer ohybu riadok, hlavná os predstavuje horizontálny smer a krížová os predstavuje vertikálu. Hodnota stĺpca prepína tieto osi.

Pozrite si kód pre vlastnosť flex-direction v tomto Útržok kódu CodePen vidieť nejaké príklady.

Ako zarovnať položky pozdĺž krížovej osi

The align-items vlastnosť riadi zarovnanie položiek pozdĺž krížovej osi. Pre predvolený smer ohybu riadok, zarovnanie položiek riadi vertikálne zarovnanie položiek.

Možnosti pre vlastnosť align-items zahŕňajú:

align-items: flex-start | ohybný koniec | align-items | natiahnuť

Pridajte vlastnosť align-items do nadradeného kontajnera na zarovnanie jeho potomkov.

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

Okrem toho si môžete zvoliť zarovnanie položiek pomocou základnej čiary. Štandardne možnosť základnej čiary zarovná všetky položky na základe základne položiek.

Môžete si tiež vybrať, odkiaľ začína základná línia, napríklad horná (prvá základná línia) alebo spodná (posledná základná línia).

align-items: baseline | prvá základná línia | posledná základná línia;

Pre zarovnanie položiek: základná čiara funguje, uistite sa, že každá položka má inú výšku alebo šírku (v závislosti od osi, ktorú používate).

​​​

Pozrite si kód pre vlastnosť align-items v tomto Útržok kódu CodePen vidieť nejaké príklady.

Ako prepísať zarovnanie na jednotlivých položkách

Môžete použiť zarovnať sa vlastnosť na prepísanie akéhokoľvek štýlu zarovnania položiek nadradeného kontajnera. To znamená, že pre jednotlivú položku môžete nastaviť samostatné zarovnanie ohybu.

Možnosti pre vlastnosť align-self zahŕňajú:

align-self: auto | flexibilný štart | ohybný koniec | centrum | základná línia | natiahnuť

Povedzme napríklad, že nadradený kontajner má štýl ohybu nastavený na „riadok“.

.parent {
 displej: flex; 
 smer ohybu: riadok;
}

Vlastnosť align-self môžete použiť na jednotlivé položky. Individuálna položka použije štýl vlastnosti align-self a vycentruje položku cez nadradený kontajner.

Pozrite si kód pre vlastnosť align-self v tomto Útržok kódu CodePen vidieť nejaké príklady.

Ako rozmiestniť čiary cez krížovú os

The zarovnať-obsah vlastnosť zarovnáva deti pozdĺž zvislej osi. Môže tiež určiť medzery medzi položkami, ktoré sú na viacerých riadkoch.

Možnosti pre vlastnosť align-content zahŕňajú:

align-content: flex-start | ohybný koniec | centrum | natiahnuť | medzera medzi | priestor okolo

Pridajte vlastnosť align-content do nadradeného flexibilného kontajnera. Vlastnosť align-content bude fungovať len vtedy, ak je nastavená vlastnosť flex-wrap. Pridajte flex-wrap: zabaľte do nadradeného kontajnera a zmenšite šírku nadradeného prvku div, aby ste položky vytlačili na viac ako jeden riadok.

.parent {
 flex-wrap: zábal;
 displej: flex;
 align-content: flex-start;
 šírka: 180px;
}

Pozrite si kód pre vlastnosť align-content v tomto Útržok kódu CodePen vidieť nejaké príklady.

Ako zarovnať položky na hlavnej osi

The ospravedlniť-obsah vlastnosť pridáva zarovnanie vpravo, vľavo alebo na stred k podradeným položkám. Položky tiež rozmiestni pridaním medzier medzi ne pri zarovnávaní obsahu.

Možnosti pre vlastnosť justify-content zahŕňajú:

zdôvodniť obsah: flexibilný štart | ohybný koniec | centrum | medzera medzi | priestor okolo | priestor-rovnomerne

Zabaľte položky, ktoré chcete zarovnať, pod nadradený flexibilný kontajner.

HTML:

CSS:

.červená { farba pozadia: červená; }
.zelená { farba pozadia: svetlozelená; }
.modrá { farba pozadia: modrá; }

Pridajte vlastnosť justify-content do nadradeného flexibilného kontajnera.

.parent {
 šírka: 300px;
 displej: flex; 
 zdôvodniť obsah: flexibilný štart;
}

Vlastnosť justify-content podporuje aj hodnoty uvedené v špecifikácii CSS Box Alignment. Patria sem hodnoty ako „začiatok“, „koniec“, „vľavo“ a „vpravo“. Niektoré prehliadače ich nepodporujú.

Vlastnosť justify-content má aj kľúčové slovo „safe“, ktoré môžete použiť. To zaisťuje, že sa prvky snažia zostať v dosahu nadradeného kontajnera.

Používa sa tiež na zabránenie strate údajov v prípade, že vycentrujete dlhé slovo. Použitie kľúčového slova safe zabraňuje kratšiemu divu odrezať prvé a posledné písmeno.

.parent {
 displej: flex; 
 zdôvodniť obsah: bezpečné centrum;
}

Kľúčové slovo bezpečné je tiež obmedzené na určité prehliadače. Kompatibilitu môžete skontrolovať na Môžem použiť.

Pozrite si kód pre vlastnosť justify-content v tomto Útržok kódu CodePen vidieť nejaké príklady.

Ako pridať medzery medzi položkami

The medzera vlastnosť umožňuje pridať medzi položky určitý priestor. Je to jeden z novšie funkcie CSS, ktoré vám môžu pomôcť vytvoriť responzívne rozloženie.

Aplikujte vlastnosť medzery na nadradený flexibilný kontajner.

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

Ak pridáte medzeru, ktorá núti dĺžku položiek presahovať šírku nadradenej položky, položky sa zmenšia, aby sa pokúsili zapadnúť do riadku.

.parent { 
 šírka: 300px;
 medzera: 120px;
}

Ak použijete flex-wrap: wrap na zatlačenie položiek do nového riadku, veľkosť medzery sa bude vzťahovať aj na priestor medzi riadkami.

.parent { 
 šírka: 300px;
 flex-wrap: zábal;
 medzera: 120px;
}

Okrem toho môžete tiež nastaviť riadok-medzera a stĺpec-medzera vlastnosti. Opäť ich budete musieť použiť na rodičovský flexibilný kontajner.

Vlastnosť row-gap určuje medzeru medzi jednotlivými riadkami. Vlastnosť column-gap určuje medzeru medzi jednotlivými stĺpcami.

.parent { 
 riadok-medzera: 120px; 
}
.parent { 
 medzera medzi stĺpcami: 120px; 
}

Pozrite si kód pre vlastnosť medzery v tomto Útržok kódu CodePen vidieť nejaké príklady.

Používanie viacerých vlastností Flex na vašej webovej stránke

Dúfajme, že už poznáte rôzne flexibilné vlastnosti, ktoré môžete použiť na zarovnanie položiek na svojej webovej stránke. To zahŕňa, ako môžete použiť vlastnosti flex-direction, justify-content, align-self, align-items, align-content a gap.

Flexbox je výkonná technika rozloženia, ale je to len jedna malá časť CSS. Môžete sa tiež dozvedieť o nových vlastnostiach CSS, technikách čistého kódovania a nástrojoch používaných na optimalizáciu CSS.

11 užitočných nástrojov na kontrolu, čistenie a optimalizáciu súborov CSS

Prečítajte si ďalej

O autorovi