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

justify-content: space-between Explained (CSS)

Vizuálně sestavte rozvržení flexboxu CSS: flex-direction, justify-content, align-items, flex-wrap and gap na kontejneru, plus flex-grow, flex-shrink a flex-base na dítě, to vše s živým náhledem a kopírovatelným CSS.

Zpracování... 0%

Výsledek

Tato stránka otevře generátor s justify-content nastaveným na mezeru mezi: první pole je v jedné rovině s počáteční hranou kontejneru, poslední pole je v rovině s jeho koncovým okrajem a zbývající prostor je rozdělen do stejných mezer mezi boxy uprostřed – nikdy před prvním nebo po posledním.

To je detail, který si lidé pletou. space-around dává každému rámečku stejný okraj na obou jeho stranách, takže mezery mezi rámečky jsou dvakrát tak široké než mezery na dvou vnějších okrajích (každá hrana má pouze jeden okraj, ne dva). prostor-rovnoměrně jde dále a dělá každou mezeru stejně velkou, včetně dvou vnějších hran – jediné ze tří, kde mezera vypadá dokonale jednotně po celé délce.

Přepněte rozevírací seznam justify-content mezi třemi níže uvedenými hodnotami a sledujte, jak se stejné tři rámečky přeskupují – je to nejrychlejší způsob, jak vidět rozdíl, místo abyste si jej zapamatovali. Zkopírujte CSS podle toho, co odpovídá mezerám, které skutečně chcete.

🛡️
Spuštěno v prohlížeči

Vaše soubory a vstupy nikdy neopustí toto zařízení. Zpracování probíhá zcela offline. 100% bezpečné.

Přijaté formáty a pravidla

  • Ovládací prvky kontejneru: flex-direction, justify-content, align-items, flex-wrap a zadávání mezery v pixelech, aplikované živě na náhled.
  • Ve výchozím nastavení tři barevně odlišené dětské boxy (přidat až osm, odebrat až dva), každý s vlastními poli flex-grow, flex-shrink a flex-base.
  • Kopírovatelný blok CSS s pravidlem .flex-container plus jedním pravidlem .flex-item-N na dítě, které má jiné než výchozí vlastnosti flex.

Hlavní výhody

✓ Každý ovládací prvek kontejneru a každý dětský flex-grow, flex-shrink a flex-base aktualizuje naživo tři očíslovaná náhledová pole, takže přesně uvidíte, co vaše pravidla flexboxu dělají, než se dotknete šablony stylů.
✓ Generátor vytiskne pouze podřízená pravidla, která se ve skutečnosti liší od výchozích hodnot CSS, takže zkopírovaný kód zůstane krátký a čitelný místo toho, aby na každém poli znovu uváděl flex-grow: 0.
✓ Přednastavené stránky řeší rozvržení, která lidé hledají podle jména: vycentrování divu, logo-levé odkazy-pravá navigační lišta a flexibilní sloupce stejné šířky – otevřete jeden a nástroj je již nakonfigurován.

Případy použití

  • • Získejte přesný CSS pro vycentrování prvku div vodorovně i svisle tím, že budete sledovat, jak položky justify-content a align-items fungují na polích živého náhledu.
  • • Vytvořte rozložení navigační lišty vlevo s logem, vpravo s odkazy s mezerou mezi položkami a položkami zarovnání: na střed a poté zkopírujte kontejner CSS přímo do komponenty záhlaví.
  • • Porovnejte prostor mezi, prostorem a prostorem rovnoměrně vedle sebe na stejných třech polích, místo abyste hádali, která z nich odpovídá požadovanému rozestupu.