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

CSS Flexbox navigācijas josla — logotips pa kreisi, saites pa labi

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 flexbox ģenerators, kas sākotnēji iestatīts klasiskajam navigācijas joslas izkārtojumam: attaisnojums saturs ir iestatīts uz atstarpi-starp un līdzinājums - vienumi ir iestatīti centrā. Pirmajā lodziņā ievietojiet logotipu un pēdējā lodziņā navigācijas saišu rindu (vai sadaliet saites pa vidējo lodziņu), un flexbox konteiners nospiež tos joslas pretējos galos, vienlaikus saglabājot visus vienumus vienā vertikālā centrā neatkarīgi no logotipa vai saites teksta augstuma.

Atstarpe starp ir tas, kas padara šo darbību: pirmais bērns tiek piesprausts sākuma malai un pēdējais bērns beigu malā, pēc tam vienmērīgi izkliedē atlikušos bērnus — tieši kreisās puses logotips, labās saites veido gandrīz visas izmantotās vietnes galvenes. align-items: centrs pēc tam atrisina vertikālo izlīdzināšanu, kas iepriekš bija nepieciešama līnijas augstuma uzlaušanai vai tabulas šūnu displeja trikiem.

Pielāgojiet bērnu skaitu, lai tas atbilstu jūsu īstajai navigācijas joslai — divi lodziņi tukšai logotipa un CTA joslai, vairāk logotipam un vairākas saites, un skatieties, kā izkārtojums tiek pielāgots tiešraidē. Kopējiet CSS bloku, tiklīdz tas atbilst jūsu galvenei, vai atveriet atstarpi starp sākotnējiem iestatījumiem, ja vēlaties skatīt šo vienu īpašumu salīdzinājumā ar tā tuvajiem radiniekiem.

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