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

attaisnot-saturs: atstarpe starp paskaidrojumiem (CSS)

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 pamatojuma saturu, kas iestatīts uz atstarpi starp: pirmā kaste atrodas vienā līmenī ar konteinera sākuma malu, pēdējā kaste atrodas vienā līmenī ar tā gala malu, un atlikušā vieta ir sadalīta vienādās atstarpēs starp kastēm vidū — nekad pirms pirmās vai pēc pēdējās.

Tā ir detaļa, ko cilvēki sajauc. atstarpe piešķir katrai kastītei vienādu rezervi abās tās malās, tāpēc atstarpes starp kastēm ir divreiz platākas nekā atstarpes abās ārējās malās (katrai malai tiek piešķirta tikai viena kastes mala, nevis divas). telpa vienmērīgi iet tālāk un padara katru atstarpi vienāda izmēra, ieskaitot abas ārējās malas — vienīgā no trim, kur atstatums izskatās pilnīgi vienāds visā garumā.

Pārslēdziet attaisnojuma satura nolaižamo izvēlni starp trim tālāk norādītajām vērtībām un skatieties to pašu trīs lodziņu pārkārtošanos — tas ir ātrākais veids, kā redzēt atšķirību, nevis to iegaumēt. Kopējiet CSS savienojumu, kas atbilst faktiski vēlamajai atstarpei.

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