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

Vienāda platuma Flexbox kolonnas — CSS ģenerators

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

Šajā lapā tiek atvērts ģenerators ar flex-grow: 1 jau ir iestatīts visos trīs priekšskatījuma lodziņās. Skatieties tos: tā vietā, lai saruktu, lai atbilstu to saturam, katrs lodziņš pieprasa identisku atlikušās vietas daļu rindā, kas ir visa recepte vienāda platuma elastīgām kolonnām — bez procentuālā platuma, bez calc(), nav fiksētu pikseļu matemātikas, ko sinhronizēt.

flex-grow: 1 liek bērnam augt, un, iestatot to katram bērnam rindā, viņi visi aug par vienādu daudzumu, tāpēc tie ir vienādi platumā neatkarīgi no tā, cik daudz ir vai kāds saturs tajos atrodas. Pievienojiet vai noņemiet lodziņu ar tālāk esošajām vadīklām, un pārējās kolonnas nekavējoties tiek sadalītas, lai tās paliktu vienādas — mainiet pārlūkprogrammas loga izmērus pār šo izkārtojumu ražošanā, un tas darbojas tāpat.

Šis ir modelis aiz vienāda augstuma karšu režģiem, cenu tabulas kolonnām un vienmērīgi sadalītām kājenes sadaļām. Piešķiriet vienai kolonnai vairāk vietas, paceļot tās elastīgo augšanu virs citām, vai kopējiet zemāk esošo CSS bloku tieši tā, kā tas ir ģenerēts, lai iegūtu tīru vienādu sadalījumu.

🛡️
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.