⭐ 0
🔍
Text Obrázok PDF a Dokumenty Audio Hudba Elektronika Čas Užitočné programy Validátory Ezoterika Hry

justify-content: space-between Explained (CSS)

Vizuálne vytvorte rozloženie CSS flexbox: ohybné smerovanie, zarovnanie obsahu, zarovnanie položiek, ohybný obal a medzera na kontajneri, plus flex-grow, flex-shrink a flex-base na dieťa, to všetko so živým náhľadom a kopírovateľným CSS.

Spracovanie... 0%

Výsledok

Táto stránka otvorí generátor s justify-content nastaveným na medzeru medzi: prvé pole je v jednej rovine so začiatočným okrajom kontajnera, posledné pole je v jednej rovine s jeho koncovým okrajom a zvyšný priestor je rozdelený do rovnakých medzier medzi políčkami v strede – nikdy pred prvým alebo po poslednom.

To je detail, ktorý si ľudia pletú. space-around dáva každému rámčeku rovnaký okraj na oboch jeho stranách, takže medzery medzi rámčekmi sú dvakrát tak široké ako medzery na dvoch vonkajších okrajoch (každá hrana má iba jeden okraj, nie dva). priestor-rovnomerne ide ďalej a robí každú medzeru rovnako veľkú, vrátane dvoch vonkajších hrán – jedinej z troch, kde medzery vyzerajú dokonale rovnomerne po celej dĺžke.

Prepnite rozbaľovaciu ponuku justify-content medzi tromi hodnotami nižšie a sledujte, ako sa tie isté tri polia preusporiadajú – je to najrýchlejší spôsob, ako vidieť rozdiel namiesto toho, aby ste si ho zapamätali. Skopírujte CSS podľa toho, čo zodpovedá medzerám, ktoré skutočne chcete.

🛡️
Spustené v prehliadači

Vaše súbory a vstupy nikdy neopustia toto zariadenie. Spracovanie prebieha úplne offline. 100% bezpečné.

Prijaté formáty a pravidlá

  • Ovládacie prvky kontajnera: flex-direction, justify-content, align-items, flex-wrap a zadávanie medzier v pixeloch, aplikované naživo na náhľad.
  • Štandardne tri farebne označené detské boxy (pridajte až osem, odstráňte dva), každá má svoje vlastné polia flex-grow, flex-shrink a flex-base.
  • Kopírovateľný blok CSS s pravidlom .flex-container plus jedno pravidlo .flex-item-N na dieťa, ktoré má iné ako predvolené vlastnosti flex.

Hlavné výhody

✓ Každý ovládací prvok kontajnera a každý detský flex-grow, flex-shrink a flex-base aktualizuje tri očíslované ukážkové boxy naživo, takže presne uvidíte, čo robia vaše pravidlá flexboxu predtým, než sa dotknete šablóny so štýlmi.
✓ Generátor vytlačí iba podriadené pravidlá, ktoré sa v skutočnosti líšia od predvolených nastavení CSS, takže skopírovaný kód zostane krátky a čitateľný namiesto toho, aby na každom poli znova uvádzal flex-grow: 0.
✓ Prednastavené stránky riešia rozloženia, ktoré ľudia hľadajú podľa názvu: vycentrovanie divu, logo-ľavé odkazy-pravá navigačná lišta a flexibilné stĺpce rovnakej šírky – otvorte jeden a nástroj je už nakonfigurovaný.

Prípady použitia

  • • Získajte presný CSS na vycentrovanie divu horizontálne aj vertikálne sledovaním fungovania justify-content a align-items na živých náhľadových poliach.
  • • Vytvorte rozloženie navigačného panela s logom vľavo, odkazy vpravo s medzerou medzi položkami a položkami zarovnania: na stred a potom skopírujte kontajner CSS priamo do komponentu hlavičky.
  • • Porovnajte priestor medzi, priestor okolo a priestor rovnomerne vedľa seba na rovnakých troch poliach namiesto toho, aby ste hádali, ktoré z nich zodpovedá požadovanému rozstupu.