Visas flexbox īpašības. Flexbox: jauns CSS izkārtojuma princips. Adaptīvā izkārtojuma veidošana

Īsāk sakot, izkārtojums ar Flexbox sniedz mums vienkāršus risinājumus kādreiz sarežģītiem uzdevumiem. Piemēram, ja nepieciešams vertikāli izlīdzināt elementu vai nospiest kājeni uz ekrāna apakšdaļu vai vienkārši ievietot vairākus blokus vienā rindā, lai tie aizņemtu visu brīvo vietu. Līdzīgi uzdevumi tiek atrisināti bez flex. Bet parasti šie risinājumi vairāk atgādina "kruķus" - trikus, kā izmantot css citiem mērķiem. Savukārt, izmantojot flexbox, šādi uzdevumi tiek atrisināti tieši tā, kā tas ir paredzēts flex modelī.

CSS Flexible Box Layout Module (CSS modulis izkārtojumiem ar elastīgiem blokiem), īsi sakot, flexbox, tika izveidots, lai novērstu trūkumus, veidojot visdažādākās HTML struktūras, tostarp tās, kas pielāgotas dažādiem platumiem un augstumiem, un padarītu izkārtojumu loģisku un vienkāršu. . Un loģiskā pieeja, kā likums, darbojas neparedzētās vietās, kur rezultāts netika pārbaudīts - loģika ir mūsu viss!

Flexbox ļauj eleganti kontrolēt dažādus konteinera elementu parametrus: virzienu, secību, platumu, augstumu, izlīdzināšanu gar un šķērsām, brīvās vietas sadalījumu, stiepšanās un saraušanās elementus.

Pamatzināšanas

FlexBox sastāv no konteinera un tā pakārtotajiem elementiem (vienumiem) (elastīgiem priekšmetiem).

Lai iespējotu flexbox, jebkuram HTML elementam vienkārši jāiestata css rekvizīts display:flex; vai displejs:inline-flex; .

Pēc flex rekvizīta iespējošanas konteinera iekšpusē tiek izveidotas divas asis: galvenā un šķērsvirziena (perpendikulāra (⊥), šķērsass). Visi ligzdotie elementi (pirmā līmeņa) ir izlīdzināti gar galveno asi. Pēc noklusējuma galvenā ass ir horizontāla, un tās virziens ir no kreisās puses uz labo (→), un šķērsass ir attiecīgi vertikāla un vērsta no augšas uz leju (↓).

Galvenās un šķērsass var samainīt, tad elementi atradīsies no augšas uz leju (↓) un, kad tie vairs neatbilst augstumam, tie virzīsies no kreisās puses uz labo (→) - tas ir, asis vienkārši samainītas. Šajā gadījumā elementu izkārtojuma sākums un beigas nemainās - mainās tikai virzieni (asis)! Tāpēc jums ir jādomā par cirvjiem konteinera iekšpusē. Taču nevajag domāt, ka tur ir kaut kādas “fiziskas” asis un tās kaut ko ietekmē. Ass šeit ir tikai konteinera iekšpusē esošo elementu kustības virziens. Piemēram, ja mēs norādījām elementu izlīdzināšanu uz galvenās ass centru un pēc tam mainījām šīs galvenās ass virzienu, mainīsies arī izlīdzinājums: elementi atradās vidū horizontāli un kļuva vidū vertikāli. Skatīt piemēru.

Vēl viena svarīga Flexbox iezīme ir rindu klātbūtne šķērsvirzienā. Lai saprastu, par ko ir runa, iedomāsimies, ka ir galvenā horizontālā ass, daudz elementu un tie "nekāpj" konteinerā, tāpēc pāriet uz citu rindu. Tie. konteiners izskatās šādi: konteiners, tā iekšpusē ir divas rindas, katrā rindā ir vairāki elementi. Pārstāvēts? Un tagad atcerieties, ka mēs varam vertikāli izlīdzināt ne tikai elementus, bet arī rindas! Kā tas darbojas, ir skaidri redzams piemērā . Un shematiski tas izskatās šādi:

CSS rekvizīti, kas var ietekmēt izkārtojuma modeli: float , clear , vertical-align , kolonnas nedarbojas elastīgās konstrukcijās. Šeit tiek izmantots cits izkārtojuma modelis, un šīs css īpašības tiek vienkārši ignorētas.

Flexbox CSS rekvizīti

Flexbox satur dažādus css noteikumus, lai kontrolētu visu elastīgo dizainu. Daži ir jāpiemēro galvenajam konteineram, bet citi - šī konteinera elementiem.

Par konteineru

Iespējo elementam flex rekvizītu. Pats elements un tajā ligzdotie elementi ietilpst šajā īpašumā: tiek ietekmēti tikai pirmā līmeņa pēcnācēji - tie kļūs par elastīgā konteinera elementiem.

• flex- elements stiepjas pilnā platumā un tam ir visa vieta starp apkārtējiem blokiem. Bloka sākumā un beigās ir līnijas pārtraukums.
• inline-flex- elementu apvij citi elementi. Tajā pašā laikā tā iekšējā daļa tiek formatēta kā bloka elements, un pats elements tiek formatēts kā iekļauts elements.

flex un inline-flex atšķiras ar to, ka tie atšķirīgi mijiedarbojas ar apkārtējiem elementiem, līdzīgi kā display:block un display:inline-block .

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

• rinda (noklusējums)- elementu virziens no kreisās uz labo (→)
• kolonna- elementu virziens no augšas uz leju (↓)
• rinda reverss- elementu virziens no labās uz kreiso (←)
• kolonnas reverss- elementu virziens no apakšas uz augšu ()

Kontrolē to elementu iesaiņošanu, kuri neietilpst konteinerā.

• nowrap (noklusējums)- ligzdotie elementi tiek sakārtoti vienā rindā (ar virzienu=rinda) vai vienā kolonnā (ar virzienu=kolonna) neatkarīgi no tā, vai tie ir ievietoti konteinerā vai nē.
• iesaiņojums- ietver elementu pārvietošanu uz nākamo rindu, ja tie neietilpst konteinerā. Tas nodrošina elementu kustību pa šķērsasi.
• ietīt reversu- tas pats, kas wrap tikai pārsūtīšana nebūs uz leju, bet uz augšu (pretējā virzienā).

Apvieno gan flex-direction, gan flex-wrap īpašības. Tos bieži izmanto kopā, tāpēc elastīgās plūsmas rekvizīts tika izveidots, lai rakstītu mazāk koda.

flex-flow ņem šo divu īpašību vērtības, kas atdalītas ar atstarpi. Vai arī varat norādīt vienu vērtību jebkuram īpašumam.

/* tikai flex-direction */ flex-flow: rinda; flex-flow: rinda-reverse; flex-flow: kolonna; flex-flow: kolonna-reverse; /* tikai flex-wrap */ flex-flow: nowrap; flex-flow: wrap; flex-flow: wrap-reverse; /* abas vērtības vienlaikus: flex-direction un flex-wrap */ flex-flow: row nowrap; flex-flow: kolonnu aptinums; flex-flow: kolonna-reverse wrap-reverse; pamatojums-saturs:

Izlīdzina elementus gar galveno asi: ja virziens=rinda, tad horizontāli un, ja virziens=kolonna, tad vertikāli.

• elastīgs starts (noklusējums)- elementi ies no sākuma (beigās var būt vieta).
• lokans gals- elementi ir izlīdzināti beigās (vieta paliks sākumā)
• centrs- centrā (vieta paliks pa kreisi un pa labi)
• atstarpe starp- ekstremālie elementi tiek piespiesti pie malām (atstarpe starp elementiem ir vienmērīgi sadalīta)
• telpa apkārt- brīvā telpa ir vienmērīgi sadalīta starp elementiem (ekstrēmie elementi netiek piespiesti malām). Atstarpe starp konteinera malu un visattālākajiem elementiem būs puse no atstarpes starp elementiem rindas vidū.
• telpa-vienmērīgi

Izlīdzina rindas, kurās ir elementi gar šķērsasi. Tas pats, kas pamatojuma saturs, bet pretējai asij.

Piezīme: darbojas, ja ir vismaz 2 rindas, t.i. ja būs tikai 1 rinda, nekas nenotiks.

Tie. ja flex-direction: row , tad šis rekvizīts neredzamās rindas līdzinās vertikāli ¦ . Šeit ir svarīgi atzīmēt, ka bloka augstums ir jāiestata stingri un tam ir jābūt lielākam par rindu augstumu, pretējā gadījumā rindas pašas izstieps konteineru un jebkura to izlīdzināšana zaudē nozīmi, jo nav brīvas vietas. starp tām... Bet kad flex-direction: kolonna , tad rindas pārvietojas horizontāli → un konteinera platums gandrīz vienmēr ir lielāks par rindu platumu un rindu izlīdzināšanai uzreiz ir jēga...

• stiept (noklusējums)- rindas ir izstieptas, lai rindu pilnībā aizpildītu
• elastīgs starts- rindas ir sagrupētas konteinera augšpusē (galā var būt vieta).
• lokans gals- rindas ir sagrupētas konteinera apakšā (vieta paliks sākumā)
• centrs- rindas ir sagrupētas konteinera centrā (vieta paliks malās)
• atstarpe starp- galējās rindas ir piespiestas pie malām (atstarpe starp rindām ir vienmērīgi sadalīta)
• telpa apkārt- brīvā vieta ir vienmērīgi sadalīta starp rindām (ekstrēmie elementi nav nospiesti pret malām). Atstarpe starp konteinera malu un visattālākajiem elementiem būs puse no atstarpes starp elementiem rindas vidū.
• telpa-vienmērīgi- tas pats, kas atstarpe ap , tikai galējo elementu attālums līdz konteinera malām ir tāds pats kā starp elementiem.

Izlīdzina elementus pa šķērsasi rindā (neredzamā rinda). Tie. pašas rindas ir līdzinātas, izmantojot align-content , un elementi šajās rindās (rindās) caur līdzināšanas vienumiem, un tas viss pa šķērsasi. Nav šādas atdalīšanas gar galveno asi, nav rindu koncepcijas, un elementi tiek izlīdzināti, izmantojot justify-content .

• stiept (noklusējums)- elementi ir izstiepti, lai pilnībā aizpildītu līniju
• elastīgs starts- elementi tiek nospiesti līdz rindas sākumam
• lokans gals- elementi tiek nospiesti līdz rindas beigām
• centrs- elementi ir izlīdzināti rindas centrā
• bāzes līnija- elementi ir saskaņoti ar teksta bāzes līniju

Konteineru elementiem

Norāda koeficientu, lai palielinātu elementu, ja konteinerā ir brīva vieta. Noklusējuma flex-grow: 0 t.i. nevienam no elementiem nevajadzētu augt un aizpildīt brīvo vietu traukā.

Noklusējuma elastīgā izaugsme: 0

• Ja visiem elementiem norādāt flex-grow:1, tie visi stiepjas vienādi un aizpilda visu konteinerā esošo brīvo vietu.
• Ja kādam no elementiem norādāt flex-grow:1, tas aizpildīs visu konteinerā esošo brīvo vietu, un izlīdzināšana, izmantojot justify-content, vairs nedarbosies: nav brīvas vietas līdzināšanai...
• Ar elastīgu augšanu:1. Ja vienam no tiem ir flex-grow:2, tad tas būs 2x lielāks par visiem pārējiem
• Ja visām elastīgajām kastēm elastīgā konteinerā ir flex-grow:3, tad tās būs vienāda izmēra
• Ar elastīgu augšanu:3. Ja vienam no tiem ir flex-grow:12, tad tas būs 4 reizes lielāks par visiem pārējiem

Kā tas strādā? Pieņemsim, ka konteinera platums ir 500 pikseļi, un tajā ir divi elementi, katra pamata platums ir 100 pikseļi. Tātad konteinerā ir palikuši 300 brīvi pikseļi. Tagad, ja mēs iestatām pirmo elementu uz flex-grow:2; , un otrais flex-grow: 1; , tad bloki aizņems visu pieejamo konteinera platumu, un pirmā bloka platums būs 300 pikseļi, bet otrā – 200 pikseļi. Tas skaidrojams ar to, ka konteinerā pieejamā 300px brīvā vieta tika sadalīta starp elementiem proporcijā 2:1, +200px pret pirmo un +100px pret otro.

Piezīme: vērtībā varat norādīt daļskaitļus, piemēram: 0,5 - flex-grow:0,5

Norāda elementa samazināšanas koeficientu. Īpašums ir pretējs flex-grow un nosaka, kā elementam jāsaraujas, ja konteinerā nav atlicis brīvas vietas. Tie. rekvizīts sāk darboties, kad visu elementu izmēru summa ir lielāka par konteinera izmēru.

Noklusējuma elastīgā saraušanās:1

Pieņemsim, ka konteinera platums ir 600 pikseļi, un tajā ir divi elementi, katrs 300 pikseļus plats — elastīgs: 300 pikseļi; . Tie. divi elementi pilnībā piepilda trauku. Norādīsim flex-shrink: 2 pirmajam elementam; , un otrā elastīgā saraušanās: 1; . Tagad samazināsim konteinera platumu par 300 pikseļiem, t.i. elementiem ir jāsamazinās par 300 pikseļiem, lai tie ietilptu konteinerā. Tie tiks saspiesti attiecībā 2:1, t.i. pirmais bloks samazināsies par 200 pikseļiem un otrais par 100 pikseļiem, un jaunie elementu izmēri būs 100 pikseļi un 200 pikseļi.

Piezīme: vērtībā varat norādīt daļskaitļus, piemēram: 0,5 - flex-shrink:0,5

Iestata elementa bāzes platumu — platumu pirms tiek aprēķināti citi nosacījumi, kas ietekmē elementa platumu. Vērtību var norādīt px, em, rem, %, vw, vh utt. Galīgais platums būs atkarīgs no pamatnes platuma un flex-grow, flex-shrink vērtībām un satura bloka iekšpusē. Izmantojot auto , elements iegūst bāzes platumu attiecībā pret tajā esošo saturu.

Noklusējums: auto

Dažreiz ir labāk iekodēt elementa platumu, izmantojot pazīstamo platuma rekvizītu. Piemēram, platums: 50%; nozīmēs, ka elements konteinera iekšpusē būs tieši 50%, tomēr elastīgās augšanas un elastīgās saraušanās īpašības joprojām darbosies. Tas var būt nepieciešams, ja elements ir izstiepts tā iekšpusē esošā satura dēļ vairāk, nekā norādīts elastīgajā bāzē. Piemērs.

flex-basis būs "ciets", ja stiepšanās un saraušanās ir iestatīta uz nulli: flex-basis:200px; flex-grow:0; elastīga saraušanās:0; . To visu var uzrakstīt kā flex:0 0 200px; .

Trīs īpašību saīsinājums: flex-grow flex-shrink flex-basis .

Noklusējums: flex: 0 1 auto

Tomēr varat norādīt vienu vai divas vērtības:

Elastība: nav; /* 0 0 auto */ /* numurs */ flex: 2; /* flex-grow (flex-basis iet uz 0) */ /* nav skaitlis */ flex: 10em; /* flex-basis: 10em */ flex: 30px; /* flex-basis: 30px */ flex: auto; /* flex-basis: auto */ flex: content; /* flex-basis: saturs */ flex: 1 30px; /* flex-grow un flex-basis */ flex: 2 2; /* flex-grow un flex-shrink (flex-basis iet uz 0) */ flex: 2 2 10%; /* flex-grow un flex-shrink and flex-basis */ align-self:

Ļauj mainīt align-items rekvizītu tikai vienam elementam.

Noklusējums: no konteinera līdzināšanas vienumiem

• stiept- elements ir izstiepts, lai pilnībā aizpildītu līniju
• elastīgs starts- elements tiek nospiests līdz rindas sākumam
• lokans gals- elements ir nospiests līdz rindas beigām
• centrs- elements ir saskaņots ar līnijas centru

bāzes līnija- elements ir līdzināts teksta pamatlīnijai

Ļauj mainīt elementa secību (pozīcija, pozīcija) vispārējā rindā.

Noklusējums: pasūtījums: 0

Pēc noklusējuma elementiem ir secība: 0, un tie tiek novietoti to parādīšanās secībā HTML kodā un rindas virzienā. Bet, ja mainīsit pasūtījuma rekvizīta vērtību, elementi sarindosies vērtību secībā: -1 0 1 2 3 ... . Piemēram, ja norādāt secību: 1 vienam no elementiem, tad vispirms tiks rādītas visas nulles un pēc tam elements ar 1.

Tātad jūs varat, piemēram, mest pirmo elementu līdz galam, vienlaikus nemainot atlikušo elementu vai HTML koda kustības virzienu.

Piezīmes

Kā elastīgais pamats atšķiras no platuma?

Tālāk ir norādītas svarīgās atšķirības starp elastīgo pamatni un platumu/augstumu:

flex-basis darbojas tikai galvenajai asij. Tas nozīmē, ka ar flex-direction:row flex-basis kontrolē platumu (platumu), un ar flex-direction:colum kontrolē augstumu (augstumu). .

flex-basis attiecas tikai uz elastīgiem priekšmetiem. Tas nozīmē, ka, ja konteinerā atspējosit flex, šim īpašumam nebūs nekādas ietekmes.

Absolūti konteinera elementi nepiedalās flex konstrukcijās... Tas nozīmē, ka flex-basis neietekmē konteinera elastīgos elementus, ja tie ir absolūtā pozīcija:absolūts . Viņiem būs jānorāda platums/augstums.

• Izmantojot īpašību flex 3, vērtības (flex-grow/flex-shrink/flex-basis) var kombinēt un rakstīt īsi, savukārt platumam augt vai shrink jāraksta atsevišķi. Piemēram: flex:0 0 50% == platums:50%; elastīga saraušanās:0; . Dažreiz tas ir vienkārši neērti.

Ja iespējams, joprojām dodiet priekšroku flex-basis . Izmantojiet platumu tikai tad, ja elastīgā pamatne neder.

Vai atšķirība starp elastīgo pamatu un platumu ir kļūda vai iezīme?

Saturs elastīgā elementa iekšpusē to paplašina un nevar pārsniegt to. Tomēr, ja platumu iestatāt, izmantojot platumu vai maksimālo platumu, nevis flex-basis , elements elastīgā konteinera iekšpusē varēs iziet ārpus šī konteinera (dažreiz šāda rīcība ir nepieciešama). Piemērs:

Flex izkārtojuma piemēri

Piemēros nekur netiek izmantoti prefiksi saderībai starp pārlūkprogrammām. Es to izdarīju, lai būtu vieglāk lasīt css. Tāpēc piemērus skatiet pārlūkprogrammas Chrome vai Firefox jaunākajās versijās.

#1 Vienkāršs vertikālās un horizontālās izlīdzināšanas piemērs

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

Vai arī šādi, bez bloka iekšpusē:

#1.2. Atdalīšana (atstarpe) starp elastīgā bloka elementiem

Lai novietotu konteinera elementus malās un patvaļīgi atlasītu elementu, pēc kura būs atstarpe, jāizmanto rekvizīts margin-left:auto vai margin-right:auto.

2. atsaucīga izvēlne elastīgajā režīmā

Izveidosim izvēlni pašā lapas augšpusē. Platekrānā tam jāatrodas labajā pusē. Vidēji izlīdziniet pa vidu. Un mazā katram elementam jāatrodas jaunā rindā.

#3 Atbilstoša 3 slejas

Šajā piemērā parādīts, kā ātri un ērti izveidot 3 kolonnas, kuras sašaurinot pārtaps par 2 un pēc tam par 1.

Lūdzu, ņemiet vērā, ka to var izdarīt, neizmantojot multivides noteikumus, viss ir elastīgs.

Dodieties uz jsfiddle.net un mainiet sadaļas "rezultāts" platumu

#4 Atsaucīgi bloki uz flex

Pieņemsim, ka mums ir jāparāda 3 bloki, viens liels un divi mazi. Tajā pašā laikā ir nepieciešams, lai bloki pielāgotos maziem ekrāniem. Mēs darām:

Dodieties uz jsfiddle.net un mainiet sadaļas "rezultāts" platumu

#5 Galerija par elastību un pāreju

Šis piemērs parāda, cik ātri jūs varat izveidot skaistu akordeonu ar attēliem uz flex. Ievērojiet flex pārejas īpašību.

#6 Flex to Flex (tikai piemērs)

Uzdevums ir izveidot elastīgu bloku. Lai teksta sākums katrā blokā būtu uz vienas līnijas horizontāli. Tie. platumam sašaurinoties, bloki aug augstumā. Man vajag, lai attēls būtu augšpusē, poga vienmēr būtu apakšā un teksts vidū, lai sāktos vienā horizontālā līnijā...

Lai atrisinātu šo problēmu, paši bloki tiek izstiepti ar flex un tiem tiek iestatīts maksimālais iespējamais platums. Katrs iekšējais bloks ir arī elastīga konstrukcija ar flex-direction:collon pagrieztu; un elementu vidū (kur atrodas teksts) izstiepj ar flex-grow:1; lai aizpildītu visu brīvo vietu, tāpēc rezultāts ir sasniegts - teksts sākās ar vienu rindiņu ...

Vairāk piemēru

Pārlūka atbalsts - 98,3%

Protams, pilnīga atbalsta nav, taču visas mūsdienu pārlūkprogrammas atbalsta flexbox konstrukcijas. Dažiem joprojām ir nepieciešami prefiksi. Lai iegūtu patiesu priekšstatu, apskatīsim vietni caniuse.com un redzēsim, ka 96,3% mūsdienās izmantoto pārlūkprogrammu darbosies bez prefiksiem, bet 98,3% no tiem. Tas ir lielisks rādītājs, lai drosmīgi izmantotu flexbox.

Lai uzzinātu, kuri prefiksi ir aktuāli šodien (2019. gada jūnijā), es sniegšu piemēru visiem elastīgajiem noteikumiem ar nepieciešamie prefiksi:

/* Konteiners */ .flex ( displejs:-webkit-box; displejs:-ms-flexbox; displejs: flex; displejs:-webkit-inline-box; displejs:-ms-inline-flexbox; displejs:inline-flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; -ms-flex-wrap:wrap; flex-wrap:wrap; -ms -flex-flow: kolonnu aplaušana; flex-flow: kolonnu aplaušana; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-line-pack: izplatīt; align-content:space-around; ) /* Vienumi */ .flex-item ( -webkit-box-flex:1; -ms-flex-positive:1; flex-grow:1; -ms-flex- negatīvs:2; flex-shrink:2; -ms-flex-preferred-size:100px; flex-basis:100px; -ms-flex:1 2 100px; flex:1 2 100px; -ms-flex-item-align :center; align-self:center; -webkit-box-ordinal-group:3; -ms-flex-order:2; order:2; )

Labāk, ja rekvizīti ar prefiksiem ir pirms sākotnējā īpašuma.
Mūsdienām nevajadzīgu prefiksu (pēc caniuse) šajā sarakstā nav, bet kopumā prefiksu ir vairāk.

• (jauns) - jauna sintakse: displejs: flex; .
• (tweener) - vecā 2011. gada neoficiālā sintakse: displejs: flexbox; .
• (vecs) - vecā 2009. gada sintakse: displejs: lodziņš;

Video

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

Noderīgas Flex saites

flexboxfroggy.com — flexbox mācību spēle.

Flexplorer ir vizuāla elastīga koda konstruktors.

Par to, cik viegli ir strādāt ar Flexbox, izmantojot ziņu vietnes veidnes izkārtojuma piemēru.

Ticiet man, nav nepieciešams iedziļināties visās detaļās par darbu ar Flexbox, ja vēlaties sākt to lietot tūlīt. Šajā apmācībā autors iepazīstinās jūs ar dažām Flexbox funkcijām un izveidos "ziņu izkārtojumu", kas ir līdzīgs tam, ko, iespējams, redzējāt The Guardian vietnē.

Iemesls, kāpēc autors izmanto Flexbox, ir daudzo tā sniegto iespēju dēļ:
- adaptīvo kolonnu izveides vieglums;
- vienāda augstuma kolonnu izveidošana;
- iespēja nospiest saturu konteinera apakšā.

Ejam!

1. Sāciet, izveidojot divas kolonnas

Savukārt Flexbox vienkāršo šo procesu ar vairākām priekšrocībām, piemēram:

Apkopēja koda rakstīšana: viss, kas mums jādara, ir izveidot konteineru ar noteikumu displejs:flex;
- elastība: mēs varam mainīt kolonnu izmērus, izstiept un izlīdzināt, mainot pāris CSS rindiņas;
- semantiskais marķējums;
- Turklāt, izmantojot Flexbox, nav nepieciešams atcelt iesaiņojumu, lai izvairītos no neparedzamas izkārtojuma uzvedības.

Sāksim, izveidojot divas kolonnas, vienu, kas aizņems 2/3 no mūsu konteinera platuma, un otru, kas aizņems 1/3 no tā.

Konteiners kolonnas;
- divi bērnu elementi kolonna, no kuriem vienam ir papildu klase galvenā kolonna, ko vēlāk izmantojam, lai kolonnu padarītu plašāku.

Kolonnas ( displejs: flex; ) .column ( flex: 1; ) .main-column ( flex: 2; )
Tāpēc ka galvenā kolonna ir elastības vērtība, kas vienāda ar 2 , tad šī kolonna aizņems divreiz vairāk vietas nekā otrā.

Pievienosim vizuālo noformējumu un rezultātā iegūstam:

Noklikšķiniet, lai skatītu darbību

2. Padariet katru kolonnu par flexbox konteineru

Tātad mums ir nepieciešami raksti, lai:

Izkārtots vertikāli konteinera kolonnas iekšpusē;
- aizņēma visu pieejamo vietu.

noteikums flex-direction: kolonna kas norādīts konteineram, kopā ar noteikumu elastīgums: 1 norādīts bērna elementam, ļauj rakstam vertikāli aizpildīt visu brīvo vietu, vienlaikus saglabājot nemainīgu pirmo divu kolonnu augstumu.

Noklikšķiniet, lai skatītu darbību

3. Tvertnes izgatavošana no izstrādājuma

tituls;
- paragrāfs;
- informācijas panelis ar autora vārdu un komentāru skaitu;
- kāds adaptīvs attēls.

Šeit mēs izmantojam Flexbox, lai ievietotu informācijas joslu elementa apakšā. Lūk, paskatieties, kādu rezultātu mēs ceram iegūt.

Un šeit ir pats kods:

Esam pieteikuši arī īpašumu elastīgums: 1 uz elementu raksts-saturs, tādējādi izstiepjot to visā brīvajā vietā un nospiežot rakstu informācija līdz apakšai. Kolonnas augstumam šajā gadījumā nav nozīmes.

Noklikšķiniet, lai skatītu darbību

4. Vairāku ligzdotu kolonnu pievienošana

Ligzdota kolonna ( flex: 2; )
Šī kolonna tagad būs divreiz platāka par otro.

Noklikšķiniet, lai skatītu darbību

5. Pirmā raksta veidošana ar horizontālu izkārtojumu

Pirmais-raksts ( flex-direction: row; ) .first-article .article-body ( flex: 1; ) .first-article .article-image ( augstums: 300 pikseļi; secība: 2; polsterējums augšpusē: 0; platums: 400 pikseļi;)
Īpašums pasūtījumsšajā gadījumā ir liela nozīme, jo tas ļauj mainīt HTML elementu secību, nemainot HTML marķējumu. Īstenībā, raksts-attēls kodā ir pirms elementa raksta pamatteksts, bet uzvedas tā, it kā būtu pēc tā.

Noklikšķiniet, lai skatītu darbību

6. Adaptīvā izkārtojuma veidošana

Viena no lieliskajām Flexbox lietām ir tā, ka varat vienkārši noņemt noteikumu displejs: flex konteinerā, lai to pilnībā atspējotu (Flexbox), savukārt pārējos tā rekvizītus (piemēram, izlīdzināt vienumus vai flex) turpinās darboties.

Rezultātā mēs varam aktivizēt adaptīvo izkārtojumu, iespējojot Flexbox tikai tad, kad tas ir nepieciešams.

Tāpēc mēs noņemsim displejs: flex no atlasītājiem .kolonnas un .kolonna, tā vietā "iepakojot" tos multivides vaicājumā:

@multivides ekrāns un (min-platums: 800 pikseļi) ( .columns, .column ( displejs: flex; ) )
Tas ir viss! Ekrānos ar mazu izšķirtspēju visi raksti atradīsies viens virs otra, bet ekrānos ar izšķirtspēju virs 800 pikseļiem - divās kolonnās.

7. Nobeiguma pieskārienu pievienošana

@media screen and (min-width: 1000px) ( .first-article ( flex-direction: row; ) .first-article .article-body ( flex: 1; ) .first-article .article-image ( augstums: 300px) ; secība: 2; polsterējuma augšdaļa: 0; platums: 400 pikseļi; ) .galvenā kolonna ( flex: 3; ) .ligzdota kolonna ( flex: 2; ) )
Pirmā raksta saturs ir līdzināts horizontāli ar tekstu kreisajā pusē un attēlu labajā pusē. Arī galvenā kolonna tagad ir plašāka (75%). Tas pats attiecas uz ligzdoto kolonnu (66%).

Un šeit ir gala rezultāts!

Noklikšķiniet, lai skatītu darbību

Secinājums

Par to, cik viegli ir strādāt ar Flexbox, izmantojot ziņu vietnes veidnes izkārtojuma piemēru.

Ticiet man, nav nepieciešams iedziļināties visās detaļās par darbu ar Flexbox, ja vēlaties sākt to lietot tūlīt. Šajā apmācībā autors iepazīstinās jūs ar dažām Flexbox funkcijām un izveidos "ziņu izkārtojumu", kas ir līdzīgs tam, ko, iespējams, redzējāt The Guardian vietnē.

Iemesls, kāpēc autors izmanto Flexbox, ir daudzo tā sniegto iespēju dēļ:
- adaptīvo kolonnu izveides vieglums;
- vienāda augstuma kolonnu izveidošana;
- iespēja nospiest saturu konteinera apakšā.

Ejam!

1. Sāciet, izveidojot divas kolonnas

Savukārt Flexbox vienkāršo šo procesu ar vairākām priekšrocībām, piemēram:

Apkopēja koda rakstīšana: viss, kas mums jādara, ir izveidot konteineru ar noteikumu displejs:flex;
- elastība: mēs varam mainīt kolonnu izmērus, izstiept un izlīdzināt, mainot pāris CSS rindiņas;
- semantiskais marķējums;
- Turklāt, izmantojot Flexbox, nav nepieciešams atcelt iesaiņojumu, lai izvairītos no neparedzamas izkārtojuma uzvedības.

Sāksim, izveidojot divas kolonnas, vienu, kas aizņems 2/3 no mūsu konteinera platuma, un otru, kas aizņems 1/3 no tā.

Konteiners kolonnas;
- divi bērnu elementi kolonna, no kuriem vienam ir papildu klase galvenā kolonna, ko vēlāk izmantojam, lai kolonnu padarītu plašāku.

Kolonnas ( displejs: flex; ) .column ( flex: 1; ) .main-column ( flex: 2; )
Tāpēc ka galvenā kolonna ir elastības vērtība, kas vienāda ar 2 , tad šī kolonna aizņems divreiz vairāk vietas nekā otrā.

Pievienosim vizuālo noformējumu un rezultātā iegūstam:

Noklikšķiniet, lai skatītu darbību

2. Padariet katru kolonnu par flexbox konteineru

Tātad mums ir nepieciešami raksti, lai:

Izkārtots vertikāli konteinera kolonnas iekšpusē;
- aizņēma visu pieejamo vietu.

noteikums flex-direction: kolonna kas norādīts konteineram, kopā ar noteikumu elastīgums: 1 norādīts bērna elementam, ļauj rakstam vertikāli aizpildīt visu brīvo vietu, vienlaikus saglabājot nemainīgu pirmo divu kolonnu augstumu.

Noklikšķiniet, lai skatītu darbību

3. Tvertnes izgatavošana no izstrādājuma

tituls;
- paragrāfs;
- informācijas panelis ar autora vārdu un komentāru skaitu;
- kāds adaptīvs attēls.

Šeit mēs izmantojam Flexbox, lai ievietotu informācijas joslu elementa apakšā. Lūk, paskatieties, kādu rezultātu mēs ceram iegūt.

Un šeit ir pats kods:

Esam pieteikuši arī īpašumu elastīgums: 1 uz elementu raksts-saturs, tādējādi izstiepjot to visā brīvajā vietā un nospiežot rakstu informācija līdz apakšai. Kolonnas augstumam šajā gadījumā nav nozīmes.

Noklikšķiniet, lai skatītu darbību

4. Vairāku ligzdotu kolonnu pievienošana

Ligzdota kolonna ( flex: 2; )
Šī kolonna tagad būs divreiz platāka par otro.

Noklikšķiniet, lai skatītu darbību

5. Pirmā raksta veidošana ar horizontālu izkārtojumu

Pirmais-raksts ( flex-direction: row; ) .first-article .article-body ( flex: 1; ) .first-article .article-image ( augstums: 300 pikseļi; secība: 2; polsterējums augšpusē: 0; platums: 400 pikseļi;)
Īpašums pasūtījumsšajā gadījumā ir liela nozīme, jo tas ļauj mainīt HTML elementu secību, nemainot HTML marķējumu. Īstenībā, raksts-attēls kodā ir pirms elementa raksta pamatteksts, bet uzvedas tā, it kā būtu pēc tā.

Noklikšķiniet, lai skatītu darbību

6. Adaptīvā izkārtojuma veidošana

Viena no lieliskajām Flexbox lietām ir tā, ka varat vienkārši noņemt noteikumu displejs: flex konteinerā, lai to pilnībā atspējotu (Flexbox), savukārt pārējos tā rekvizītus (piemēram, izlīdzināt vienumus vai flex) turpinās darboties.

Rezultātā mēs varam aktivizēt adaptīvo izkārtojumu, iespējojot Flexbox tikai tad, kad tas ir nepieciešams.

Tāpēc mēs noņemsim displejs: flex no atlasītājiem .kolonnas un .kolonna, tā vietā "iepakojot" tos multivides vaicājumā:

@multivides ekrāns un (min-platums: 800 pikseļi) ( .columns, .column ( displejs: flex; ) )
Tas ir viss! Ekrānos ar mazu izšķirtspēju visi raksti atradīsies viens virs otra, bet ekrānos ar izšķirtspēju virs 800 pikseļiem - divās kolonnās.

7. Nobeiguma pieskārienu pievienošana

@media screen and (min-width: 1000px) ( .first-article ( flex-direction: row; ) .first-article .article-body ( flex: 1; ) .first-article .article-image ( augstums: 300px) ; secība: 2; polsterējuma augšdaļa: 0; platums: 400 pikseļi; ) .galvenā kolonna ( flex: 3; ) .ligzdota kolonna ( flex: 2; ) )
Pirmā raksta saturs ir līdzināts horizontāli ar tekstu kreisajā pusē un attēlu labajā pusē. Arī galvenā kolonna tagad ir plašāka (75%). Tas pats attiecas uz ligzdoto kolonnu (66%).

Un šeit ir gala rezultāts!

Noklikšķiniet, lai skatītu darbību

Secinājums

Čau, habr!

Kādā jaukā vakarā, kas neko interesantu neliecināja, mūsu čatā tika saņemts viņa paša 2012. gada pavasarī rakstīts publikācijas autora priekšlikums rakstīt pārtaisīt rakstu, bet izmantojot FlexBox un tam pievienoto skaidrojumu, kas un kā tas. darbojas. Pēc zināmas šaubu daļas tomēr uzvarēja interese izprast specifikāciju dziļāk, un es droši apsēdos, lai saliktu tieši šos piemērus. Iedziļinoties šajā jomā, sāka iezīmēties daudzas nianses, kas pārvērtās par kaut ko vairāk nekā tikai izkārtojumu pārvēršanu. Kopumā šajā rakstā es vēlos runāt par tik brīnišķīgu specifikāciju ar nosaukumu "CSS Flexible Box Layout Module" un parādīt dažas no tās interesantajām funkcijām un lietojumprogrammu piemēriem. Visus interesentus laipni aicinu uz habrakat.

Uz ko vēlos vērst uzmanību, lai FlexBox izkārtojuma izkārtojums izstrādātājam būs zināmā mērā jāpielāgo. Pēc sava piemēra es jutu, ka daudzu gadu pieredze izspēlē nežēlīgu joku. FlexBox prasa nedaudz atšķirīgu priekšstatu par to, kā elementi tiek sakārtoti plūsmā.

Tehniskā daļa

Tātad. Pakalpojumā FlexBox ir divi galvenie preču veidi: Flex Container un tā atvasinājumi Flex preces. Lai inicializētu konteineru, pietiek ar tā piešķiršanu elementam, izmantojot css displejs:flex; vai displejs: inline-flex;. Atšķirība starp flex un inline-flex ir tikai mijiedarbības principā ar konteineru aptverošajiem elementiem, piemēram, displeju: bloks; un displejs: inline-block;, attiecīgi.

Elastīgā konteinera iekšpusē ir izveidotas divas asis, galvenā ass un perpendikulāra vai šķērsass. Pārsvarā elastīgi elementi ir sakārtoti precīzi pa galveno asi un pēc tam pa šķērsasi. Pēc noklusējuma galvenā ass ir horizontāla un iet no kreisās puses uz labo, savukārt šķērsass ir vertikāla un iet no augšas uz leju.

Asu virzienu var kontrolēt, izmantojot css īpašību flex virziens. Šim īpašumam ir vairākas vērtības:
rinda(noklusējums): elastīgā konteinera galvenajai asij ir tāda pati orientācija kā pašreizējā rindas virziena režīma iekļautajai asij. Galvenās ass virziena sākums (galvenais sākums) un beigas (main-end) atbilst iekļautās ass (inline-axis) sākumam (inline-start) un beigām (inline-end).
rinda reverss: Viss ir tāpat kā rindā, tikai main-start un main-end tiek apmainīti.
kolonna: tāpat kā rinda, tikai tagad galvenā ass ir vērsta no augšas uz leju.
kolonnas reverss: tāpat kā rindas reversā, tikai galvenā ass ir no apakšas uz augšu.
Kā tas darbojas, var redzēt jsfiddle piemērā.

Pēc noklusējuma visi elastīgie vienumi konteinerā ietilpst vienā rindā, pat ja tie neietilpst konteinerā, tie pārsniedz konteinera robežas. Šī darbība tiek pārslēgta, izmantojot īpašumu flex wrap. Šim īpašumam ir trīs stāvokļi:
nowrap(noklusējums): elastīgi vienumi ir sakārtoti no kreisās puses uz labo.
iesaiņojums: elastīgi elementi ir būvēti vairāku līniju režīmā, pārsūtīšana tiek veikta šķērsass virzienā, no augšas uz leju.
ietīt reversu: tāds pats kā iesaiņojums, bet aptin no apakšas uz augšu.
Apskatīsim piemēru.

Ērtības labad ir papildu īpašums elastīga plūsma, kurā varat vienlaikus norādīt flex virziens un flex wrap. Tas izskatās šādi: elastīga plūsma:

Elementus konteinerā var līdzināt, izmantojot rekvizītu attaisnot-saturs pa galveno asi. Šis īpašums pieņem pat piecas dažādas vērtības.
elastīgs starts(noklusējums): elastīgie vienumi tiek līdzināti galvenās ass sākumam.
lokans gals: elementi ir līdzināti galvenās ass galam
centrs: elementi ir līdzināti galvenās ass centrā
atstarpe starp: Elementi aizņem visu pieejamo platumu konteinerā, visattālākie elementi cieši pieguļ konteinera malām, un brīvā vieta ir vienmērīgi sadalīta starp elementiem.
telpa apkārt: elastīgie vienumi ir izlīdzināti tā, lai brīvā vieta būtu vienmērīgi sadalīta starp vienumiem. Bet ir vērts atzīmēt, ka atstarpe starp konteinera malu un galējiem elementiem būs uz pusi mazāka nekā atstarpe starp elementiem rindas vidū.
Protams, varat noklikšķināt uz šī īpašuma darbības piemēra.

Tas vēl nav viss, mums ir arī iespēja izlīdzināt elementus gar šķērsasi. Piesakot īpašumu izlīdzināt vienumus, kas arī aizņem piecas dažādas vērtības, jūs varat sasniegt interesantu uzvedību. Šis īpašums ļauj izlīdzināt elementus rindā attiecībā pret otru.
elastīgs starts: visi elementi tiek nospiesti līdz rindas sākumam
lokans gals: elementi tiek nospiesti līdz rindas beigām
centrs: elementi ir līdzināti līnijas centram
bāzes līnija: elementi tiek saskaņoti ar teksta bāzes līniju
stiept(noklusējums): elementi tiek izstiepti, lai aizpildītu visu līniju.

Vēl viens līdzīgs īpašums iepriekšējam ir saskaņot saturu. Tas vien ir atbildīgs par visu līniju izlīdzināšanu attiecībā pret elastīgo konteineru. Tam nebūs nekādas ietekmes, ja elastīgie vienumi atrodas vienā rindā. Īpašumam ir sešas dažādas vērtības.
elastīgs starts: visas līnijas tiek nospiestas līdz šķērsass sākumam
lokans gals: visas līnijas ir nospiestas līdz šķērsass beigām
centrs: visas līnijas iepakojumā ir izlīdzinātas ar šķērsass centru
atstarpe starp: līnijas tiek sadalītas no augšējās malas uz leju, atstājot brīvu vietu starp līnijām, savukārt galējās līnijas tiek piespiestas pie konteinera malām.
telpa apkārt: līnijas ir vienmērīgi sadalītas pa konteineru.
stiept(noklusējums): līnijas tiek izstieptas, lai aizpildītu pieejamo vietu.
Varat izmēģināt, kā šajā piemērā darbojas vienumu līdzināšana un satura līdzināšana. Es īpaši izklāstīju šīs divas īpašības vienā piemērā, jo tās diezgan cieši mijiedarbojas, katrs pildot savu uzdevumu. Ievērojiet, kas notiek, ja elementi tiek novietoti vienā rindā un vairākās rindās.

Mēs izdomājām elastīgā konteinera parametrus, atliek risināt elastīgo elementu īpašības.
Pirmais īpašums, ar kuru mēs tiksim iepazīstināti, ir pasūtījums. Šis īpašums ļauj mainīt atrašanās vietu konkrēta elementa straumē. Pēc noklusējuma visiem elastīgajiem vienumiem ir secība: 0; un ir būvēti dabiskās plūsmas secībā. Piemērā varat redzēt, kā elementi mainās vietām, ja tiem tiek piemērotas dažādas secības vērtības.

Viena no galvenajām īpašībām ir elastīgs pamats. Izmantojot šo īpašību, mēs varam norādīt elastīga elementa pamatnes platumu. Noklusējuma vērtība ir auto. Šis īpašums ir cieši saistīts ar flex-augt un elastīga saraušanās, par ko es runāšu nedaudz vēlāk. Pieņem platuma vērtību pikseļos, %, em un citās vienībās. Tas nav tikai elastīgā elementa platums, tas ir sava veida sākumpunkts. Attiecīgi pret kuru elements ir izstiepts vai saraujas. Automātiskajā režīmā elements iegūst bāzes platumu attiecībā pret tajā esošo saturu.

flex-augt vairākiem resursiem ir pilnīgi nepareizs apraksts. Tajā teikts, ka tas it kā nosaka elementu izmēru attiecību konteinerā. Patiesībā tā nav. Šis rekvizīts norāda faktoru, lai palielinātu elementu, ja konteinerā ir brīva vieta. Šī rekvizīta noklusējuma vērtība ir 0. Iedomāsimies, ka mums ir elastīgs konteiners, kura platums ir 500 pikseļi, kura iekšpusē ir divi elastīgi vienumi, katra pamata platums ir 100 pikseļi. Tas atstāj vēl 300 pikseļus brīvas vietas konteinerā. Ja pirmajam elementam ir dots flex-grow: 2; un otrajam elementam ir dots flex-grow: 1;. Rezultātā šie bloki aizņems visu pieejamo konteinera platumu, tikai pirmā bloka platums būs 300 pikseļi, bet otrā tikai 200 pikseļi. Kas notika? Notika tas, ka pieejamā 300 pikseļu brīvā vieta konteinerā tika sadalīta starp elementiem proporcijā 2:1, +200 pikseļi pret pirmo un +100 pikseļi pret otro. Patiesībā tā tas darbojas.

Šeit raiti pārejam pie cita līdzīga īpašuma, proti elastīga saraušanās. Noklusējuma vērtība ir 1. Tā arī nosaka elementu platuma maiņas koeficientu, tikai pretējā virzienā. Ja konteiners ir plats mazāk nekā elementu pamatnes platumu summa, tad šī īpašība stājas spēkā. Piemēram, konteinera platums ir 600 pikseļi, un katrs elastīgā pamata elements ir 300 pikseļi. Piešķiriet pirmajam elementam elastīgā saraušanās: 2; un otrajam elementam flex-shrink: 1;. Tagad samazināsim konteineru par 300 pikseļiem. Tāpēc elementu platuma summa ir par 300 pikseļiem lielāka nekā konteinera. Šī starpība tiek sadalīta proporcijā 2:1, izrādās, ka no pirmā bloka mēs atņemam 200 pikseļus, bet no otrā - 100 pikseļus. Jaunais elementa izmērs ir attiecīgi 100 pikseļi un 200 pikseļi pirmajam un otrajam elementam. Ja mēs iestatām flex-shrink uz 0, tad mēs neļaujam elementam sarauties līdz mazākam par tā pamatnes platumu.

Patiesībā šis ir ļoti vienkāršots apraksts par to, kā tas viss darbojas, lai vispārējais princips būtu skaidrs. Sīkāk, ja kādam interesē, algoritms ir aprakstīts specifikācijā.

Visas trīs īpašības var uzrakstīt saīsinātā formā, izmantojot izteiksmi flex. Tas izskatās šādi:
flex: ;
Un mēs varam arī uzrakstīt vēl divas saīsinātas versijas, flex: auto; un flex: nav, kas nozīmē flex: 1 1 auto; un flex: 0 0 auto; attiecīgi.

Pēdējais elastīgo priekšmetu īpašums ir izlīdzināt-paši. Šeit viss ir vienkārši, tas ir tas pats, kas konteinera vienumu izlīdzināšana, kas ļauj ignorēt noteikta elementa līdzinājumu.

Visi noguruši! Nāciet piemērus!

Sākumā norādīsim lapas galveno platumu, izlīdziniet to centrā, nospiediet kājeni līdz lapas apakšai. Kā vienmēr kopumā.

Html ( fons: #ccc; minimālais augstums: 100%; fontu saime: sans-serif; displejs: -webkit-flex; displejs: flex; flex-direction: kolonna; ) pamatteksts ( piemale: 0; polsterējums: 0 15 pikseļi ; displejs: -webkit-flex; displejs: flex; flex-direction: kolonna; flex: auto; ) .header (platums: 100%; maksimālais platums: 960px; minimālais platums: 430px; margin: 0 auto 30px; polsterējums : 30 pikseļi 0 10 pikseļi; displejs: -webkit-flex; displejs: flex; flex-wrap: wrap; attaisnot-saturs: atstarpe starp; lodziņa izmērs: apmale-box; ) .main (platums: 100%; maks. platums .footer ( fons: #222; platums: 100%; maksimālais platums: 960 pikseļi; minimālais platums: 430 pikseļi; krāsa: #eee; piemale: automātiska; polsterējums: 15 pikseļi; kastes izmērs: apmale-box; )

Sakarā ar to, ka .main norādījām flex-grow: 1; tas stiepjas līdz pilnam pieejamajam augstumam, tādējādi nospiežot kājeni līdz apakšai. Šī risinājuma priekšrocība ir tāda, ka kājenei var būt nefiksēts augstums.

Tagad galvenē ievietosim logotipu un izvēlni.
.logo ( fonta izmērs: 0; piemale: -10 pikseļi 10 pikseļi 10 pikseļi ; ) .logo:before ( fons: #222; platums: 50px; augstums: 50px; piemale: 0 10px 0 20px; apmales rādiuss: 50%; ) .logo:after ( fons: #222; platums: 90px; augstums : 30 pikseļi; ) .nav ( piemale: -5px 0 0 -5px; displejs: -webkit-flex; displejs: flex; flex-wrap: wrap; ) .nav-itm ( fons: #222; platums: 130px; augstums: 50 pikseļi; fonta izmērs: 1,5 rem; krāsa: #eee; teksta noformējums: nav; piemale: 5 pikseļi 0 0 5 pikseļi; displejs: -webkit-flex; displejs: elastīgs; attaisnot saturu: centrā; līdzināt vienumus: centrā; )

Tā kā galvene ir iestatīta uz flex-wrap: wrap; un attaisnot-saturs: atstarpe-starp; logotips un izvēlne ir izkaisīti dažādās galvenes pusēs, un, ja izvēlnei nepietiks vietas, tas eleganti nobīdīsies zem logotipa.

Tālāk mēs redzam lielu ziņu vai reklāmkarogu, man ir grūti pateikt, kas tas ir, bet tas arī nav galvenais. Mums ir attēls labajā pusē un teksts ar nosaukumu kreisajā pusē. Es personīgi pieturos pie idejas, ka jebkuriem elementiem jābūt pēc iespējas elastīgākiem, neatkarīgi no tā, vai tas ir adaptīvs izkārtojums vai statisks. Tāpēc mums šajā ierakstā ir sānjosla, kurā ir ievietots attēls, stingri ņemot, mēs nevaram precīzi pateikt, kāds platums mums ir nepieciešams, jo šodien mums ir liela bilde, rīt maza, un katru reizi mēs nelabprāt pārtaisām elementu no nekā. Tāpēc mums ir nepieciešams, lai sānjosla ieņemtu tai vajadzīgo vietu, un pārējā vieta pāriet uz saturu. Darām to:

Lodziņš ( fonta izmērs: 1,25 rem; līnijas augstums: 1,5; fonta stils: slīpraksts; piemale: 0 0 40 pikseļi -50 pikseļi; displejs: -webkit-flex; displejs: flex; flex-wrap: ietīšana; pamatojums saturs: centrs; ) .box-base ( margin-left: 50px; flex: 1 0 430px; ) .box-side ( margin-left: 50px; flex: none; ) .box-img ( max-width: 100%; augstums : auto;)

Kā redzat .box-base, kur mums ir virsraksts un teksts, es norādīju pamatnes platumu ar elastīgs pamats: 430 pikseļi, kā arī aizliedza izmantot bloka saraušanos elastīgi saraušanās: 0;. Ar šo manipulāciju esam teikuši, ka saturs nevar kļūt platāks par 430 pikseļiem. Un ņemot vērā to, ka priekš .box es precizēju flex-wrap: wrap; brīdī, kad sānjosla un saturs netiks ievietots konteinerā.box, sānjosla automātiski nonāks zem satura. Un tas viss bez lietošanas @ mediji! Manuprāt, tas ir patiešām forši.

Mums paliek trīs kolonnu saturs. Šai problēmai ir vairāki risinājumi, es parādīšu vienu no tiem, pārējos izkārtojumos ir cita iespēja.
Izveidosim konteineru, nosauksim to kā .content un iestatīsim.
.content ( margin-down: 30px; displejs: -webkit-flex; displejs: flex; flex-wrap: wrap; )

Konteinerā ir trīs kolonnas: .banners, .posts, .comments
.baneri ( flex: 1 1 200px; ) .posts ( margin: 0 0 30px 30px; flex: 1 1 200px; ) .comments ( margin: 0 0 30px 30px; flex: 1 1 200px;)

Es iestatīju kolonnu pamatnes platumu 200 pikseļi, lai kolonnas pārāk nesašaurinās, labāk, ja tās tiek pārvietotas viena zem otras pēc vajadzības.

Saskaņā ar izkārtojumu mēs nevaram iztikt bez @ media ar saturu, tāpēc mēs vēl nedaudz pielāgosim kolonnu darbību platumam<800px и <600px.
@multivides ekrāns un (maksimālais platums: 800 pikseļi) ( .reklāmkarogi ( margin-left: -30px; displejs: -webkit-flex; displejs: flex; flex-basis: 100%; ) .posts ( margin-left: 0; ) ) @multivides ekrāns un (maksimālais platums: 600 pikseļi) ( .content (displejs: bloķēt; ) .baneri ( piemale: 0; displejs: bloķēt; ) .comments ( margin: 0; ) )

Tas ir viss FlexBox izkārtojuma izveides burvība. Vēl viens uzdevums, kas man patika, ir 5. izkārtojumā, konkrēti tas attiecas uz satura adaptāciju.

Mēs redzam, kā uz darbvirsmas izšķirtspējas ziņas tiek iebūvētas režģī, kurā ir trīs pēc kārtas. Ja skatvietas platums ir mazāks par 800 pikseļiem, režģis pārvēršas kolonnā ar ziņām, kur ziņas fotoattēls pārmaiņus atrodas ziņas satura kreisajā un labajā pusē. Un, ja platums ir mazāks par 600 pikseļiem, ziņas fotoattēls tiek paslēpts pavisam.
.grid ( displejs: -webkit-flex; displejs: flex; flex-wrap: wrap; justify-content: space-between; ) .grid-itm ( margin-bottom: 30px; flex-basis: calc(33,33% - 30px) * 2/3); displejs: -webkit-flex; displejs: flex; flex-wrap: wrap; ) .grid-img ( margin: 0 auto 20px; flex: 0 1 80%; ) .grid-cont( flex: 0 1 100%; ) .grid-title ( text-align: center; ) @media screen un (maksimālais platums: 800 pikseļi) ( .grid-itm ( flex-wrap: nowrap; flex-basis: 100%; ) . grid-img ( flex: 0 0 auto; ) .grid-itm:nth-child(pāra) .grid-img ( margin: 0 0 0 30px; secība: 2; ) .grid-itm:nth-child(nepāra) .grid-img ( margin: 0 30px 0 0; ) .grid-cont ( flex: 1 1 auto; ) .grid-title ( text-align: left; ) ) @media screen un (maksimālais platums: 600 pikseļi) ( .grid-img ( displejs: nav; ) )

Faktiski šī ir tikai neliela daļa no tā, ko var ieviest FlexBox. Specifikācija ļauj izveidot ļoti sarežģītus lapu izkārtojumus, vienlaikus izmantojot vienkāršu kodu.

Saturs:

Flexbox ir jauns veids, kā kārtot blokus lapā. Šī ir tehnoloģija, kas radīta īpaši elementu izkārtojumam, atšķirībā no pludiņiem. Izmantojot Flexbox Jūs varat viegli izlīdzināt elementus horizontāli un vertikāli, mainīt virzienu un elementu parādīšanas secību, izstiept blokus līdz pilnam vecāka augstumam vai pienaglot tos apakšējā malā.

UPD no 02.02.2017: izveidoja parocīgu flexbox cheatsheet ar tiešraides demonstrācijām un aprakstiem no specifikācijas: Flexbox cheatsheet .

Piemēros tiek izmantota tikai jaunā sintakse. Šīs rakstīšanas laikā tie ir vispareizāk parādīti Chrome. Firefox tie darbojas daļēji, Safari nedarbojas vispār.

Saskaņā ar caniuse.com, Flexbox neatbalsta IE 8 un 9 un Opera Mini, un citas pārlūkprogrammas neatbalsta visus rekvizītus un/vai pieprasa prefiksus.

Tas nozīmē, ka šobrīd tehnoloģiju nevar plaši izmantot, taču ir pienācis laiks to iepazīt tuvāk.

Vispirms jums jāzina, ka elastīgie priekšmeti ir sakārtoti pa asīm. Pēc noklusējuma elementi ir izvietoti horizontāli – gar galvenā ass- galvenā ass.

Tāpat paturiet prātā, ka, lietojot Flexbox float , Clear un Vertikālā līdzināšana nedarbojas iekšējiem blokiem, kā arī rekvizīti, kas nosaka kolonnas tekstā.

Sagatavosim testa vietu eksperimentiem:

Viens vecāku bloks (dzeltens) un 5 bērni.

Displejs: flex

Un tagad vecākajam elementam pievienojam displeju: flex; . Iekšējie divstūri sarindojas (gar galveno asi) ar tāda paša augstuma kolonnām neatkarīgi no satura.

displejs:flex; padara visus bērnu elementus plūstošus - flex , nevis ierindotus vai blokus, kā tas bija sākotnēji.

Ja vecākblokā ir attēli vai teksts bez iesaiņojuma, tie kļūst par anonīmiem elastīgiem vienumiem.

displeja rekvizīts Flexbox var ņemt divas vērtības:

flex - uzvedas kā bloka elements. Aprēķinot bloku platumu, prioritāte ir izkārtojumam (ja bloku platums nav pietiekams, saturs var izlīst no apmalēm).

inline-flex — darbojas kā inline-block. Prioritāte saturam (saturs izkliedē blokus vajadzīgajā platumā, lai līnijas būtu piemērotas, ja iespējams).

Flex virziens

Virzienu, kādā bloki tiek izkārtoti, kontrolē flex-direction īpašība.

Iespējamās vērtības:

rinda - rinda (noklusējuma vērtība); row-reverse - rinda ar elementiem apgrieztā secībā; kolonna - kolonna; kolonna-reverss - kolonna ar elementiem apgrieztā secībā.

rinda un rinda-reverss

kolonna un kolonna-reverss

Flex-wrap

Vienā rindā var būt daudz bloku. Neatkarīgi no tā, vai tie tiek ietīti, nosaka flex-wrap īpašība.

Iespējamās vērtības:

nowrap - bloki nav iesaiņoti (noklusējuma vērtība); wrap - bloki ir iesaiņoti; wrap-reverse - bloki tiek ietīti un novietoti apgrieztā secībā.

Lai saīsinātu flex-direction un flex-wrap īpašības, ir īpašība: flex-flow .

Iespējamās vērtības: varat iestatīt abus rekvizītus vai tikai vienu. Piemēram:

flex-flow: kolonna; flex-flow: wrap-reverse; flex-flow: kolonna-reverse wrap;

Demonstrācija rindai-reverse wrap-reverse:

pasūtījums

Pasūtījuma rekvizīts tiek izmantots, lai kontrolētu bloku secību.

Iespējamās vērtības: skaitļi. Lai vispirms ievietotu bloku, dodiet tam secību: -1:

attaisnot-saturs

Vienumu līdzināšanai ir vairāki rekvizīti: justify-content , align-items un align-self .

Pamatkonteinera elementi tiek lietoti elementi attaisnot saturu un līdzināt vienumus, bet paši līdzināt tos bērniem.

Justify-content ir atbildīgs par galvenās ass izlīdzināšanu.

Pamatojuma satura iespējamās vērtības:

flex-start - vienumi tiek izlīdzināti no galvenās ass sākuma (noklusējuma vērtība); flex-end - elementi ir izlīdzināti no galvenās ass gala; centrs - elementi ir izlīdzināti ar galvenās ass centru; telpa starp - elementi ir izlīdzināti pa galveno asi, sadalot brīvo vietu savā starpā; telpa ap - elementi ir izlīdzināti gar galveno asi, sadalot ap tiem brīvo vietu.

flex-start un flex-end

telpa-starp, telpa-ap

Izlīdziniet vienumus

align-items ir atbildīgs par izlīdzināšanu pa perpendikulāro asi.

Iespējamās izlīdzināšanas vienumu vērtības:

flex-start - elementi ir izlīdzināti no perpendikulārās ass sākuma; flex-end - elementi ir izlīdzināti no perpendikulārās ass gala; centrs - elementi ir centrēti; bāzes līnija - elementi ir izlīdzināti gar bāzes līniju; stiept — elementi tiek izstiepti, lai aizņemtu visu vietu gar perpendikulāro asi (noklusējuma vērtība).

flex-start , flex-end

bāzes līnija, stiept

Saskaņot-self

align-self ir atbildīgs arī par izlīdzināšanu pa perpendikulāro asi, bet ir iestatīts atsevišķiem elastīgiem elementiem.

Iespējamās vērtības pašlīdzināšanai:

auto ir noklusējuma vērtība. Norāda, ka elements izmanto vecākelementa līdzinājuma vienumus; flex-start - elements ir izlīdzināts no perpendikulārās ass sākuma; flex-end - elements ir izlīdzināts no perpendikulārās ass gala; centrs - elements ir centrēts; bāzes līnija - elements ir izlīdzināts ar bāzes līniju; stiept - elements ir izstiepts, augstumā aizņemot visu vietu.

Satura izlīdzināšana

Lai kontrolētu līdzinājumu daudzrindu elastīgā konteinerā, ir rekvizīts align-content.

Iespējamās vērtības:

flex-start - vienumi tiek izlīdzināti no galvenās ass sākuma; flex-end - elementi ir izlīdzināti no galvenās ass gala; centrs - elementi ir izlīdzināti ar galvenās ass centru; telpa starp - elementi ir izlīdzināti pa galveno asi, sadalot brīvo vietu savā starpā; telpa ap - elementi ir izlīdzināti pa galveno asi, sadalot ap tiem brīvo telpu; stiept - elementi tiek izstiepti, lai aizpildītu visu augstumu (noklusējuma vērtība).

flex-start , flex-end

centrs, stiept

telpa-starp, telpa-ap

PS: Dažas lietas, kuras man nekad nav izdevies redzēt darbībā, piemēram, līnijas flex-flow: kolonnas aplauzums vai tā paša flex-direction pilna ieraksta: kolonna; flex-wrap: wrap; .

Elementi ir salikti, bet nav ietīti:

Wrap nedarbojas ar flex-direction: kolonna; , lai gan pēc specifikācijas tas izskatās šādi:

Es domāju, ka ar laiku tas darbosies.

UPD no 21.06.2014.: Viss darbojas, ja piešķirat blokam augstumu. Paldies par padomu