Noklusējuma vērtība: 0 1 Auto.

W3C iesaka izmantot saīsināto elastīgo īpašumu, nevis atsevišķas īpašības, jo flex pareizi atiestata jebkādus nenoteiktus komponentus tipiskai lietošanai.

izlīdzināt sevi.

ALOW-PAŠU ĪPAŠUMS ļauj ignulēt noklusējuma izlīdzināšanu (vai vērtību, kas norādīta, izmantojot izlīdzināt vienumus) atsevišķiem flex elementiem. Lai saprastu pieejamās vērtības, skatiet Flex konteinera izlīdzināšanas priekšmetu aprakstu.

Vērtības

Par trešo un ceturto flex elementi, saskaņošana ir ignorēta caur izlīdzināt-pašmāju īpašumu.

Modulis Flexbox-Leuauta (Elastīgs kaste - "elastīgs bloks", ieslēgts Šis brīdis W3C kandidātu ieteikums) liek uzdevumam piedāvāt efektīvāku veidu, kā ievietot, izlīdzināt un izplatīt brīvo vietu starp tvertnes elementiem, pat ja to lielums nav zināms un / vai dinamisks (līdz ar to vārds "elastīgs").

Galvenā ideja Flex-Guard tvertnē apveltīta ar spēju mainīt platumu / augstumu (un kārtību) tās elementiem, lai vislabāk pildītu telpu (vairumā gadījumu - lai atbalstītu visu veidu displejus un ekrānu izmēru ). Flex konteiners stiepjas elementus, lai aizpildītu brīvu vietu vai saspiež tos, lai novērstu robežu ārā.

Vissvarīgākais, Flexbox-Leiut nav atkarīgs no virziena, atšķirībā no parastajiem Leantiem (blokiem, kas atrodas vertikāli, un inline elementi ir horizontāli). Lai gan parastā Leiaut ir lieliska tīmekļa lapām, tai trūkst elastības (bez kanalizācijas), lai atbalstītu lielus vai sarežģītus lietojumus (jo īpaši, lai mainītu ekrāna orientāciju, izmēru maiņu, stiepšanos, saspiešanu utt.).

Piezīme: Flexbox-Leuaout vislabāk piemērota lietojumprogrammas un maza leuautics daļām, bet režģis ir vairāk izmantots Laisi liela mēroga.

Pamati

Jo Flexbox ir viss modulis, nevis tikai viens īpašums, tas apvieno daudzas īpašības. Daži no tiem būtu jāpiemēro konteineram (mātes elements, tā sauktais flex konteiners), bet citas īpašības attiecas uz bērnu elementiem, vai flex elementi.

Ja parastais Leuaout ir balstīts uz bloku un inline elementu virzieniem, Flex-Liatavs ir balstīts uz "Flex plūsmas virzieniem". Pārbaudiet šo shēmu no specifikācijas, kas izskaidro Fleauitov pamatideju.

Lielākā daļa elementu tiks sadalīti kopā galvenā ass (no galvenais sākums. agrāk galvenais elements.) vai kopā šķērsvirziena ass (no krustojums. agrāk krustojums.).

• galvenais ass - galvenā ass, kurā atrodas elastīgi elementi. Piezīme, tas ne vienmēr ir horizontāls, tas viss ir atkarīgs no fleks-virziena īpašuma (skatīt zemāk).
• galvenais sākums. | galvenais elements. - Flex elementi tiek ievietoti konteinerā no galvenā sākuma pozīcijas uz galveno gala stāvokli.
• galvenais izmērs. - Flex elementa platums vai augstums atkarībā no izvēlētās primārās vērtības. Galvenā vērtība var būt vai nu platums vai elementa augstums.
• Šķērsgriezums. - šķērsvirziena ass, kas ir perpendikulāra galvenajam. Tās virziens ir atkarīgs no galvenās ass virziena.
• krustojums. | krustojums. - Flex rindas ir piepildītas ar elementiem un atrodas konteinerā no krustveida starta pozīcijas uz šķērsgriezuma pozīciju.
• krustošanās lielums - Flex elementa platums vai augstums atkarībā no izmēra izmēra ir vienāda ar šo lielumu. Šis īpašums sakrīt ar platumu vai augstumu vienības atkarībā no izmēra izmēra.

Īpašības

displejs: Flex | Inline-flex;

Tas attiecas uz:

Nosaka Flex konteineru (inline vai bloku, atkarībā no izvēlētās vērtības), savieno elastīgo kontekstu visiem tās tuvākajiem pēcnācējiem.

Paturi prātā:

• CSS kolonnas nedarbojas ar elastīgu konteineru
• peldēšana, skaidra un vertikālā izlīdzināšana nedarbojas ar flex elementiem

flex-virziens.

Tas attiecas uz: Vecāku elements Flex-konteiners.

Iestata galvenās ass galveno asi, tādējādi nosakot konteinerā ievietoto flex elementu virzienu.

• rinda (noklusējums): no kreisās uz labo pusi uz LTR, pa labi, lai pa kreisi uz RTL;
• row-Reverse: pa labi pa kreisi ltr, no kreisās uz labo RTL;
• kolonna: līdzīga rindai, uz leju;
• kolonna-Reverse: Līdzīgi kā Row-Reverse, apakšā uz augšu.

flex-wrap.

Tas attiecas uz: Vecāku elements Flex-konteiners.

Nosaka, vai konteiners būs viena līnija vai vairākas līnijas, kā arī šķērsvirziena ass virziens, kas nosaka virzienu, kurā tiks izvietotas jaunas līnijas.

• nowrap (noklusējums): viena līnija / no kreisās uz labo pusi uz LTR, pa labi uz kreiso pusi uz RTL;
• wrap: Multi-line / no kreisās uz labo pusi LTR, pa labi, lai pa kreisi uz RTL;
• wrap-Reverse: Multi-line / pa labi pa kreisi LTR, no kreisās uz labo RTL.

elastīga plūsma.

Tas attiecas uz: Vecāku elements Flex-konteiners.

Tas ir flex virziena un flex-wrap īpašību samazinājums, kas kopā definē galveno un šķērsvirzienu asi. Noklusējums ņem vērtību no rindas nobīdes.

Tas attiecas uz: Vecāku elements Flex-konteiners.

Nosaka saskaņošanu attiecībā pret galveno asi. Palīdz izplatīt atlikušo brīvo vietu gadījumā, ja līnijas elementi nav "stiepjas", vai stiept, bet jau ir sasnieguši maksimālo lielumu. Ļauj kaut kādā veidā kontrolēt elementu izlīdzināšanu, kad virkne tiek atbrīvota.

• fLEX-START: elementi tiek pārvietoti uz līnijas sākumu;
• flex-end: elementi tiek pārvietoti pēc virknes beigām;
• centrs: elementi ir saskaņoti līnijas centrā;
• telpu starp: elementi tiek sadalīti vienmērīgi (pirmais elements līnijas sākumā, pēdējais - beigās);
• kosmosa ap: Elements tiek sadalīts vienmērīgi ar vienādu attālumu starp sevi un robežām virknes.

Tas attiecas uz: Vecāku elements Flex-konteiners.

Nosaka noklusējuma uzvedību Flex Elements ir attiecībā pret šķērsvirziena asi pašreizējā rindā. Apsveriet šo versiju, kas attaisno šķērsvirziena asi (perpendikulāri galvenajam).

• flex-Start: krusta starta robeža vienumiem atrodas uz starta stāvoklī;
• flex-end: krusteniskā robeža vienumiem atrodas krustveida pozīcijā;
• centrs: elementi ir saskaņoti šķērsvirziena ass centrā;
• bāzes līnija: elementi ir saskaņoti par to bāzes līniju;
• stiept (noklusējums): elementi ir izstiepti, aizpildot tvertni (ņemot vērā min-platuma / maksimālo platumu).

Tas attiecas uz: Vecāku elements Flex-konteiners.

Saskaņo flex konteineru līnijas klātbūtnē brīvas vietas uz šķērsvirziena ass, tādā pašā veidā, kā attaisnojums-saturs dara uz galvenās ass.

Piezīme: Šis īpašums nedarbojas ar viena līnijas flexbox.

• flex-Start: līnijas ir saskaņotas attiecībā pret tvertnes sākumu;
• flex-end: rindas ir saskaņotas attiecībā pret konteinera galu;
• centrs: rindas ir saskaņotas konteinera centrā;
• kosmosa starp: rindas tiek sadalītas vienmērīgi (pirmā rinda sākumā līnijas, tā ir beigās);
• space-apkārt: rindas tiek sadalītas vienmērīgi ar vienādu attālumu;
• stiept (noklusējums): rindas ir izstiepts, aizpildot brīvu vietu.

rīkojums

Tas attiecas uz:

Pēc noklusējuma Flex elementi atrodas tās sākotnējā secībā. Tomēr pasūtījuma īpašums var kontrolēt to atrašanās vietas secību konteinerā.

Pasūtījums:<integer\u003e

fleks-augt.

Tas attiecas uz: Meitas elements / elastīgs elements.

Nosaka Flex Element spēju "augt", ja nepieciešams. Ņem indeksētu vērtību, kas kalpo kā proporcija. Tas nosaka, kāda daļa no brīvas vietas iekšpusē konteinera elements var ieņemt.

Ja visiem priekšmetiem ir Flex-augt īpašums kā 1, tad katrs pēcnācējs saņems tādu pašu izmēru konteinera iekšpusē. Ja jūs iestatāt vienu no pēcnācējiem uz 2, tad tas prasīs divas reizes vairāk vietas nekā citi.

Flex-Grow:<numurs\u003e (noklusējums 0)

izliekums

Tas attiecas uz: Meitas elements / elastīgs elements.

Flex elementam nosaka spēju saspiest, ja nepieciešams.

Flex-shrink: (Noklusējums 1)

Negatīvie skaitļi netiek pieņemti.

flex-pamats.

Tas attiecas uz: Meitas elements / elastīgs elements.

Nosaka elementa noklusējuma lielumu pirms telpas izplatīšanas tvertnē.

Flex - pamats:<garums\u003e. | Auto (noklusējuma auto)

flex

Tas attiecas uz: Meitas elements / elastīgs elements.

Tas ir flex-augt, flex-shrink un flex-pamata samazinājums. Otrais un trešais parametri (Flex-Shrink, Flex-bāzes) ir obligāti. Noklusējuma vērtība ir 0 1 Auto.

izlīdzināt sevi.

Tas attiecas uz: Meitas elements / elastīgs elements.

Ļauj ignulēt noklusējuma izlīdzināšanu vai izlīdzināt vienumus atsevišķiem flex elementiem.

Skatiet aprakstu par vienību īpašumu, lai labāk izprastu pieejamās vērtības.

Piemēri

Sāksim ar ļoti, ļoti vienkāršu piemēru, kas notiek gandrīz katru dienu: saskaņošana tieši centrā. Ja izmantojat Flexbox, nav nekas vieglāk.

Šis piemērs ir balstīts uz faktu, ka rezerve elastīgā konteinerā, kas norādīta kā automātiska absorbē nevajadzīgo telpu, tāpēc atsauces uzdevums tādējādi virzās uz elementu tieši abu asu centrā.

Tagad pieņemsim izmantot dažas īpašības. Iesniedziet 6 fiksēto izmēru elementu komplektu (skaistumam), bet ar spēju mainīt konteinera lielumu. Mēs vēlamies tos vienmērīgi izplatīt horizontāli, lai, kad pārlūkprogrammas logs ir mainīts, viss izskatījās labi (bez @ multivides ierakstītāja!).

Gatavs. Viss pārējais ir reģistrācijas jautājums. Zemāk atrodas Codepen, kas parāda šo piemēru. Noteikti mēģiniet izstiepties / izspiest pārlūkprogrammas logu un redzēt, kas notiek.

Izmēģināsim kaut ko citu. Iedomājieties, ka labajā malā ir vajadzīga navigācija mūsu vietnes augšpusē, bet mēs vēlamies, lai tā saskaņotu vidēja izmēra ekrānu centrā un pārvērtās vienā kolonnā uz maziem. Viss ir pietiekami vienkāršs.

Izmēģināsim kaut ko labāku un spēlēt ar elastīgumu elastīgumu! Kā par orientētu uz mobilās ierīces Trīs chone izkārtojums ar pilnu vāciņu un pagrabu? Un citu atrašanās vietu.

Ja jūs sakāt īsu, tad izkārtojums ar Flexbox dod mums vienkāršus risinājumus, kad ir sarežģīti uzdevumi. Piemēram, ja jums ir nepieciešams saskaņot vertikālo elementu, vai nospiediet pagrabu uz ekrāna apakšdaļu vai vienkārši ievietojiet vairākus blokus vienā rindā, lai viņi aizņemtu visu brīvo telpu. Šādi uzdevumi tiek atrisināti bez flex. Bet parasti šie risinājumi ir līdzīgāki "kruķiem" - pieņemšanas CSS izmantošana nav paredzēta. Tā kā ar Flexbox, šie uzdevumi tiek atrisināti tieši tā, kā Flex modelis domā.

CSS elastīgs kastes izkārtojums modulis (CSS modulis moduļiem ar elastīgiem blokiem), īsu elastīgu kaste, kas izveidota, lai noņemtu trūkumus, veidojot dažādas HTML struktūras, tostarp pielāgotas dažādos platumos un augstumā, un veikt loģisku un vienkāršu izkārtojumu. Un loģiskā pieeja, kā likums, darbojas negaidītās vietās, kur rezultāts netika pārbaudīts - mūsu loģika!

FlexBox ļauj jums eleganti kontrolēt visdažādākos parametrus elementu iekšpusē konteinerā: virziens, pasūtījums, platums, augstums, izlīdzināšana kopā un pāri, sadale brīvas vietas, stiepšanās un kompresijas elementu.

Pamatzināšanas

Flexbox sastāv no konteinera un tās bērna elementiem (vienumiem) (elastīgi elementi).

Iekļaut Flexbox, jebkuru HTML elements pietiekami, lai piešķirtu CSS īpašuma displeju: Flex; vai displejs: inline-flex; .

Pēc pagrieziena uz Flex Properties, divas asis ir izveidotas iekšpusē konteinerā: galvenā un šķērsvirziena (perpendikulāri (⊥), šķērsgriezuma ass). Visi ligzdotie elementi (pirmie līmeņi) ir veidoti uz galvenās ass. Pēc noklusējuma galvenā ass ir horizontāla un ir virziens no kreisās uz labo (→), un krustā, attiecīgi, vertikālā un ir vērsta no augšas uz leju (↓).

Galveno un krustiņu var mainīt vietās, tad elementi atradīsies uz augšu (↓), un, kad viņi pārtrauc uzstādīt augstumā, tie pārvietosies no kreisās uz labo (→) - tas ir, asis vienkārši mainās vietās . Tajā pašā laikā elementu atrašanās vietas sākums un beigas nemainās - tikai virzieni (ass) maiņa! Tāpēc jums ir nepieciešams iedomāties ass konteinera iekšpusē. Tomēr nav nepieciešams domāt, ka tur ir dažas "fiziskas" asis, un tās ietekmē kaut ko. Ass šeit ir tikai virziens kustības elementiem iekšpusē konteinerā. Piemēram, ja mēs norādījām elementu izlīdzināšanu galvenās ass centrā un pēc tam mainīja šīs galvenās ass virzienu, tas mainīsies un saskaņo: elementi bija vidū horizontāli, un tērauds vidū vertikāli. . Skatīt piemēru.

Vēl viena svarīga flex kastes iezīme ir rindas klātbūtne šķērsvirzienā. Lai saprastu, ko mēs runājam, pieņemsim iedomāties, ka ir galvenā horizontālā ass, daudzi elementi, un tie nav "kāpt" konteinerā, lai viņi iet uz citu rindu. Tiem. Tvertne izskatās šādi: konteiners, iekšpusē divas rindas, katrā rindā vairākiem elementiem. Vai? Tagad atcerieties, ka mēs varam saskaņot vertikāli ne tikai elementus, bet arī rindas! Kā tas darbojas labi redzams īpašuma piemērā. Un tā izskatās shematiski:

CSS īpašībasKas var ietekmēt izkārtojuma konstrukcijas modeli: peldēt, dzidru, vertikālu izlīdzināšanu, kolonnas nedarbojas flex dizainā. Tā izmanto citu modeli, lai izveidotu izkārtojumu, un šīs CSS īpašības tiek vienkārši ignorētas.

CSS rekvizīti Flexbox

Flexbox satur dažādas CSS noteikumus, lai kontrolētu visu flex dizainu. Daži ir jāpiemēro galvenajam konteineram, bet citi uz šī konteinera elementiem.

Konteineram

Ietver elastīgo īpašumu vienumam. Saskaņā ar šo īpašumu tajā ieguldītais elements ir ietekmēts tikai pirmā līmeņa pēctečiem - tie kļūs par konteinera flex elementiem.

• flex - Elements ir izstiepts uz visu platumu, un tā ir pilna vieta starp apkārtējiem blokiem. Airēšana notiek bloka sākumā un beigās.
• inline-flex - Elements racionalizē citi elementi. Šajā gadījumā tā iekšējā daļa ir formatēta kā bloka elements, un pats elements ir kā iebūvēts.

flex un Inline-Flex atšķiras faktu, ka atšķirīgi mijiedarbojas ar apkārtējiem elementiem, piemēram, displejs: bloķēt un displejs: inline bloks.

Maina konteinera galvenās ass virzienu. Attiecīgi mainās šķērsvirziena ass.

• rinda (noklusējums) - elementu virziens no kreisās uz labo pusi (→)
• kolonna. - elementu virziens no augšas uz leju (↓)
• row-Reverse. - virziens elementu labajā pa kreisi (←)
• kolonnas-reverse. - elementu virziens no apakšas uz augšu ()

Pārvalda elementu nodošanu, kas ir nekompaning konteineram.

• nowrap (noklusējums) - Nested elementi atrodas vienā rindā (virzienā \u003d rindā) vai vienā kolonnā (virzienā \u003d kolonnas laikā), neatkarīgi no tā, vai tie ir ievietoti tvertnē vai nē.
• wrap. - Ietver vienumu nodošanu uz nākamo rindu, ja tie nav ievietoti konteinerā. Tas ietver kustību elementu uz šķērsvirziena ass.
• wrap-reverse. - arī tas, ka tikai pārsūtīšana netiks uz leju, un uz augšu (pretējā virzienā).

Apvieno gan flex-virzienu, gan flex-wrap īpašības. Tie bieži tiek izmantoti kopā, tāpēc Flex-Flow īpašums ir izveidots, lai rakstītu mazāk kodu.

flex-plūsma pieņem divu īpašumu vērtības, ko atdala ar atstarpi. Vai arī varat norādīt vienu īpašuma vērtību.

/ * Tikai Flex-virziens * / Flex-Flow: rinda; Flex-Flow: Row-Reverse; Flex-Flow: kolonna; Flex-Flow: Kolonna-Reverse; / * Tikai Flex-Wrap * / Flex-Flow: Nowrap; Flex-Flow: Wrap; Flex-Flow: Wrap-Reverse; / * Tūlīt abas nozīmes: Flex-virziens un Flex-Wrap * / Flex-Flow: rindas nobīdes; Flex-Flow: kolonnu wrap; Flex-Flow: Kolonna-Reverse Wrap-Reverse; Attaisnot saturu:

Izlīdzina elementus uz galvenās ass: ja virziens \u003d rinda, tad horizontāli, un, ja virziens \u003d kolonna, tad vertikāli.

• flex-Start (noklusējums) - Elementi iet no sākuma (beigās var būt vieta).
• flex-end. - elementi ir izlīdzināti ar galu (vieta paliks sākumā)
• centrs - centrā (vieta paliks pa kreisi un pa labi)
• starp. - Ekstrēmie elementi tiek nospiesti uz malām (vieta starp elementiem tiek sadalīta vienmērīgi)
• kosmosa apkārt. - Starp elementiem vienmērīgi tiek sadalīta brīva telpa (ekstrēmie elementi netiek nospiesti malām). Telpa starp tvertnes malu un ekstrēmiem elementiem būs divas reizes mazāk nekā telpu starp elementiem vidū rindas.
• vienmērīgi

Saskaņo rindas, kurās atrodas šķērsvirziena ass elementi. Tāds pats kā saturs tikai pretējā ass.

Piezīme: darbojas, ja ir vismaz 2 rindas, t.i. Ja ir tikai 1 rinda, nekas nenotiek.

Tiem. Ja Flex virziens: rinda, šis īpašums saskaņos neredzamas rindas vertikāli |. Ir svarīgi atzīmēt, ka bloka pacēlums ir jānosaka stingri, un tai jābūt lielākam par sērijas augstumu, citādi rindas pašas izstiepsies tvertnē un to izlīdzināšana zaudē savu nozīmi, jo starp tām nav brīvas vietas. . Bet, kad Flex virziens: kolonna, tad rindas pārvietojas horizontāli → un platums konteinera gandrīz vienmēr ir lielāks par platumu sērijas un izlīdzināšana rindas nekavējoties iegūst nozīmi ...

• stiept (noklusējums) - rindas stiepjas uzpildes virkni pilnīgi
• flex-start. - rindas ir sagrupētas tvertnes augšpusē (beigās var būt vieta).
• flex-end. - rindas ir sagrupētas konteinera apakšā (vieta paliks sākumā)
• centrs - rindas ir sagrupētas konteinera centrā (vieta paliks malās)
• starp. - ekstrēmās rindas tiek nospiestas uz malām (vieta starp rindām tiek sadalīta vienmērīgi)
• kosmosa apkārt. - Starp rindām vienmērīgi tiek sadalīta brīva telpa (ekstrēmie elementi nav nospiesti uz malām). Telpa starp tvertnes malu un ekstrēmiem elementiem būs divas reizes mazāk nekā telpu starp elementiem vidū rindas.
• vienmērīgi - Arī tas kosmosa apkārtnē tikai attālums ekstrēmos elementos uz tvertnes malām ir tāds pats kā starp elementiem.

Saskaņo šķērsvirziena ass elementus rindā (neredzamā līnija). Tiem. Rindas pašas ir saskaņotas, izmantojot izlīdzināt saturu, un elementus šajās rindās (virknes), izmantojot saskaņotus priekšmetus un to visu par šķērsvirziena asi. Nav šādas atdalīšanas no galvenās ass, nav neviena koncepciju sērijas un elementi ir saskaņoti, izmantojot attaisnot saturu.

• stiept (noklusējums) - Elementi Stretch aizpildot virkni pilnīgi
• flex-start. - Elementi tiek nospiesti līdz rindas sākumam
• flex-end. - Elementi tiek nospiesti pēc rindas beigām
• centrs - elementi izlīdzina rindas centrā
• bāzes līnija - Elementi ir saskaņoti ar bāzes tekstu

Konteineru elementiem

Norāda pieaugošo faktoru elementa brīvas vietas klātbūtnē konteinerā. Noklusējums Flex-Grow: 0.e. Elementu nevienam nedrīkst palielināt un aizpildīt brīvu vietu konteinerā.

Default Flex-Grow: 0

• Ja visi elementi norāda uz Flex-Grow: 1, tad tie visi stiept vienādi un aizpildīt visu brīvo vietu tvertnē.
• Ja viens no elementiem norāda uz Flex-Grow: 1, tad tas aizpildīs visu brīvo vietu konteinerā un izlīdzināšana, izmantojot pamatot-satura darbu, nevarēs strādāt: nav nekas, lai saskaņotu brīvo vietu ...
• Kad Flex-Grow: 1. Ja kādam no viņiem ir elastīgs: 2, tas būs 2 reizes vairāk nekā visi pārējie
• Ja visi flex bloki Flex konteinerā ir Flex-Grow: 3, tad tie būs vienāda izmēra
• Ar Flex-Grow: 3. Ja kādam no tiem ir Flex-Grow: 12, tas būs 4 reizes vairāk nekā visi pārējie

Kā tas strādā? Pieņemsim, ka tvertnei ir 500px platums un tajā ir divi elementi, no kuriem katram ir 100px platums. Tāpēc tvertnē paliek 300 bezmaksas pikseļi. Tagad, ja norādāt Flex-Grow: 2 pirmais elements; un otrais elastīgais augums: 1; Bloki veiks visu pieejamo konteinera platumu un pirmā bloka platums būs 300px, un otrais 200px. Tas ir izskaidrojams ar to, ka pieejamā 300px brīva telpa konteinerā tika sadalīta starp elementiem 2: 1, + 200px attiecību pirmā un + 100px sekundē.

Piezīme: vērtībā jūs varat norādīt frakcionēti numuri, piemēram: 0.5 - Flex-Grow: 0.5

Norāda elementa samazināšanas faktoru. Funkcija ir pretējs elastīgs augums un nosaka, kā elements ir saspiests, ja tvertnē nav brīvas vietas. Tiem. Īpašums sāk strādāt, kad visu elementu izmēru summa ir lielāka par tvertnes lielumu.

Noklusējuma Flex-Shrink: 1

Pieņemsim, ka tvertnei ir 600px platums un satur divus elementus, no kuriem katrs ir 300px platums - flex-bāzes: 300px; . Tiem. Divi elementi pilnībā aizpilda konteineru. Pirmais elements norāda Flex-Shrink: 2; un otrā elastīgā saraušanās: 1; . Tagad samazinot tvertnes platumu 300px, t.sk. Elementiem jābūt ar 300px, kas atrodas konteinerā. Tie tiks saspiesti 2: 1 attiecība, t.i. Pirmā vienība pievienosies 200px, un otrais līdz 100px un jaunie elementu izmēri būs 100px un 200px.

PIEZĪME: Vērtībā jūs varat norādīt frakcionētus skaitļus, piemēram: 0.5 - Flex-Shrink: 0.5

Iestata elementa pamatplatību - platumu pirms atlikušajiem apstākļiem, kas ietekmē elementa platumu, tiks aprēķināts. Vērtību var norādīt PX, EM, REM,%, VW, VH utt. Galīgais platums būs atkarīgs no bāzes platuma un Flex-Grow vērtības blokā. Ar auto, elements saņem pamata platumu attiecībā pret saturu tajā.

Noklusējums: Auto

Dažreiz tas ir labāk, lai uzstādītu platumu elementa stingri caur parasto platuma īpašumu. Piemēram, platums: 50%; Tas nozīmēs, ka konteinera elements būs tieši 50%, tomēr darbosies arī elastīgie un elastīgie saraušanās īpašumi. Tas var būt nepieciešams, ja elements ir izstiepts ar saturu tajā, vairāk norādīts elastīgā veidā. Piemērs.

flex-bāzes būs "grūts", ja reset stiepes un saspiešanas: Flex-bāzes: 200px; Flex-Grow: 0; Flex-shrink: 0; . Tas viss var būt rakstīts kā Flex: 0 0 200px; .

Īsa trīs īpašību ierakstīšana: Flex-Grow Flex-Shrink Flex-pamats.

Noklusējums: Flex: 0 1 Auto

Tomēr jūs varat norādīt vienu, un divas vērtības:

Flex: nav; / * 0 0 Auto * / / * numurs * / Flex: 2; / * Flex-Grow (Flex-bāzes iet uz 0) * / / * Nav skaitlis * / Flex: 10em; / * Flex-bāzes: 10em * / Flex: 30px; / * Flex-bāzes: 30px * / Flex: auto; / * Flex-bāzes: Auto * / Flex: saturs; / * Flex-bāzes: Saturs * / Flex: 1 30px; / * Flex-Grow un Flex-bāzes * / Flex: 2 2; / * Flex-Grow un Flex-Shrink (Flex-bāzes iet 0) * / Flex: 2 2 10%; / * Flex-Grow un Flex-Shrink un Flex-bāzes * / ALOC-SELF:

Ļauj mainīt vienumu īpašumu, tikai atsevišķu vienumu.

Noklusējums: no izlīdzināšanas vienību konteinera

• stiept. - Elements ir izstiepts aizpildot virkni pilnīgi
• flex-start. - Elements tiek nospiests līdz līnijas sākumam
• flex-end. - Elements tiek nospiests uz virknes beigām
• centrs - Elements ir izlīdzināts līnijas centrā

bāzes līnija - Elements ir saskaņots ar pamata līniju teksta

Ļauj mainīt kārtību (pozīciju, pozīciju) no elementa vispārējā rindā.

Noklusējums: Pasūtījums: 0

Pēc noklusējuma elementiem ir pasūtījums: 0 un ievietot to izskatu secībā HTML kodā un rindas virzienā. Bet, ja maināt pasūtījuma īpašuma vērtību, vienumi tiks būvēti vērtību secībā: -1 0 1 2 3 .... Piemēram, ja viens no vienumiem norāda pasūtījumu: 1, tad jūs vispirms iet visu nulli, un pēc tam elements no 1.

Tātad tas ir iespējams, piemēram, pirmais elements, lai pārvērstu galu, vienlaikus nemainot citu elementu kustības virzienu vai HTML kodu.

Piezīmes

Kāda ir atšķirība starp flex-bāzes no platuma?

Zem svarīgas atšķirības starp elastīgu un platumu / augstumu:

flex-bāzes darbojas tikai galvenajai asij. Tas nozīmē, ka tad, kad fleks virziens: rinda flex-bāzes kontrolē platumu (platumu), un, kad flex virziens: kolonna kontrolē augstumu (augstumu). .

flex-bāzes attiecas tikai uz flex elementiem. Tātad, ja jūs atspējojat flex pie konteinera, šis īpašums nebūs spēkā.

Konteinera absolūtie elementi nepiedalās Flex Design ... un tādējādi elastīgi neietekmē elastīgā konteinera elementus, ja tie ir pilnīgi novietoti: absolūti. Viņiem būs jānorāda platums / augstums.

• Lietojot Flex Properties 3 vērtības (Flex-Grow / Flex-Shrink / Flex-bāzes), jūs varat apvienot un rakstīt īsu, un platums aug vai sarukt jums ir nepieciešams rakstīt atsevišķi. Piemēram: Flex: 0 0 50% \u003d\u003d Platums: 50%; Flex-shrink: 0; . Dažreiz tas ir tikai neērti.

Ja iespējams, joprojām dod priekšroku elastīgam. Izmantojiet platumu tikai tad, ja flex-bāzes nav piemērots.

Atšķirības Flex - bāzes no platuma - bug vai fich?

Saturs Flex elementa iekšpusē to samazina un nevar pārsniegt tās robežas. Tomēr, ja jūs iestatāt platumu, izmantojot platumu vai maksimālo platumu, nevis flex-pamata, elements iekšpusē Flex konteiners varēs iet tālāk par šo konteineru (dažreiz jums ir nepieciešama šī uzvedība). Piemērs:

Flex izkārtojuma piemēri

Piemēros jebkurā vietā tiek izmantoti prefiksi pārrobežu pārlūkprogrammai. Es to darīju ērtai lasīšanai CSS. Tāpēc skatiet jaunākos piemērus. chrome versijas vai firefox.

# 1 vienkāršs piemērs ar vertikālo izlīdzināšanu un horizontālu

Sāksim ar vienkāršāko piemēru - izlīdzināšana vertikāli un horizontāli vienlaicīgi un jebkurā bloka augstumā, pat gumijas.

Vai tā, bez bloka iekšpuses:

# 1.2 atdalīšana (plaisa) starp elastīgā bloka elementiem

Lai novietotu konteinera elementus uz malām un patvaļīgi atlasiet elementu, pēc kura būs pārtraukums, jums ir jāizmanto margas kreisais īpašums: Auto vai Margin-Right: Auto.

# 2 Adaptīvā izvēlne Flex

Izveidojiet izvēlni lapas augšpusē. Uz plašu ekrānu jābūt pareizi. Vidēji, saskaņots vidū. Un uz neliela vienam elementam jābūt jaunā līnijā.

# 3 adaptīvās 3 kolonnas

Šis piemērs parāda, cik ātri un ērti veikt 3 kolonnas, kas, sašaurinot, kļūs 2 un pēc tam 1.

Lūdzu, ņemiet vērā, ka to var izdarīt, neizmantojot mediju noteikumus, visi uz flex.

Iet uz JSFiddle.net un mainiet sadaļas "rezultātu" platumu

# 4 Adaptīvie bloki Flex

Pieņemsim, ka mums ir jāizņem 3 bloki, viens liels un divi mazi. Tajā pašā laikā ir nepieciešams, lai bloki iederas mazos ekrānos. Veidot:

Iet uz JSFiddle.net un mainiet sadaļas "rezultātu" platumu

# 5 Galerija Flex un pārejā

Šis piemērs parāda, cik ātri jūs varat izdarīt diezgan acu akordeonu ar attēliem Flex. Pievērsiet uzmanību pārejas īpašumam Flex.

# 6 Flex Flex (tikai piemērs)

Uzdevums veido elastīgu bloku. Lai teksta sākums katrā blokā bija vienā horizontālā līnijā. Tiem. Ar platuma platumu, bloki aug augstumā. Ir nepieciešams, lai attēls būtu augšpusē, poga vienmēr ir lejā, un teksts vidū sākās vienā horizontālā līnijā ...

Lai atrisinātu šo problēmu, paši bloki ir izstieptas ar flex, un maksimālais iespējamais platums ir uzstādīts. Katra iekšējā vienība ir arī elastīga ar dizainu, ar flex virzienu: kolonnu; un elements vidū (kur atrodas teksts) ir izstiepts elastīgs augums: 1; Lai aizpildītu visu brīvo vietu, rezultāts tiek sasniegts - teksts sākās ar vienu līniju ...

Vairāk piemēru

Pārlūkprogrammas atbalsts - 98,3%

Protams, nav pilnīga atbalsta, bet visi mūsdienu pārlūkprogrammas Atbalsta Flexbox dizainu. Dažiem, jums joprojām ir jānorāda prefiksi. Lai iegūtu reālu attēlu, apskatiet Caniuse.com un redziet, ka 96,3% no šodien izmantotās pārlūkprogrammas darbosies bez prefiksiem, ar prefiksu 98,3%. Tas ir lielisks rādītājs, lai droši izmantotu Flexbox.

Zināt, kādi prefiksi ir būtiski šodien (2019. gada jūnijs), es sniegšu piemēru visiem flex noteikumiem ar nepieciešamie prefiksi:

/ * Konteiners * / .flex (displejs: -Webkit-kaste; displejs: -ms-flexbox; displejs: flex; displejs: -webkit-inline box; displejs: -ms-inline-flexbox; displejs: inline-flex; -Webkit-box-orient: vertikāli; -webkit-box virziens: normāls; -ms-flex virzienā: kolonna; fleks virziens: kolonna; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms; -Flex plūsma: kolonnu wrap; Flex-Flow: kolonnu wrap; -Webkit-box-pack: pamatot; -ms-flex-pack: pamatot; attaisnot-saturu: telpu starp; -ms-flex-line-pack: Izplatīt; izlīdzināt saturu: kosmosa ap;) / * elementi * / .flex-postenis (-Webkit-box-flex: 1; -ms-flex-pozitīvs: 1; Flex-Grow: 1; -ms-flex- Negatīvs: 2; Flex-Shrink: 2; -ms-Flex-vēlamais izmēra: 100px; Flex-bāzes: 100px; -ms-flex: 1 2 100px; Flex: 1 2 100px; -ms-flex-postenis : Centrs; ALOC-SELF: Centrs; -Webkit-Box-Ordinal-Group: 3; -ms-Flex-Order: 2; Pasūtījums: 2;)

Tas ir labāk, ja īpašības ar prefiksu dosies uz sākotnējo īpašumu.
Šodien nav nevajadzīgas (Caniuse) prefiksi šodien (ar Caniuse), bet vispārīgi prefiksi vairāk.

• (Jauns) - jauns sintakse: displejs: flex; .
• (Tweener) - Old Neoficiāls Sintakse 2011: Displejs: Flexbox; .
• (Old) - Old Syntax 2009: Displejs: kaste;

Video

Nu, neaizmirstiet par video, dažreiz tas ir arī interesants un saprotams. Šeit ir pāris populārs:

Noderīgas saites Flex

flexboxfroggy.com - Flexbox izglītības spēle.

Flexplorer ir vizuāls Flex kodu dizainers.