CSS Flexbox vizuālais ceļvedis

Kas ir CSS Flexbox?

Saskaņā ar MDN tīmekļa dokumentiem:

“CSS Flexible Box Layout ir CSS modulis, kas nosaka lietotāja saskarnes dizainam optimizētu CSS kastes modeli un vienumu izkārtojumu vienā dimensijā. Elastīgā izkārtojuma modelī elastīgā konteinera bērnus var izlikt jebkurā virzienā, un viņi var "saliekt" savus izmērus, vai nu augot, lai aizpildītu neizmantoto vietu, vai sarūkot, lai izvairītos no vecāku pārpildīšanas. Gan ar horizontālo, gan vertikālo bērnu novietojumu var viegli manipulēt. ”

Tātad, apkopojot, tas ir izkārtojuma modulis, kas atvieglo lietas izlīdzināšanu un sadalīšanu telpā starp konteinera priekšmetiem.

Apskatīsim dažus piemērus, ko var paveikt, izmantojot vismaz 1–2 kodu rindiņas, izmantojot CSS flexbox:

Horizontālās izlīdzināšanas izkārtojums:

Vertikālās izlīdzināšanas izkārtojums:

Tas ir diezgan forši, ņemot vērā, ka, lai manipulētu ar izkārtojumu katra konteinera iekšienē, vajadzēja tikai vienu vai divas CSS rindas.

Pamati

Flexbox īpašības var iedalīt 2 galvenajos veidos:

  1. Konteinera īpašības (elastīgs virziens, elastīgs ietīšana, satura attaisnošana, vienumu izlīdzināšana, satura izlīdzināšana)
  2. Elastīgā elementa īpašības (kārtība, elastība, elastība-augšana, elastīga saraušanās, izlīdzināšana)

Displejs: elastīgs

Pirmais īpašums nav specifisks flexbox. Šis īpašums ir display, ko mēs iestatīta vērtība: flex. Tas ir iestatīts uz konteinera, kurā ir vienumi, ar kuriem vēlamies manipulēt.

Pievienosim dažus attēlus, lai saprastu, kā tas darbojas:

Ja mums sākotnēji ir konteiners, divtā iekšpusē ir 3 kastes ( ). Šādi viņi izskatīsies:

Tagad pievienosim flexkonteineram:

Tikai vienā CSS rindā izkārtojums ir mainīts no vertikālā virziena uz horizontālu.

Svarīgas terminoloģijas ap Flexbox

Šīs terminoloģijas tiks izmantotas visā šajā rokasgrāmatā.

  1. Elastīgais konteiners: tas attiecas uz konteineru, kas tam ir display: flex;iestatīts.
  2. Flex elements: Tie ir atsevišķi bērni Flex konteinera iekšpusē
  3. Galvenā ass : pēc noklusējuma ir iestatīta no kreisās uz labo.
  4. Šķērsass : Pēc noklusējuma ir iestatīts no augšas uz leju.

Tiklīdz tas display: flexir uzlikts uz konteinera, šīs iedomātās asis strādās kopā, lai noteiktu, kā elastīgajiem priekšmetiem, kas atrodas elastīgā konteinera iekšpusē, vajadzētu pārvietoties un izturēties. Šīs divas asis maina virzienus ikreiz, kad mēs mainām noteiktas flexbox īpašības, kuras tiek apspriestas tālāk.

Elastīgs virziens

Šis īpašums nosaka iedomāto asu virzienu. Savukārt asis nosaka, kā būtu jāievieto priekšmeti elastīgajā konteinerā. Tam nepieciešamas šādas 4 vērtības:

  1. rowir galvenās ass noklusējuma vērtība, kas norāda no kreisās uz labo pusi. Šķērsass paliek no augšas uz leju.
  2. row-reversemaina rindas virzienu no labās uz kreiso. Arī šoreiz šķērsass netiek ietekmēts.

3. columnmaina galveno asi no horizontālās ass uz vertikālo asi. Tas nozīmē, ka galvenā ass tagad plūst no augšas uz leju, savukārt šķērsass tagad plūst no kreisās uz labo.

4. column-reverseir līdzīgs kolonnas vērtībai ar vienīgo atšķirību, ka galvenā ass tagad plūst no apakšas uz augšu.

Flex-wrap

Elastīgais konteiners pēc noklusējuma neļauj priekšmetiem aizņemt vairākas rindas pēc kārtas. Tā vietā visi vienumi tiks salikti, lai ietilptu vienā rindā, tas ir, tas neļauj ietīt vairākās rindās.

  1. flex-wrap: no-wrap ir noklusējums.

2 flex-wrap: wrap.. Mainot šo rekvizītu uz wrap, tagad mēs varam nodrošināt, ka katrs elastīgais elements saglabās savus izmērus. Ja tie nevar ievietot vienā līnijā, tie ietīsies nākamajā rindā vai kolonnā atkarībā no elastības virziena.

Ja elastības virziens ir iestatīts uz rindu atpakaļgaitā, vienumi pāriet uz nākamo rindu, sākot no labās uz kreiso pusi.

3. wrap-reverseNo otras puses noslēgs nākamo rindu flex priekšmetus virs sākotnējā vienu, tomēr, no kreisās uz labo pusi.

Pamatot saturu

Šis īpašums tiek izmantots ļoti bieži. Tās mērķis ir sadalīt vietu starp lokaniem priekšmetiem elastīgā konteinerā gar galveno asi . Tā noklusējuma vērtība ir iestatīta uz flex-start.

Atcerieties: ja elastības virziens ir iestatīts uz kolonnu, galvenā ass tagad plūst no augšas uz leju. Tas nozīmē, ka attaisnojošais saturs tagad preces izplata vertikāli.

Izlīdzināt vienumus

Šis īpašums ir tikpat populārs kā justify-contentun tiek regulāri izmantots kopā ar flexbox. Tas rīkojas tāpat kā justify-contentar vienīgo atšķirību, ka tas darbojas gar šķērssiju . Noklusējuma vērtība align-itemsir stretch.

Atcerieties: ja elastības virziens ir iestatīts uz kolonnu, šķērsass tagad plūst no kreisās uz labo pusi. Tas nozīmē, ka izlīdzināšanas vienumi tagad sadalīs vienumus horizontāli.

Izlīdzināt saturu

Šis īpašums ir līdzīgs un to var viegli sajaukt align-items. Šī rekvizīta mērķis ir noteikt, kā atstarpei starp elastīgā konteinera rindām jābūt sadalītai gar šķērssiju .

Kamēr align-itemsmērķis ir atstarpe starp elastīgajiem vienumiem, align-contentmērķē rindas starp vienumiem. Noklusējuma vērtība align-contentir stretch.

Elementa rekvizīti

Laiks pāriet uz otrā veida flexbox īpašībām, kas ļauj mums atlasīt atsevišķus priekšmetus flex konteinera iekšpusē.

Izlīdzināt sevi

Šis rekvizīts ļauj izlīdzināt atsevišķu elastīgo elementu gar šķērssiju. Tas ignorē konteineram iestatīto izlīdzināšanu align-items.

Tam ir arī tādas pašas īpašības kā align-items(skat. Iepriekš).

Pasūtījums

Šis īpašums ļauj mums pārkārtot atsevišķu lokšņu pozīcijas to lokanajā konteinerā. Pēc noklusējuma visiem vienumiem ir piešķirta vērtība 0.

Piešķirot orderatsevišķām vienībām zemāku (-ve) vai lielāku (+ ve) vērtību , konkrētais vienums tiks pārvietots, lai to pozicionētu atbilstoši to vērtībām.

Kārtība notiks pēc visloģiskākās vienošanās, tas ir -ve, 0, + ve. Zemākais skaitlis tiks pa kreisi un lielākais pa labi, pieņemot, ka viss pārējais ir iestatīts kā noklusējums. Ja ir vienumi, kuriem nav piešķirta jauna vērtība, tie paliek kā 0.

Piezīme. Iepriekš piemēra 1., 2., 5. un 6. lodziņā joprojām ir noklusējuma vērtība 0. Lai precizētu, iepriekš minētajām sešām rūtiņām ir šādas vērtības: -1, 0, 0, 0, 0, 1 .

Ja vēlaties ievietot lodziņu 4. lodziņa priekšā, jums jāiestata mērķa lodziņš secībā no 2 vai zemāk.

Flex-bāzes, Flex-grow un Flex-Shrink

Līdz šim visi elastīgie izstrādājumi bija vienāda lieluma. Apskatīsim, kā mēs varam panākt, lai konkrēts elastīgais priekšmets aizņemtu vairāk vietas elastīgā konteinera iekšpusē, salīdzinot ar citiem priekšmetiem tā paša konteinera iekšpusē.

Elastīgi

Šis rekvizīts norāda elastīgā priekšmeta ideālo izmēru, pirms tas tiek ievietots elastīgā traukā. Strādājot ar rindām, tas darbojas līdzīgi platumam. Strādājot ar kolonnām, tas darbojas kā augstums. Tātad, ja mēs strādājam ar kolonnām un kādam priekšmetam ir piešķirts gan augstums, gan elastības princips, prioritāte būs elastīgajai bāzei, jo tas ir ideālais augstums, ko elastīgais elements aizņems, ja ir pietiekami daudz vietas.

Tas nozīmē, ka, ja priekšmetiem nav pietiekami daudz vietas un nav piešķirts augstums vai platums. Vienumi ņems vērā konteinerā pieejamo maksimālo augstumu vai maksimālo platumu.

Elastīgi augt

Šis rekvizīts nosaka, kā elastīgie priekšmeti var augt, lai aizpildītu neizmantoto vietu elastīgā konteinerā.

Ja mēs flex-grow: 1visiem lodziņiem piešķiram a , tie visi vienmērīgi aizņem atlikušo vietu, kas ir arī tā noklusējuma vērtība. Skaitlis var būt jebkurš, ja vien tie visi ir vienādi.

Ja mēs piešķiram flex-grow: 1vienam priekšmetam, bet otram - a flex-grow: 2, tad otrajam priekšmetam būs jāizmanto divas reizes vairāk neizmantotas vietas nekā pirmajam.

Tas attiecas gan uz rindām, gan uz kolonnām.

Elastīgi sarukt

Šis rekvizīts nosaka, kā elastīgie priekšmeti var sarukt, kad elastīgajā konteinerā nav pietiekami daudz vietas.

flex-shrink: 1ir noklusējuma vērtība, kas nozīmē, ka visi vienumi pēc noklusējuma samazināsies ar tādu pašu ātrumu.

Piezīme:flex-shrink: 0; nozīmē, ka šim konkrētajam priekšmetam nekad nevajadzētu samazināties.

flex-shrink: 2; nozīmē, ka šim konkrētajam priekšmetam vajadzētu sarukt ātrāk nekā citiem flex-shrink: 1;

Elastīgi

Šī ir stenogrāfijas versija elastīgai augšanai, elastīgai saraušanai un elastīgai bāzei šajā konkrētajā secībā.

Ja jums jāizmanto visi trīs iepriekš minētie, jūs varat vienkārši izmantot kaut ko līdzīgu šim:

flex: 0 2 200px; kur 0 attiecas uz elastīgo augšanu, 2 attiecas uz elastīgo saraušanos un 200 pikseļi attiecīgi uz elastīgo bāzi.

Apsveicam!

Tieši tā! Šīs ir galvenās sastāvdaļas, lai kļūtu par elastīgu meistaru. Un tāpat kā katru citu lietu dzīvē un kodeksā, arī prakse padara to perfektu. Es ļoti iesaku šo rokasgrāmatu izmantot praksē, lai gūtu praktisku izpratni. Viens piemērs varētu būt sākt ar kaut ko mazu, piemēram, vienkāršu navigācijas joslu.

Jūs varat arī pārbaudīt saiti uz manu Codepen kolekciju uz flex-box, kuru es izmantoju, lai izveidotu šīs flexboxes iepriekš redzamajos attēlos, un pielāgojiet tos, lai redzētu, kā tās mainās.

Paldies, ka izlasījāt šo rokasgrāmatu flexbox. Es ceru, ka tas bija noderīgs un informatīvs. Ja jums ir kādi jautājumi vai vēlaties dalīties pārdomās par šo tēmu, lūdzu, nekautrējieties sazināties ar komentāru sadaļu vai pa e-pastu [email protected]

Ja jums šķita, ka šī lasāmviela ir vērtīga, lūdzu, parādiet šim rakstam zināmu mīlestību, atstājot aiz muguras dažus plaukšķinājumus, lai arī citi izstrādātāji to varētu atrast.

ZeeshaanMaudar - pārskats

Jautrības kods Pārmaiņu kods Sociāla labuma kods - ZeeshaanMaudar github.com