Sveiks, habr!

Kādā jaukā vakarā, neko interesantu neparedzot, mūsu čatā tika saņemts 2012. gada pavasarī sarakstītās publikācijas “5 tiešām noderīgu atsaucīgu iezīmēšanas veidņu tulkošana kodā” autora priekšlikums rakstīt pārtaisīt rakstu, bet izmantojot FlexBox. un pievienots skaidrojums par to, kas un kā darbojas. Pēc dažām šaubām interese izprast specifikāciju joprojām uzvarēja, un es laimīgs apsēdos, lai ierakstītu tos pašus piemērus. Iedziļinoties šajā jomā, sāka iezīmēties daudzas nianses, kas izauga par kaut ko vairāk nekā tikai izkārtojumu pārveidoš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žus no tiem. interesantas funkcijas un lietojumu piemēri. Laipni aicinu visus interesentus pievienoties kapāšanai.

Es vēlos vērst jūsu uzmanību uz to, ka, lai izveidotu FlexBox izkārtojumu, izstrādātājam būs jāpielāgojas. No sava piemēra es jutu, ka daudzu gadu pieredze izspēlē nežēlīgu joku. FlexBox prasa nedaudz atšķirīgu domāšanas veidu par elementu sakārtošanu plūsmā.

Tehniskā daļa

Pirms pāriet uz piemēriem, ir vērts saprast, kādas īpašības ir iekļautas šajā specifikācijā un kā tās darbojas. Tā kā daži no tiem sākotnēji nav īsti skaidri, un dažus ieskauj mīti, kuriem nav nekāda sakara ar realitāti.

Tātad. FlexBox ir divi galvenie elementu veidi: Flex Container un tā bērnu elementi- Flex vienums. Lai inicializētu konteineru, vienkārši piešķiriet 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, līdzīgi kā displejs: bloks; un displejs: inline-block;, attiecīgi.

Elastīgā konteinerā ir izveidotas divas asis, galvenā ass un perpendikulārā vai šķērsass. Pārsvarā elastīgie elementi ir izlīdzināti pa galveno asi un pēc tam gar šķērsasi. Pēc noklusējuma galvenā ass ir horizontāla un vērsta no kreisās uz labo pusi, bet šķērsass ir vertikāla un vērsta 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 (galvenais gals) atbilst iekļautās ass sākumam (inline-start) un beigām (inline-end).
rinda-reverss: Viss ir tāpat kā rindā, tiek samainīti tikai galvenais starts un galvenais gals.
kolonna: tāpat kā rinda, tikai tagad galvenā ass ir vērsta no augšas uz leju.
kolonna-reverss: tāpat kā rindas reversā, tikai galvenā ass ir vērsta no apakšas uz augšu.
Kā tas darbojas, varat redzēt jsfiddle piemērā.

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

Ērtības labad ir pieejams papildu īpašums flex-flow, 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 īpašumu attaisnot-saturs pa galveno asi. Šis īpašums aizņem pat piecus dažādas iespējas vērtības.
flex-start(noklusējums): Flex elementi ir līdzināti galvenās ass sākumam.
flex-end: elementi ir līdzināti galvenās ass galam
centrs: elementi ir līdzināti galvenās ass centrā
telpa starp: Elementi konteinerā aizņem visu pieejamo platumu, tālākie elementi ir cieši piespiesti konteinera malām, un brīvā vieta tiek vienmērīgi sadalīta starp elementiem.
telpa-ap: Elastīgie elementi ir izlīdzināti tā, lai brīvā vieta būtu vienmērīgi sadalīta starp elementiem. Bet ir vērts atzīmēt, ka atstarpe starp konteinera malu un ārē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.
flex-start: visi elementi tiek virzīti uz rindas sākumu
flex-end: elementi tiek nobīdīti līdz rindas beigām
centrs: elementi ir līdzināti rindas centrā
bāzes līnija: elementi ir līdzināti teksta pamatlīnijai
stiept(noklusējums): elementi tiek izstiepti, lai aizpildītu visu līniju.

Vēl viens īpašums, kas līdzīgs iepriekšējam, ir līdzināt-saturs. Tas ir vienīgais, kas atbild par visu līniju izlīdzināšanu attiecībā pret elastīgo konteineru. Tam nebūs nekādas ietekmes, ja elastīgie vienumi aizņems vienu rindiņu. Īpašumam ir sešas dažādas vērtības.
flex-start: visas līnijas tiek nospiestas līdz šķērsass sākumam
flex-end: visas līnijas ir nospiestas līdz šķērsass beigām
centrs: visas iepakojuma līnijas ir izlīdzinātas ar šķērsass centru
telpa starp: līnijas tiek sadalītas no augšējās malas uz leju, atstājot brīvu vietu starp līnijām, savukārt ārējās līnijas tiek piespiestas pie konteinera malām.
telpa-ap: Līnijas ir vienmērīgi sadalītas visā konteinerā.
stiept(noklusējums): līnijas tiek izstieptas, lai aizņemtu visu pieejamo vietu.
Varat izmēģināt, kā šajā piemērā darbojas vienumu līdzināšana un satura līdzināšana. Šīs divas īpašības es īpaši izklāstīju vienā piemērā, jo tās mijiedarbojas diezgan cieši, un katrs veic savu uzdevumu. Ievērojiet, kas notiek, ja elementi tiek novietoti vienā rindā vai vairākās rindās.

Esam sakārtojuši elastīgā konteinera parametrus, atliek vien izdomāt elastīgo elementu īpašības.
Pirmais īpašums, ar kuru iepazīsimies, ir pasūtījums. Šis rekvizīts ļauj mainīt konkrēta elementa pozīciju 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 tiek apmainīti, ja tiem tiek piemērotas dažādas secības vērtības.

Viena no galvenajām īpašībām ir flex-bāze. Izmantojot šo īpašību, mēs varam norādīt elastīgas preces bāzes 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. Būtībā tas nav stingri elastīgā elementa platums, tas ir sava veida sākumpunkts. Attiecīgi pret kuru elements stiepjas vai saraujas. Automātiskajā režīmā elements iegūst bāzes platumu attiecībā pret tajā esošo saturu.

flex-augt vairākos resursos tam ir pilnīgi nepareizs apraksts. Tajā teikts, ka tas it kā nosaka konteinerā esošo elementu izmēru attiecību. Patiesībā tā nav taisnība. Šis rekvizīts norāda elementa palielinājuma koeficientu, ja tāds ir brīva vieta konteinerā. Pēc noklusējuma šī rekvizīta vērtība ir 0. Iedomāsimies, ka mums ir elastīgs konteiners, kura platums ir 500 pikseļi, un tā iekšpusē ir divi elastīgi vienumi, katrs ar pamatnes platumu 100 pikseļi. Tas atstāj vēl 300 pikseļus brīvas vietas konteinerā. Ja mēs norādām flex-grow: 2; pirmajam elementam un flex-grow: 1; otrajam elementam. 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 konteinerā pieejamā 300 pikseļu brīvā vieta tika sadalīta starp elementiem proporcijā 2:1, +200 pikseļi pirmajam un +100 pikseļi otrajam. Tas faktiski darbojas šādi.

Šeit mēs vienmērīgi pārietam uz citu līdzīgu īpašumu, 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 konteineram ir platums mazāk nekā elementu pamatplatuma summa, tad šī īpašība stājas spēkā. Piemēram, konteinera platums ir 600 pikseļi, un elementu elastīgā bāze ir 300 pikseļi. Piešķiriet pirmajam elementam flex-shrink: 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. Šī atšķirība tiek sadalīta proporcijā 2:1, tāpēc no pirmā bloka mēs atņemam 200 pikseļus un no otrā bloka — 100 pikseļus. Jaunais elementu 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 izmēram, kas ir mazāks par tā pamatnes platumu.

Patiesībā šis ir ļoti vienkāršots apraksts par to, kā tas viss darbojas, lai tas būtu skaidrs vispārējs princips. Sīkāk, ja kādam ir interese, 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.

Paliek pēdējais elastīgo elementu īpašums 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.

Tas tā, man tas ir apnicis! Sniedziet piemērus!

Sakārtojām tehnisko daļu, tā izrādījās diezgan gara, bet jāiedziļinās. Tagad mēs varam pāriet uz praktisko pielietojumu.
Izstrādājot šīs "piecas patiešām noderīgās atsaucīgās izkārtojuma veidnes", mums bija jāatrisina tipiskas situācijas, ar kurām izstrādātāji saskaras diezgan bieži. Izmantojot flexbox, šo risinājumu ieviešana kļūst vienkāršāka un elastīgāka.
Ņemsim to pašu 4. izkārtojumu, jo... tajā ir visinteresantākie elementi.

Vispirms norādīsim lapas galveno platumu, līdzināsim to centrā un 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; piemale: 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 : 960 pikseļi; minimālais platums: 430 pikseļi; piemale: automātiska; elastīga palielināšana: 1; lodziņa izmēra noteikšana: apmales lodziņš; . kājene ( 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; lodziņa izmērs: apmale-box; )

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

Tagad galvenē ievietosim logotipu un izvēlni.
.logo ( fonta lielums: 0; piemale: -10 pikseļi 10 pikseļi 10 pikseļi ; ) .logo:before ( fons: #222; platums: 50px; augstums: 50px; mala: 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ā galvenē ir 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, tā eleganti pārvietosies zem logotipa.

Tālāk mēs redzam lielu ziņu vai reklāmkarogu, ir grūti pateikt, kas tas ir, bet tas 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 izkārtojums ir adaptīvs vai statisks. Tāpēc šajā ierakstā mums ir sānjosla, kurā ir ievietots attēls; stingri runājot, mēs nevaram precīzi pateikt, kāds platums mums ir nepieciešams, jo šodien mums ir liels attēls, rīt mazs, un mēs nevēlamies pārtaisīt elementu. katru reizi no nulles. Tas nozīmē, ka mums ir nepieciešams, lai sānjosla ieņemtu tai vajadzīgo vietu, un pārējā vieta tiks novirzīta saturam. 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 bāzes platumu ar flex-basis: 430px;, kā arī aizliegts izmantot bloku saraušanos elastīgi saraušanās: 0;. Ar šo manipulāciju mēs teicām, ka saturs nedrīkst būt platāks par 430 pikseļiem. Un ņemot vērā to, ka priekš .box es norādu flex-wrap: wrap; Brīdī, kad sānjosla un saturs neietilpst konteinerā. box, sānjosla automātiski nonāks zem satura. Un tas viss bez pieteikuma @media! Manuprāt, tas tiešām ir ļoti forši.

Mums atliek trīs kolonnu saturs. Šai problēmai ir vairāki risinājumi, es parādīšu vienu no tiem, citos izkārtojumos ir cita iespēja.
Izveidosim konteineru, nosauksim to par .content un konfigurēsim.
.content ( margin-bottom: 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;)

Kolonnām iedevu pamatnes platumu 200px, lai kolonnas pārāk nesašaurinās, bet labāk būtu, ja tās pēc vajadzības tiktu pārvietotas vienu zem otras.

Saskaņā ar izkārtojumu mēs nevarēsim iztikt bez @media ar saturu, tāpēc vēl nedaudz pielāgosim kolonnu darbību platumam<800px и <600px.
@multivides ekrāns un (maksimālais platums: 800 pikseļi) ( .banners ( 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; ) )

Tā ir visa burvība, kad runa ir par FlexBox izkārtojuma izveidi. Vēl viens uzdevums, kas man patika, ir 5. izkārtojumā, konkrēti tas attiecas uz satura adaptāciju.

Mēs redzam, kā darbvirsmas izšķirtspējā ziņas tiek veidotas režģī, kurā ir trīs pēc kārtas. Kad skata loga platums kļūst mazāks par 800 pikseļiem, režģis pārvēršas par kolonnu ar ziņām, kur ziņas fotoattēls tiek rindots pārmaiņus ziņas satura kreisajā un labajā pusē. Un, ja platums ir mazāks par 600 pikseļiem, ziņas fotoattēls ir pilnībā paslēpts.
.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; ) )

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

Flexbox (elastīgās kastes izkārtojuma moduļa) specifikācija ir elementu pozicionēšanas metode horizontālā vai vertikālā virzienā.

Flexbox apvieno rekvizītu kopu vecākam elastīgam konteineram un bērnu elastīgam vienumam.

Lai elements kļūtu par elastīgu konteineru, tas ir jāpiešķir displejs: flex; vai displejs: inline-flex;(attiecīgi bloks vai līnija).

Elastīgā konteinera iekšpusē ir izveidotas divas asis: galvenā un tai perpendikulāras šķērseniskās asis. Pirmkārt, elastīgie elementi ir izlīdzināti pa galveno asi un pēc tam gar šķērsvirziena asi.

Flex konteinera īpašības
flex-virziens	Nosaka galvenās ass virzienu. Iespējamās vērtības: rinda– no kreisās puses uz labo (noklusējums); rinda-reverss- no labās uz kreiso; kolonna- no augšas uz leju; kolonna-reverss- lejā augšā.
flex-wrap	Nosaka, vai konteiners ir vairāku rindu. Iespējamās vērtības: nowrap– elastīgie elementi ir sarindoti vienā rindā; ja tie neietilpst konteinerā, tie pārsniedz tā robežas (pēc noklusējuma); iesaiņojums– flex elementi ir sarindoti vairākās rindās, ja tie neiederas vienā; wrap-reverse- līdzīgs iesaiņojums, bet pārsūtīšana notiek no apakšas uz augšu.
flex-flow	Definē divus parametrus vienlaikus: flex-direction un flex-wrap. Piemēram, flex-flow: kolonnas aptinums;
attaisnot-saturs	Nosaka elementu izlīdzināšanu gar galveno asi. Iespējamās vērtības: flex-start– flex elementi tiek nospiesti līdz galvenās ass sākumam (pēc noklusējuma); flex-end– flex elementi ir nospiesti pret galvenās ass galu; centrs– elastīgie elementi ir izlīdzināti ar galvenās ass centru; telpa starp– flex elementi ir sadalīti pa galveno asi, pirmo elementu nospiežot uz ass sākumu, bet pēdējo līdz galam; telpa-ap– elastīgie elementi ir sadalīti pa galveno asi, brīvā telpa tiek sadalīta vienādi starp elementiem. Bet ir vērts atzīmēt, ka atstarpes summējas un attālums starp elementiem ir divreiz lielāks nekā attālums starp konteinera malām un visattālākajiem elementiem.
izlīdzināt vienumus	Nosaka elementu izlīdzināšanu gar šķērsasi. Iespējamās vērtības: flex-start– flex elementi tiek nospiesti līdz šķērsass sākumam (pēc noklusējuma); flex-end– flex elementi tiek nospiesti pret šķērsass galu; centrs– elastīgie elementi ir izlīdzināti ar šķērsass centru; bāzes līnija– elastīgie elementi ir izlīdzināti gar to bāzes līniju. Pamatlīnija ir iedomāta līnija, kas stiepjas gar rakstzīmju apakšējo malu, neņemot vērā pārkares, piemēram, burtu “d”, “r”, “ts”, “sch” pārkares; stiept– elastīgie elementi stiepjas, aizņemot visu pieejamo vietu gar šķērsasi. Bet, ja elementiem ir noteikts augstums, tad stiept tiks ignorēts.
līdzināt-saturs	Nosaka visu elastīgo vienumu rindu šķērsasu izlīdzināšanu. Iespējamās vērtības: flex-start– flex elementu rindas tiek nospiestas līdz šķērsass sākumam (pēc noklusējuma); flex-end– flex elementu rindas tiek piespiestas pret šķērsass galu; centrs– elastīgo elementu rindas ir izlīdzinātas ar šķērsass centru; telpa starp– lokanu elementu rindas ir sadalītas pa šķērsasi, pirmo rindu nospiežot līdz ass sākumam, bet pēdējo – līdz galam; telpa-ap– lokanu elementu rindas ir sadalītas pa šķērsasi, starp rindām vienādi sadalot brīvo vietu. Bet ir vērts atzīmēt, ka atstarpes summējas un attālums starp līnijām ir divreiz lielāks nekā attālums starp konteinera malām un visattālākajām līnijām. stiept– tiek izstieptas elastīgo elementu rindas, kas aizņem visu pieejamo vietu gar šķērsasi. Bet, ja elementiem ir noteikts augstums, tad stiept tiks ignorēts. Šis rekvizīts nedarbojas vienas līnijas elastīgajam konteineram.

Flex elementa īpašības
pasūtījums	Nosaka secību, kādā elastīgā konteinerā parādās viens elastīgs elements. Norādīts kā vesels skaitlis. Noklusējums ir 0, tad elementi seko viens otram dabiskās plūsmas secībā. Nozīme pasūtījums norāda elementa pozīcijas svaru secībā, nevis tā absolūto pozīciju.
flex-bāze	Definē elastīga vienuma bāzes izmēru pirms vietas piešķiršanas konteinerā. Var norādīt px, %, em un citās mērvienībās. Būtībā tas ir sava veida sākumpunkts, attiecībā pret kuru elements ir izstiepts vai saspiests. Noklusējuma vērtība - auto, ar elementa izmēru atkarībā no iekšējā satura lieluma.
flex-augt	Nosaka, cik daudz brīvas vietas konteinera iekšpusē elastīgais vienums pievienos tā pamata izmēram. Norāda ar veselu skaitli, kas kalpo kā proporcija. Noklusējums ir 0. Ja visi elementi elastīga augšana: 1, tad tie visi būs vienāda izmēra. Ja iestatīsiet vienu elastīgu vienumu uz 2, tā pamatizmēram tiks pievienots divreiz vairāk nekā citiem.
elastīga saraušanās	Nosaka, cik daudz, ja nav pietiekami daudz vietas, elastīgais elements saruks attiecībā pret blakus esošo elementu samazināšanos elastīgā konteinera iekšpusē. Norāda ar veselu skaitli, kas kalpo kā proporcija. Noklusējums ir 1. Ja viens flex elements ir iestatīts uz elastīga saraušanās: 2, tad no tā bāzes izmēra tiks atņemts divreiz vairāk nekā no citiem, ja konteiners ir mazāks par tajā ietverto elementu bāzes izmēru summu.
flex	Definē trīs parametrus vienlaikus: flex-grow, flex-shrink, flex-basis. Piemēram, flex: 1 1 200px;
izlīdzināt-paši	Ignorē noklusējuma līdzinājumu vai izlīdzināt vienumus, konkrētam flex elementam. Iespējamās vērtības: flex-start– flex elements ir nospiests līdz šķērsass sākumam (pēc noklusējuma); flex-end– flex elements ir nospiests pret šķērsass galu; centrs– elastīgais elements ir izlīdzināts ar šķērsass centru; bāzes līnija– elastīgais elements ir izlīdzināts ar bāzes līniju; stiept– elastīgie elementi ir izstiepti, aizņemot visu pieejamo vietu gar šķērsasi. Bet ja ir dots augums, tad stiept tiks ignorēts.

Flexbox izmantošanas iespējas praksē

1. Labā izlīdzināšana

Attīstoties interneta tehnoloģijām, tostarp HTML un CSS, izstrādātājiem nepārtraukti paveras jaunas iespējas vietņu veidošanai. Viena no problēmām joprojām ir novecojušu pārlūkprogrammu versiju klātbūtne. Tas galvenokārt attiecas uz Internet Explorer, īpaši tiem, kas izmanto Windows XP.

Interneta lapas izkārtojuma dizaineris bieži saskaras ar uzdevumu izlīdzināt CSS blokus lapā. Piemēram, visus blokus var sakārtot vienu pēc otra, horizontāli, novietot tos konteinera centrā vai apakšā utt. Ar displeja - flex īpašuma parametra parādīšanos šis uzdevums ir ievērojami vienkāršots. Šī tehnoloģija ir izstrādāta, lai izkārtotu bērnu elementus, tas ir, elementus blokā vai konteinerā. Šī izkārtojuma parametri ir vairāk nekā pietiekami.

Tātad, pirmkārt, jums ir jāizveido vecāku konteiners. Izveidosim to tā, lai skaidrības labad ap to parādītos rāmis. Konteinera CSS kods būs šāds:

Konteiners (
platums: 450 pikseļi;
augstums: 250 pikseļi;
apmale: 1px solid #000000;
displejs: flex;
flex-wrap: wrap;
align-content:stretch;
}

Galvenais īpašums ir displejs: flex. Lai bērnu elementi tiktu izvietoti vairākās rindās, pievienojiet rekvizītu - flex-wrap: wrap.

Un tikai īpašums līdzināt-saturs norāda, kā css bloki ir jānovieto un jāsaskaņo. Parametrs stieptļauj vienmērīgi izvietot blokus konteinerā. Tajā pašā laikā to augstumu var izvēlēties automātiski. Kā tas izskatās? Pievienosim css iekšējiem blokiem.

Konteiners div (
platums: 50 pikseļi;
fons: zaļš;
piemale: 5 pikseļi;
}

Mēs ar nolūku nenosakām augstumu. HTML kods izskatās šādi:

Koda rezultāts ir parādīts attēlā.

Kas notiek, ja norādāt arī bloku augstumu:

Konteiners div (
platums: 50 pikseļi;
augstums: 50 pikseļi;
fons: zaļš;
piemale: 5 pikseļi;
}

Tagad noņemsim augstumu un padarīsim bloku platumu vienādu ar 100%

Konteiners div (
platums: 100%;
fons: zaļš;
piemale: 5 pikseļi;
}

Mēs to saņemam.

Vēl viens parametrs līdzināt-saturs ir centrs un ļauj izlīdzināt visus blokus centrā.

Konteiners (
platums: 450 pikseļi;
augstums: 250 pikseļi;
apmale: 1px solid #000000;
displejs: flex;
flex-wrap: wrap;
align-content:center;
}
.container div(
platums: 50 pikseļi;
augstums: 50 pikseļi;
fons: zaļš;
piemale: 5 pikseļi;
}

Rezultāts:

Cita iespēja flex-endīpašības līdzināt-satursļaus novietot blokus konteinera apakšā.

Konteiners (
platums: 450 pikseļi;
augstums: 250 pikseļi;
apmale: 1px solid #000000;
displejs: flex;
flex-wrap: wrap;
align-content:flex-end;
}

Parametrs flex-start darīs visu tieši pretēji.

Konteiners (
platums: 450 pikseļi;
augstums: 250 pikseļi;
apmale: 1px solid #000000;
displejs: flex;
flex-wrap: wrap;
align-content:flex-start;
}

Vēl viens īpašuma parametrs līdzināt-saturs, kura rezultātus nebūs viegli izveidot, neizmantojot flex konteineru – šis telpa starp. Īpašums novieto pirmo rindiņu augšpusē un otro apakšā, radot tukšu vietu starp tām.

Daļa no CSS koda:

Konteiners (
platums: 450 pikseļi;
augstums: 250 pikseļi;
apmale: 1px solid #000000;
displejs: flex;
flex-wrap: wrap;
align-content:space-starp;
}

Rezultāts:

Īpašums telpa-ap pievieno tukšu vietu augšpusē un apakšā. Turklāt katrs no tiem ir vienāds ar pusi no tukšās vietas centrā.

Konteiners (
platums: 450 pikseļi;
augstums: 250 pikseļi;
apmale: 1px solid #000000;
displejs: flex;
flex-wrap: wrap;
align-content:space-round;
}

Tātad css īpašums līdzināt-saturs ir daudz parametru: stiept, flex-start, flex-end, centrs, atstarpe-starp, atstarpe-ap.

Kā redzams no iepriekš minētajiem piemēriem, mainot vienu parametra css align-content parametru, mēs izmantojam css bloku izlīdzināšanu, izmantojot flex tehnoloģiju, pilnīgi dažādos veidos. Šis kods nedarbojas pārlūkprogrammā Internet Explorer līdz 10. versijai ieskaitot.

Šajā rakstā mēs iepazīstināsim ar CSS Flexbox tehnoloģiju, kas paredzēta elastīgu tīmekļa lapu izkārtojumu izveidei.

CSS Flexbox mērķis

CSS Flexbox ir paredzēts elastīgu izkārtojumu izveide. Izmantojot šo tehnoloģiju, jūs varat ļoti vienkārši un elastīgi sakārtot elementus konteinerā, sadalīt starp tiem pieejamo vietu un vienā vai otrā veidā tos izlīdzināt, pat ja tiem nav konkrētu izmēru.

CSS Flexbox ļauj izveidot atsaucīgu dizainu daudz vienkāršāk nekā izmantojot Float un pozicionēšanu.

Flexbox var izmantot gan visas lapas, gan tās atsevišķu bloku CSS iezīmēšanai.

Pārlūkprogrammas atbalsts CSS Flexbox

CSS Flexbox atbalsta visas pašlaik izmantotās mūsdienu pārlūkprogrammas (izmantojot prefiksus: IE10+, Edge12+, Firefox 2+, Chrome 4+, Safari 3.1+, Opera 12.1+, iOS Safari 3.2, Opera mini, Android 2.1+, Blackberry 7+) .

CSS Flexbox pamati

CSS marķējuma izveide, izmantojot Flexbox, sākas, iestatot vajadzīgā HTML elementa CSS attēlojuma rekvizītu uz flex vai flex-inline .

Pēc tam šis elements kļūst par elastīgu konteineru un visu to tiešā veidā bērnu elementi ir elastīgi elementi. Turklāt, runājot par flexbox, mēs domājam tikai elementu ar display:flex vai display:flex-inline un visus elementus. tieši atrodas tajā. Tādējādi programmā CSS Flexbox ir tikai divu veidu elementi: elastīgais konteiners un elastīgais elements.

Prefiksa un maksimālā platuma rekvizīti ir pievienoti CSS, lai atbalstītu izkārtojumu lielākajā daļā pārlūkprogrammu.

Lai bloku “pārvērstu” elastīgā konteinerā, izmantojiet rindu klasi. .col__article un .col__aside flex elementu platuma iestatīšana flex konteinerā tiek veikta, izmantojot flex CSS rekvizītu.

Piemēram, atzīmēsim citu kājeni, izmantojot flexbox, un izveidosim bloku, kas sastāv no trim elementiem elementā .col__article (viena elementa minimālais platums ir 300 pikseļi). Kājenē ievietosim četrus blokus (minimālais viena bloka platums ir 200 pikseļi).

Rekvizīts pasūtījums kontrolē secību, kādā pakārtotie elementi parādās elastīgā konteinerā. Pēc noklusējuma tie ir sakārtoti tādā secībā, kādā tie sākotnēji tika pievienoti elastīgajam konteineram.

Vērtības

.flex-item ( pasūtījums:<целое число>; }

Flex vienumus var pārkārtot, izmantojot šo vienkāršo rekvizītu, nemainot HTML kodu.

Noklusējuma vērtība: 0.

flex-augt

Šis rekvizīts norāda pieauguma koeficientu, kas nosaka, cik daudz elastīgais vienums pieaugs salīdzinājumā ar citiem elastīgajiem vienumiem elastīgajā konteinerā, piešķirot pozitīvu brīvo vietu.

Vērtības

.flex-item (flex-grow:<число>; }

Ja visiem elastīgajiem vienumiem ir vienāda elastības pieauguma vērtība, visiem vienumiem konteinerā būs vienāds izmērs.

Otrais elastīgais vienums aizņem vairāk vietas salīdzinājumā ar pārējo elastīgo vienumu izmēru.

Noklusējuma vērtība: 0.

elastīga saraušanās

flex-shrink norāda saraušanās koeficientu, kas nosaka, cik daudz elastīgais vienums saruks attiecībā pret citiem elastīgajiem elementiem elastīgajā konteinerā, sadalot negatīvo brīvo vietu.

Vērtības

.flex-item ( flex-shrink:<число>; }

Pēc noklusējuma visus elastīgos vienumus var samazināt, taču, ja mēs iestatām elastīgās saraušanās vērtību uz nulli (bez saraušanās), vienumi saglabā savu sākotnējo izmēru.

Noklusējuma vērtība: 1.

Negatīvie skaitļi nav atļauti.

flex-bāze

Šim rekvizītam ir tādas pašas vērtības kā platuma un augstuma rekvizītiem, un tas norāda elastīgā elementa sākotnējo bāzes izmēru, pirms brīvā vieta tiek piešķirta atbilstoši attiecībām.

Vērtības

.flex-item ( flex-basis: auto |<ширина>; }

flex-basis ir norādīts ceturtajam elastīgajam vienumam un nosaka tā sākotnējo izmēru.

Noklusējuma vērtība:auto.

flex

Šis rekvizīts ir saīsinājums attiecībā uz flex-grow, flex-shrink un flex-basis īpašībām. Citu vērtību starpā varat iestatīt arī automātisku (1 1 automātiski) un nevienu (0 0 automātiski).

Vērtības

.flex-item (flex: nav | auto | [ ? || ]; }

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

W3C iesaka izmantot flex shorthand rekvizītu, nevis atsevišķus rekvizītus, jo flex pareizi atiestata visus nenoteiktos komponentus parastai lietošanai.

izlīdzināt-paši

Rekvizīts align-self ļauj ignorēt noklusējuma līdzinājumu (vai vērtību, kas norādīta, izmantojot align-items ) atsevišķiem elastīgiem vienumiem. Lai izprastu pieejamās vērtības, skatiet elastīgā konteinera līdzināšanas vienumu aprakstu.

Vērtības

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

Trešajam un ceturtajam elastīgajam elementam līdzinājums ir no jauna definēts, izmantojot īpašību align-self.