Kompletný sprievodca programom Flexbox Triky CSS

Pozadie

Modul Flexbox Layout(Flexibilná skrinka) (odporúčanie kandidáta W3C z októbra 2017) má za cieľ poskytnúť efektívnejší spôsob rozloženia, zarovnania a rozloženia priestoru medzi položkami v kontajneri, aj keď je ich veľkosť neznáma a / alebo dynamická (teda slovo „flex“).

Hlavnou myšlienkou flexibilného rozloženia je dať kontajneru schopnosť meniť šírku / výšku (a poradie) svojich položiek tak, aby čo najlepšie vyplnili dostupný priestor (väčšinou pre všetky druhy zobrazovacích zariadení a veľkostí obrazoviek). Flex kontajner rozširuje položky tak, aby vyplnili dostupné voľné miesto, alebo ich zmenší, aby sa zabránilo pretečeniu.

Najdôležitejšie je, že rozloženie flexboxu je smerovo-agnostické na rozdiel od bežných rozložení (blok, ktorý je zvisle založený a vložený, ktorý je vodorovne založený). Aj keď fungujú dobre pre stránky, chýba im flexibilita (nie je to určené pre slovné hračky) na podporu veľkých alebo zložitých aplikácií (najmä pokiaľ ide o zmenu orientácie, zmenu veľkosti, natiahnutie, zmenšenie atď.).

Poznámka: Rozloženie Flexboxu je najvhodnejšie pre komponenty aplikácie a malé rozloženia, zatiaľ čo rozloženie Mriežka je určené pre rozloženia väčšieho rozsahu.

Základy a terminológia

Pretože flexbox je celý modul a nie jedna vlastnosť, zahŕňa veľa vecí vrátane celej sady ich vlastností. Niektoré z nich sú určené na umiestnenie na kontajner (nadradený prvok, známy ako „flex kontajner“), zatiaľ čo iné sú určené na umiestnenie na deti (uvedené „flex položky“).

Ak je „bežné“ rozloženie založené na blokových aj riadkových smeroch toku, potom je flexibilné rozloženie založené na „smeroch flex-flow“. Pozrite sa prosím na tento obrázok zo špecifikácie a vysvetlite hlavnú myšlienku, ktorá stojí za rozložením flex.

Položky budú rozložené po buď main axis(od main-startdo main-end) alebo priečnou osou (z cross-startk cross-end).

hlavná os - Hlavná os flex kontajnera je primárna os, pozdĺž ktorej sú rozložené flex predmety. Pozor, nemusí to byť nevyhnutne horizontálne; záleží to od flex-directionnehnuteľnosti (viď nižšie).
hlavný štart | main-end - Položky flexa sa umiestňujú do kontajnera počnúc od main-start a po main-end.
hlavná veľkosť - šírka alebo výška položky flexa, podľa toho, ktorá je v hlavnej dimenzii, je hlavnou veľkosťou položky. Vlastnosť hlavnej veľkosti položky flex je buď vlastnosť „šírka“ alebo „výška“, podľa toho, ktorá je v hlavnej dimenzii.
priečna os - Os kolmá na hlavnú os sa nazýva priečna os. Jeho smer závisí od smeru hlavnej osi.
krížový štart | cross-end - linky Flex sú naplnené položkami a vkladajú sa do kontajnera počnúc stranou cross-start flex kontajnera a smerujúcou k strane cross-end.
veľkosť kríža - šírka alebo výška položky typu flex, podľa toho, ktorá z nich má rozmer kríža, predstavuje veľkosť kríža položky. Vlastnosťou veľkosti kríža je ktorákoľvek zo „šírky“ alebo „výšky“, ktorá je v krížovej dimenzii.

Získajte plagát!

Často odkazujete na túto príručku? Prilepte kópiu na stenu kancelárie.

Kúpiť plagát

Vlastnosti pre nadradeného
(flex kontajner)

displej

Toto definuje flex kontajner; vložený alebo blokovaný v závislosti od danej hodnoty. Umožňuje flexibilný kontext pre všetky jeho priame deti.

.container ( display: flex; /* or inline-flex */ )

Upozorňujeme, že stĺpce CSS nemajú žiadny vplyv na flex kontajner.

flex-direction

Týmto sa stanoví hlavná os, čím sa definuje smer, ktorým sú položky flex umiestnené do nádoby flex. Flexbox je (okrem voliteľného balenia) koncept jednosmerného usporiadania. Myslite na to, že položky flex sú primárne rozmiestnené buď vo vodorovných riadkoch, alebo vo zvislých stĺpcoch.

.container ( flex-direction: row | row-reverse | column | column-reverse; )

row(predvolené): zľava doprava dovnútra ltr; sprava doľava dovnútrartl
row-reverse: sprava doľava dovnútra ltr; zľava doprava dovnútrartl
column: rovnaké ako, rowale zhora nadol
column-reverse: rovnaké ako, row-reverseale zdola nahor

flex-wrap

Predvolene sa všetky flexibilné položky pokúsia umiestniť na jeden riadok. Môžete to zmeniť a umožniť tejto položke, aby sa položky podľa potreby zabaľovali.

.container ( flex-wrap: nowrap | wrap | wrap-reverse; )

nowrap (predvolené): všetky flexibilné položky budú na jednom riadku
wrap: položky flex budú zabalené do viacerých riadkov, zhora nadol.
wrap-reverse: položky flex budú zabalené do viacerých riadkov zdola nahor.

Tu sú niektoré vizuálne ukážky flex-wrap.

flex-flow

Toto je skratka pre vlastnosti flex-directiona flex-wrap, ktoré spoločne definujú hlavnú a priečnu os kontajnera ohybov. Predvolená hodnota je row nowrap.

.container ( flex-flow: column wrap; )

justify-content

Toto definuje zarovnanie pozdĺž hlavnej osi. Pomáha distribuovať zvyšné voľné miesto, keď sú buď všetky položky flexa na riadku neohybné, alebo sú ohybné, ale dosiahli maximálnu veľkosť. Tiež vynakladá určitú kontrolu nad zarovnaním položiek, keď pretekajú cez čiaru.

.container ( justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right… + safe | unsafe; )

flex-start (predvolené): položky sú zabalené na začiatku smeru ohybu.
flex-end: položky sú zabalené na konci smeru ohybu.
start: položky sú zabalené na začiatku writing-modesmeru.
end: položky sú zabalené na konci writing-modesmeru.
left: predmety sú zabalené k ľavému okraju kontajnera, pokiaľ to nemá zmysel pre flex-direction, potom sa chová ako start.
right: položky sú balené smerom k pravému okraju kontajnera, pokiaľ to nemá zmysel pre značku flex-direction, potom sa správa ako end.
center: položky sú vycentrované pozdĺž čiary
space-between: položky sú rovnomerne rozložené v rade; prvá položka je na začiatočnom riadku, posledná položka na konečnom riadku
space-around: položky sú rovnomerne rozložené v rade s rovnakým priestorom okolo nich. Upozorňujeme, že vizuálne nie sú medzery rovnaké, pretože všetky položky majú rovnaký priestor na oboch stranách. Prvá položka bude mať jednu jednotku priestoru oproti okraju kontajnera, ale dve jednotky priestoru medzi ďalšou položkou, pretože táto ďalšia položka má svoje vlastné správne medzery, ktoré sa uplatňujú.
space-evenly: položky sú distribuované tak, aby boli medzery medzi ľubovoľnými dvoma položkami (a medzerou po okraje) rovnaké.

Upozorňujeme, že podpora prehľadávača pre tieto hodnoty je jemná. Napríklad, space-betweennikdy nedostanete podporu z niektorých verzií Edge a start / end / left / right ešte nie sú v Chrome. MDN má podrobné grafy. Najbezpečnejšie sú hodnoty flex-start, flex-enda center.

Existujú aj dve ďalšie kľúčové slová, ktoré môžete spárovať s týmito hodnotami: safea unsafe. Používanie safezaisťuje, že aj keď urobíte tento typ pozícií, nemôžete tlačiť na prvok, ktorý vykresľuje mimo obrazovku (napr. Zhora) takým spôsobom, že sa nedá rolovať ani obsah (tzv. Strata dát). .

zarovnať položky

Toto definuje predvolené správanie spôsobu rozloženia flexibilných položiek pozdĺž priečnej osi na aktuálnom riadku. Predstavte si to ako justify-contentverziu pre priečnu os (kolmo na hlavnú os).

.container ( align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end +… safe | unsafe; )

stretch (predvolené): natiahnutím naplníte kontajner (stále rešpektujte minimálnu a maximálnu šírku)
flex-start/ start/ self-start: položky sú umiestnené na začiatku priečnej osi. Rozdiel medzi nimi je jemný a týka sa rešpektovania flex-directionpravidiel alebo writing-modepravidiel.
flex-end/ end/ self-end: položky sú umiestnené na konci priečnej osi. Rozdiel je opäť jemný a týka sa rešpektovania flex-directionpravidiel vs. writing-modepravidiel.
center: položky sú vycentrované v priečnej osi
baseline: položky sú zarovnané, napríklad ich základné čiary sú zarovnané

safeA unsafemodifikačné kľúčové slová môžu byť použité v spojení so všetkými ostatnými týchto kľúčových slov (aj keď podporné poznámka browser) a zaoberajú sa vám pomôže zabrániť zladenie prvkov tak, že obsah sa stane nedostupným.

align-content

Týmto sa zarovnávajú riadky kontajnera flex, keď je v priečnej osi viac priestoru, podobne ako pri justify-contentzarovnávaní jednotlivých položiek v hlavnej osi.

Poznámka: Táto vlastnosť sa prejaví iba vo viacriadkových flexibilných kontajneroch, kde flex-flowje nastavená buď wrapalebo wrap-reverse). Jednoriadkový flexibilný kontajner (tj. Kde flex-flowje nastavená predvolená hodnota no-wrap) nebude odrážať align-content.

.container ( align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline +… safe | unsafe; )

normal (predvolené): položky sa balia na predvolenú pozíciu, akoby nebola nastavená žiadna hodnota.
flex-start/ start: veci zabalené na začiatok kontajnera. (Podporovanejší) flex-startvyznamenáva, flex-directionzatiaľ čo startvyznamenáva writing-modesmer.
flex-end/ end: veci zabalené na koniec kontajnera. (Väčšia podpora) flex-endvyznamenáva, flex-directionzatiaľ čo koniec ctí writing-modesmer.
center: predmety umiestnené v strede nádoby
space-between: položky rovnomerne rozložené; prvý riadok je na začiatku kontajnera, zatiaľ čo posledný je na konci
space-around: položky rovnomerne rozložené s rovnakým priestorom okolo každého riadku
space-evenly: položky sú rovnomerne rozložené s rovnakým priestorom okolo seba
stretch: čiary sa roztiahnu, aby zabrali zvyšné miesto

Vlastnosti pre deti
(flexibilné položky)

objednať

Predvolene sú flexibilné položky rozložené v zdrojovej objednávke. Však ordervlastnosť ovláda poradí, v akom sa objavujú v pružnom kontajneri.

.item ( order: 5; /* default is 0 */ )

flex-grow

To definuje schopnosť položky flex rásť, ak je to potrebné. Prijíma bezjednotkovú hodnotu, ktorá slúži ako proporcia. Diktuje, aké množstvo dostupného priestoru vo vnútri flexibilnej nádoby má položka zaberať.

Ak sú všetky položky flex-grownastavené na 1, zostávajúci priestor v kontajneri sa rovnomerne rozdelí medzi všetky deti. Ak má jedno z detí hodnotu 2, zostávajúci priestor by zabral dvakrát toľko miesta ako ostatné (alebo sa o to aspoň pokúsi).

.item ( flex-grow: 4; /* default 0 */ )

Záporné čísla sú neplatné.

flex-shrink

Toto definuje schopnosť položky flex sa v prípade potreby zmenšiť.

.item ( flex-shrink: 3; /* default 1 */ )

Záporné čísla sú neplatné.

flex-základ

Toto definuje predvolenú veľkosť prvku pred distribúciou zostávajúceho priestoru. Môže to byť dĺžka (napr. 20%, 5rem atď.) Alebo kľúčové slovo. autoKľúčové slovo znamená "Pozrite sa na moje šírku alebo výšku majetku" (ktorý bol dočasne vykonáva pomocou main-sizekľúčového slova do zastarané). Medzi contentkľúčové slovo znamená "veľkosť je založený na obsahu položky" - toto kľúčové slovo nie je dobre podporované doteraz, takže je ťažké skúške a ťažšie vedieť, aké sú jeho bratia max-content, min-contenta fit-contentrobiť.

.item ( flex-basis: | auto; /* default auto */ )

Ak je nastavené na 0, extra priestor okolo obsahu sa nezapočítava. Ak je nastavené na auto, extra priestor sa distribuuje na základe jeho flex-growhodnoty. Pozrite si túto grafiku.

flex

Toto je skratka pre flex-grow, flex-shrinka flex-basiskombinovaná. Druhý a tretí parameter ( flex-shrinka flex-basis) sú voliteľné. Predvolená hodnota je 0 1 auto, ale ak ju nastavíte s jedinou číselnou hodnotou, je to podobné 1 0.

.item ( flex: none | ( ? || ) )

Odporúča sa použiť túto vlastnosť skratky namiesto nastavenia jednotlivých vlastností. Skratka inteligentne nastavuje ďalšie hodnoty.

zosúladiť sa

To umožňuje align-itemsprepísať predvolené zarovnanie (alebo to, ktoré určuje ) pre jednotlivé položky flex.

Prečítajte si align-itemsvysvetlenie, aby ste pochopili dostupné hodnoty.

.item ( align-self: auto | flex-start | flex-end | center | baseline | stretch; )

Všimnite si, že float, cleara vertical-alignnemajú žiadny vplyv na flex položky.

Príklady

Začnime veľmi veľmi jednoduchým príkladom, ktorý rieši takmer každodenný problém: dokonalé centrovanie. Jednoduchšie to nemôže byť, ak používate flexbox.

.parent ( display: flex; height: 300px; /* Or whatever */ ) .child ( width: 100px; /* Or whatever */ height: 100px; /* Or whatever */ margin: auto; /* Magic! */ )

To sa spolieha na skutočnosť, že okraj nastavený na autovo flexibilnej nádobe absorbuje ďalší priestor. Takže nastavením zvislého okraja autosa položka stane dokonale vycentrovanou v oboch osiach.

Teraz použijeme niekoľko ďalších vlastností. Zvážte zoznam 6 položiek, všetky s pevnými rozmermi, ale je možné ich zmeniť automaticky. Chceme, aby boli rovnomerne rozložené na vodorovnej osi, aby pri zmene veľkosti prehliadača bolo všetko pekne zmenšené a bez mediálnych dotazov.

.flex-container ( /* We first create a flex layout context */ display: flex; /* Then we define the flow direction and if we allow the items to wrap * Remember this is the same as: * flex-direction: row; * flex-wrap: wrap; */ flex-flow: row wrap; /* Then we define how is distributed the remaining space */ justify-content: space-around; )

Hotový. Všetko ostatné je iba o stylingu. Nižšie je pero s týmto príkladom. Určite choďte na CodePen a skúste zmeniť veľkosť svojich okien, aby ste videli, čo sa stane.

Skúsme niečo iné. Predstavte si, že máme navigačný prvok zarovnaný doprava na samom vrchu našej webovej stránky, ale chceme, aby bol sústredený na stredne veľké obrazovky a aby bol jeden stĺpec na malých zariadeniach. Dosť ľahké.

/* Large */ .navigation ( display: flex; flex-flow: row wrap; /* This aligns items to the end line on main-axis */ justify-content: flex-end; ) /* Medium screens */ @media all and (max-width: 800px) ( .navigation ( /* When on medium sized screens, we center it by evenly distributing empty space around items */ justify-content: space-around; ) ) /* Small screens */ @media all and (max-width: 500px) ( .navigation ( /* On small screens, we are no longer using row direction but column */ flex-direction: column; ) )

Skúsme niečo ešte lepšie hraním s flexibilitou flexibilných položiek! Čo tak rozloženie troch stĺpcov, ktoré sú prvé na mobile, s hlavičkou a päty celej šírky. A nezávisle od objednávky zdroja.

.wrapper ( display: flex; flex-flow: row wrap; ) /* We tell all items to be 100% width, via flex-basis */ .wrapper> * ( flex: 1 100%; ) /* We rely on source order for mobile-first approach * in this case: * 1. header * 2. article * 3. aside 1 * 4. aside 2 * 5. footer */ /* Medium screens */ @media all and (min-width: 600px) ( /* We tell both sidebars to share a row */ .aside ( flex: 1 auto; ) ) /* Large screens */ @media all and (min-width: 800px) ( /* We invert order of first sidebar and main * And tell the main element to take twice as much width as the other two sidebars */ .main ( flex: 2 0px; ) .aside-1 ( order: 1; ) .main ( order: 2; ) .aside-2 ( order: 3; ) .footer ( order: 4; ) )

Predpona Flexboxu

Flexbox vyžaduje predponu niektorých dodávateľov, aby podporoval čo najviac prehľadávačov. Nezahŕňa iba vlastnosti predpony s predponou dodávateľa, ale v skutočnosti existujú úplne odlišné názvy vlastností a hodnôt. Je to preto, lebo špecifikácia Flexboxu sa časom menila a vytvárala „starú“, „tweenerovú“ a „novú“ verziu.

Možno najlepším spôsobom, ako to vyriešiť, je napísať novú (a poslednú) syntax a spustiť CSS prostredníctvom nástroja Autoprefixer, ktorý zvláda záložné postupy veľmi dobre.

Alternatívne je tu Sass, @mixinktorý vám pomôže s niektorými predponami, ktoré vám tiež poskytnú predstavu o tom, čo je potrebné urobiť:

@mixin flexbox() ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; ) @mixin flex($values) ( -webkit-box-flex: $values; -moz-box-flex: $values; -webkit-flex: $values; -ms-flex: $values; flex: $values; ) @mixin order($val) ( -webkit-box-ordinal-group: $val; -moz-box-ordinal-group: $val; -ms-flex-order: $val; -webkit-order: $val; order: $val; ) .wrapper ( @include flexbox(); ) .item ( @include flex(1 200px); @include order(2); )

Súvisiace vlastnosti

Kompletný sprievodca po sieti
Položky almanachu vo vlastnostiach mriežky, napríklad mriežka-riadok / mriežkový stĺpec

Ostatné zdroje

Flexbox v špecifikáciách CSS
Flexbox na MDN
Flexbox v Opere
Ponorte sa do Flexboxu od spoločnosti Bocoup
Miešanie syntaxí pre najlepšiu podporu prehľadávača v CSS-Tricks
Flexbox od Raphaela Goettera (FR)
Flexplorer od Bennetta Feelyho

Ploštice

Flexbox určite nie je bez chýb. Najlepšia zbierka z nich, akú som videl, je Philip Walton a Flexbugs od Grega Whitwortha. Je to miesto s otvoreným zdrojovým kódom na ich sledovanie, takže si myslím, že je najlepšie prepojiť ich.

Podpora prehľadávača

Rozdelené „verziou“ flexboxu:

(nové) znamená nedávnu syntax zo špecifikácie (napr. display: flex;)
(tweener) znamená zvláštnu neoficiálnu syntax z roku 2011 (napr. display: flexbox;)
(staré) znamená starú syntax z roku 2009 (napr. display: box;)

Chrome	Safari	Firefox	Opera	IE	Hrana	Android	iOS
20- (starý) 21+ (nový)	3,1+ (staré) 6,1+ (nové)	2-21 (staré) 22+ (nové)	12.1+ (nové)	10 (tweener) 11+ (nový)	17+ (nové)	2,1+ (staré) 4,4+ (nové)	3,2+ (staré) 7,1+ (nové)

Prehliadač Blackberry 10+ podporuje novú syntax.