⭐ 0
🔍
Teksts Attēls PDF un dokumenti Audio Mūzika Elektronika Laiks Komunālie pakalpojumi Validatori Ezotērisks Spēles

Kā centrēt dalījumu CSS (Flexbox)

Vizuāli izveidojiet CSS elastīgā lodziņa izkārtojumu: pielāgojiet virzienu, pamatojiet saturu, izlīdziniet vienumus, pielāgojiet iesaiņojumu un atstarpi konteinerā, kā arī katram bērnam elastīgu augšanu, elastīgu saraušanos un elastīgu pamatu — tas viss ar reāllaika priekšskatījumu un kopējamu CSS.

Notiek apstrāde... 0%

Rezultāts

Šeit ir tiešā atbilde uz visbiežāk uzdoto jautājumu CSS: lai centrētu div, ievietojiet displeju: flex, justify-content: centrā un līdziniet vienumus: centrā tā vecākajā. Tas arī viss — trīs deklarācijas uz trauka, un bērns sēž tajā ideāli centrēts gan horizontāli, gan vertikāli, jebkurā izmērā. Šajā lapā tiek atvērts ģenerators ar tieši tādu kombināciju, kas jau ir lietota, tāpēc tālāk esošajā priekšskatījumā ir redzams, ka tas pašlaik darbojas trīs numurētos lodziņos.

Pirms flexbox, centrējot div, bija nepieciešami uzlauzumi: piemale: 0 automātiski centrēts tikai horizontāli un darbojas tikai fiksēta platuma blokā; vertikālā centrēšana nozīmēja pozīciju: absolūts ar negatīvām piemalēm vai transformācijas triks, abi trausli brīdī, kad saturs maina izmēru. Justify-content apstrādā galveno asi un align-itemes apstrādā šķērsasi — kopā tie ir centrēti abos virzienos neatkarīgi no bērna garuma vai platuma, tieši tāpēc šis pāris kļuva par standarta atbildi.

Velciet jebkuru tālāk esošo vadīklu un skatieties, kā trīs priekšskatījuma lodziņi paliek centrā, kad konteiners maina formu, vai pievienojiet starp tiem atstarpi. Kad tas izskatās pareizi, kopējiet apakšā esošo CSS bloku tieši savā stila lapā — tas darbojas vienādi katrā modernajā pārlūkprogrammā, nav nepieciešama bibliotēka.

🛡️
Izpildīts pārlūkprogrammā

Jūsu faili un ievades dati nekad netiek atstāti no šīs ierīces. Apstrāde notiek pilnīgi bezsaistē. 100% drošs.

Pieņemtie formāti un noteikumi

  • Konteinera vadīklas: elastīgais virziens, satura pamatojums, vienumu līdzināšana, flex-wrap un atstarpes ievade pikseļos, tiek lietota tiešraidē priekšskatījumam.
  • Trīs ar krāsu kodēti bērnu lodziņi pēc noklusējuma (pievienojiet līdz astoņiem, noņemiet līdz diviem), katrs ar saviem elastīgās augšanas, elastīgās saraušanās un elastīgās bāzes laukiem.
  • Kopējams CSS bloks ar .flex-container kārtulu, kā arī vienu .flex-item-N kārtulu katram bērnam, kuram ir ne-noklusējuma elastīgās īpašības.

Galvenās priekšrocības

✓ Katra konteinera vadīkla un katra bērna elastīgās augšanas, elastīgās saraušanās un elastīgā pamata tiešraidē tiek atjaunināti trīs numurēti priekšskatījuma lodziņi, lai jūs precīzi redzētu, ko dara jūsu elastīgās kārbas kārtulas, pirms pieskaraties stila lapai.
✓ Ģenerators drukā tikai pakārtotās kārtulas, kas faktiski atšķiras no CSS noklusējuma iestatījumiem, tāpēc nokopētais kods paliek īss un lasāms, tā vietā, lai katrā lodziņā atkārtoti norādītu flex-grow: 0.
✓ Iepriekš iestatītās lapas atrisina izkārtojumus, ko cilvēki meklē pēc nosaukuma: centrēšana div, logotips ar kreiso saišu labajā navigācijas joslu un vienāda platuma elastīgas kolonnas — atveriet vienu, un rīks jau ir konfigurēts.

Lietošanas gadījumi

  • • Iegūstiet precīzu CSS, lai centrētu div vienumu gan horizontāli, gan vertikāli, skatoties, kā tiešā priekšskatījuma lodziņās darbojas satura attaisnošana un vienumu līdzināšana.
  • • Izveidojiet navigācijas joslas izkārtojumu ar logotipu pa kreisi un saitēm pa labi ar atstarpi starp vienumiem un līdzinājumu: centrā, pēc tam kopējiet konteinera CSS tieši savā galvenes komponentā.
  • • Salīdziniet atstarpi starp, atstarpi un vienmērīgu atstarpi blakus uz tiem pašiem trim lodziņiem, nevis uzminēt, kurš no tiem atbilst vajadzīgajam atstarpei.