Generátor Flexbox

Experimentujte se směrem ohybu, zalomením, zarovnáním a zarovnáním. Sledujte aktualizaci rozvržení položek živě a poté zkopírujte kontejner CSS.

Flexbox Generator

Live
1
2
3
4
5

CSS output

display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: 12px;

Key capabilities

  • Experimentujte s ohybovým směrem, zalomením, zarovnáním a zarovnáním – podívejte se na aktualizaci rozvržení živě.
  • Běží ve vašem prohlížeči
  • Zdarma k použití

Jak používat

  1. Nastavte směr ohybu a zabalte.
  2. Upravte zarovnání obsahu a zarovnání položek.
  3. Zkopírujte Flexbox CSS.

How this tool works

  1. Nastavte směr ohybu a zabalte.
  2. Upravte zarovnání obsahu a zarovnání položek.
  3. Zkopírujte Flexbox CSS.

Recommended settings

  • Nejprve použijte výchozí možnosti a v případě potřeby upravte

Supported formats

Text / on-page input

File size and limits

  • Velmi složité vícevrstvé náhledy se mohou na starších telefonech zdát pomalejší.

Privacy

Generátory barev a CSS běží výhradně ve vašem prohlížeči. Náhledy a konverze nikdy nenahrávají vaše styly.

Common use cases

  • Použijte Flexbox Generator, kdykoli budete potřebovat: Experimentujte se směrem ohybu, zalomením, zarovnáním a zarovnáním – podívejte se na aktualizaci rozvržení živě.

Troubleshooting

Náhled po vložení vypadá jinak

Zkontrolujte, zda na stránce nejsou konkurenční CSS (resety, zděděné barvy). Vygenerované pravidlo nejprve zkopírujte do izolované šablony stylů.

Časté dotazy

Nahrává to můj CSS?

Ne. Generátory a konvertory běží ve vašem prohlížeči s živým náhledem.

Potřebuji účet?

Ne. Otevřete nástroj, upravte ovládací prvky a zkopírujte CSS.

Související nástroje