Ako používať Flex, aby bol váš web citlivejší

Moderný dizajn webových stránok musí reagovať na zmeny obsahu alebo veľkosti prehliadača. Môžete to dosiahnuť pomocou vanilla CSS, mediálnych dopytov alebo flexboxu.

Určité vlastnosti ohybu, ako je ohybný obal alebo ohybný rast, môžu zmeniť veľkosť alebo umiestnenie prvku vizuálne príťažlivým spôsobom. V tomto článku nájdete príklady toho, ako môžete použiť vlastnosti flex-grow, flex-shrink, flex-wrap, flex-flow a order flex.

Ako nastaviť CSS Flex Display

Ak nie ste oboznámení s základy flexboxu, môžete to preskúmať Útržok kódu CodePen. Obsahuje príklad kódu pre jednoduché nastavenie flexboxu. Najprv budete musieť zabaliť podradené položky pod nadradený div alebo „flex kontajner“.

<trieda div="rodič">
<trieda div="podradená položka"></div>
<trieda div="podradená položka"></div>
<trieda div="podradená položka"></div>
</div>

Pridajte displej: flex majetku do materskej div.

.rodič {
 displej: flex;
}

Ako pestovať položky v kontajneri

The flex-grow vlastnosť umožňuje podriadeným položkám expandovať tak, aby zaplnili priestor dostupný v ich nadradenom div. Táto vlastnosť vám umožňuje určiť "pomer" množstva miesta, ktoré môže zaberať každá položka krabice.

Ak chcete pridať flex-grow, pridajte vlastnosť CSS flex-grow ku každej z podradených položiek.

<trieda div="rodič">
<div style="farba pozadia: červená; flexibilný rast: 1"></div>
<div style="farba pozadia: oranžová; flexibilný rast: 1"></div>
<div style="farba pozadia: žltá; flexibilný rast: 1"></div>
<div style="farba pozadia: zelená; flexibilný rast: 3"></div>
<div style="farba pozadia: modrá; flexibilný rast: 1"></div>
</div>

.rodič {
 šírka: 500px;
 displej: flex; 
}

Flex-rast 0 pre každú položku znamená, že krabice sa nerozšíria tak, aby zaplnili priestor ich rodiča. 0 je predvolená hodnota pre túto vlastnosť.

Pružný rast o 1 pre každú položku prinúti všetky krabice, aby sa roztiahli rovnako, aby sa zmestili do dostupného priestoru vo vnútri rodiča.

Ak jedna z položiek mala väčší ohyb, napríklad:

<div style="farba pozadia: zelená; flexibilný rast: 3"></div>

Zelené políčko sa pokúsi získať až trojnásobok priestoru ako ostatné políčka.

Pozrite si kód pre vlastnosť flex-grow v tomto Útržok kódu CodePen vidieť fungujúci príklad.

Ako zmenšiť položky v kontajneri

V niektorých prípadoch sa môže šírka rodiča zmenšiť a položky vnútri rodiča sa doň už nezmestia. Môžete použiť flex-zmršťovanie vlastnosť zmenšiť veľkosť boxov. Týmto spôsobom môžu zostať obsiahnuté vo vnútri rodiča.

Flex-shrink vám umožňuje určiť pomer, o koľko sa má každá položka zmrštiť.

Pridajte vlastnosť flex-shrink do podradených položiek div. Zmeňte šírky rodiča a potomka tak, aby sa položky nezmestili do kontajnera.

<trieda div="rodič">
<div style="farba pozadia: červená; flex-zmrštenie: 1"></div>
<div style="farba pozadia: oranžová; flex-zmrštenie: 1"></div>
<div style="farba pozadia: žltá; flex-zmrštenie: 1"></div>
<div style="farba pozadia: zelená; flex-zmrštenie: 2"></div>
<div style="farba pozadia: modrá; flex-zmrštenie: 1"></div>
</div>

.rodič {
 šírka: 500px;
 displej: flex; 
}
.rodič div {
 šírka: 150px;
 výška: 150px;
}

Flex-zmrštenie 1 pre všetky položky znamená, že všetky položky sa zmrštia rovnako, ak sa zmenší šírka rodiča.

Ak má jedna z položiek väčšie zmrštenie, napríklad:

<div style="farba pozadia: zelená; flex-zmrštenie: 2"></div>

Zelený rámček sa pokúsi zmenšiť dvakrát viac ako ostatné políčka.

Pozrite si kód pre vlastnosť flex-shrink v tomto Útržok kódu CodePen vidieť fungujúci príklad.

Ako posúvať položky do ďalšieho riadka

The ohybný obal vlastnosť vám umožňuje presunúť položky na ďalší riadok, ak sa nezmestia do šírky nadradeného kontajnera. Tu sa položky nezmršťujú a budete môcť zachovať výšku a šírku položiek.

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

flex-wrap: nowrap | zabaliť | wrap-reverse

Pridajte vlastnosť flex-wrap do nadradeného flexibilného kontajnera. Uistite sa, že šírka nádoby je dostatočne malá, aby sa do nej nezmestili detské predmety. To vynúti všetky pretekajúce položky do nového riadku.

<trieda div="rodič">
<trieda div="červená"></div>
<trieda div="oranžová"></div>
<trieda div="žltá"></div>
<trieda div="zelená"></div>
<trieda div="Modrá"></div>
</div>

.rodič {
 šírka: 300px;
 orámovanie: 1px plná čierna;
 displej: flex;
 flex-wrap: zábal;
}
.rodič div {
 šírka: 100px;
 výška: 100px;
}

Hodnota zábalu umiestni položky začínajúce v pravom hornom rohu kontajnera. Hodnota wrap-reverse zmení polohu položiek tak, aby začínali v pravom dolnom rohu kontajnera. Pri zabaľovaní položiek vloží položky do nového riadku nad, nie pod.

Ak zadáte výšku v nadradenom kontajneri, kontajner pridá medzery medzi riadkami položiek.

Ak chcete odstrániť tieto medzery, ale zachovať výšku nadradeného prvku div, použite vlastnosť align-content. Zadajte vlastnosť align-content ako "flex-start" v nadradenom div:

.rodič { 
 šírka: 300px; 
 výška: 300px;
 orámovanie: 1px plná čierna; 
 displej: flex;
 flex-wrap: zábal; 
 zarovnať-obsah: flex-začať;
}

Vlastnosť align-content je jednou z niekoľkých základných vlastnosti flexboxu, ktoré vám umožňujú ovládať zarovnanie.

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

Ako posúvať položky do ďalšieho stĺpca

Ak používate iné rozloženie (napríklad stĺpec) a stále potrebujete prvky zalomiť, môžete použiť flex-flow nehnuteľnosť. Táto vlastnosť ohybu je kombináciou vlastností flex-wrap a flex-direction.

Príklady kombinácií možností, ktoré môžete použiť pre vlastnosť flexibilného toku, zahŕňajú:

flex-wrap: row nowrap | stĺpec nowrap | zalomenie riadkov | obal stĺpca | riadok zalomenie-spätne | stĺpec zabaliť-obrátiť

Táto vlastnosť funguje podobne ako vlastnosť flex-wrap vyššie. Pridajte flex-flow do materskej flex nádoby. Uistite sa, že šírka nadradeného kontajnera je dostatočne malá, aby prinútila podriadené položky zabaliť:

.rodič {
 šírka: 300px; 
 orámovanie: 1px plná čierna; 
 displej: flex; 
 flex-flow: obal kolóny;
}
.rodič div {
 šírka: 100px;
 výška: 100px;
}

Položky sa zalomia v zadanom smere (riadok alebo stĺpec).

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

Ako zmeniť poradie položiek

Ak ste potrebovali preusporiadať položky na stránke z dôvodu akéhokoľvek druhu dynamických údajov, môžete použiť objednať flexibilná vlastnosť. Táto vlastnosť vám umožňuje určiť poradie, v ktorom sa každá položka zobrazí.

Čísla nemusia nevyhnutne začínať od 1. Môžete použiť ľubovoľné čísla a intervaly a vlastnosť order zoradí prvky HTML od najnižšieho po najvyššie.

Pridajte vlastnosť objednávky ku každej z položiek v nadradenom flex kontajneri:

<trieda div="rodič">
<trieda div="červená" štýl="poradie: 2"></div>
<trieda div="oranžová" štýl="poradie: 1"></div>
<trieda div="žltá" štýl="poradie: 5"></div>
<trieda div="zelená" štýl="poradie: 4"></div>
<trieda div="Modrá" štýl="poradie: 3"></div>
</div>

V tomto prípade bude oranžové pole úplne vpravo, po ňom budú nasledovať červené, modré, zelené a žlté polia.

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

Experimentujte s ďalšími vlastnosťami CSS na vašom webe

Tieto flexibilné vlastnosti môžete použiť na zvýšenie odozvy svojej webovej lokality. To zahŕňa použitie vlastností flex-grow, flex-shrink, flex-wrap, flex-flow a order flex.

Môžete sa tiež dozvedieť o ďalších vlastnostiach flex, ktoré vám pomôžu zarovnať prvky HTML na vašej webovej lokalite.

Ako používať Flex na zarovnanie prvkov HTML

Prečítajte si ďalej

O autorovi