Vytvořte dokonalé Rozvržení Flexbox

Vizualizujte, upravujte a generujte kód CSS flexboxů s naším intuitivním rozhraním drag-and-drop.

Vlastnosti kontejneru Vlastnosti

Vlastnosti

3 items

Preview

Item 1
Item 2
Item 3
.flex-container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; }  .flex-item { /* Default item styles */ flex: 0 1 auto; order: 0; align-self: auto; }
Vygenerovaný CSS kód

Oblíbené předvolby

se centrují vodorovně i svisle

Content

Perfektní pro centrování loga, tlačítka nebo jakéhokoli prvku jak vodorovně, tak svisle.

Stejné mezery

Item 1
Item 2
Item 3

Vytvoří stejné mezery mezi elementy s mezerami mezi nebo kolem dokola.

Svislá nabídka

Home
About
Contact

: Vytvořte svislou navigační nabídku s konzistentními mezerami a zarovnáním.

Responzivní mřížka

Box 1
Box 2
Box 3
Box 4
Box 5

: Vytvořte responzivní rozvržení mřížky, které zalomí položky na základě dostupného místa.

Hlavní

název Sekce

hrdina s výzvou k akci

Navrhněte banner s titulem, podtitulky a tlačítkem s výzvou k akci.

rozvržení

Company

About Us

Careers

Support

nápovědy

Kontaktujte nás

© 2023 Generátor

flexboxu Vytvořte responzivní zápatí se sloupci, které se skládají na menších obrazovkách.

reálného světa

Navigační panel

Logo
Home
Products
About
Contact

Běžné rozvržení navigačního panelu s logem vlevo, položkami nabídky uprostřed a ikonou košíku vpravo.

Card Grid

názvu karty

Text popisu karty zde

Název

text popisu karty zde

Název

text popisu karty zde

Responzivní mřížka karty, která se přizpůsobuje různým velikostem obrazovky pomocí vlastností flexboxu.

rozvržení

Název

Publikováno 1. ledna 2023 · 5 min Přečtěte si

obsah článku zde. Může to být stručné shrnutí nebo celý text článku. Flexbox pomáhá zarovnat obrázek a text vizuálně přitažlivým způsobem.

Běžné rozvržení článku s obrázkem vlevo a textovým obsahem vpravo, uspořádaným na mobilních zařízeních.

rozvržení panelu Hlavní

Header
Sidebar
obsah
Footer

Rozvržení panelu se záhlavím, postranním panelem, oblastí hlavního obsahu a zápatím pomocí flexboxu pro vodorovné i svislé zarovnání.

Základy Flexboxu

Co je Flexbox?

Flexibilní rozvržení boxu, běžně známé jako Flexbox, je model rozvržení CSS3, který poskytuje efektivní způsob distribuce a zarovnání prostoru mezi položkami v kontejneru, i když je jejich velikost neznámá nebo dynamická.

The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes).

Klíčové koncepty:Flexbox představuje dva hlavní koncepty:flexibilní kontejnery and the položky flex položky. Kontejner je nadřazený prvek a položky jsou jeho přímými podřízenými prvky.

Rozvržení Flexbox Hlavní osa vs Křížová osa

jsou založena na dvou osách: Křížovámain axis and the osa.

  • Hlavní osa:podél které jsou rozloženy položky Flex. Definováno křížovouflex-direction.
  • osou:Osa kolmá k hlavní ose. Jeho směr závisí na směru hlavní osy.
Hlavní osa →
křížové osy
Start
Main
End

kontejneru

Property Description
display Definuje kontejner flex; inline nebo blok v závislosti na dané hodnotě.
flex-direction Stanoví hlavní osu, čímž definuje směr, kterým jsou položky flexibilní umístěny v kontejneru flexibilních prostor.
flex-wrap Ve výchozím nastavení se flexibilní položky budou snažit vejít na jednu řádek. To můžete změnit a pomocí této vlastnosti povolit zalomení položek podle potřeby.
justify-content Zarovná flexibilní položky podél hlavní osy aktuální čáry pružného kontejneru.
align-items Zarovná pružné položky podél příčné osy aktuální čáry pružného kontejneru.
align-content Zarovná čáry pružného kontejneru dovnitř, když je v příčné ose více místa.

Vlastnosti

Property Description
order Ve výchozím nastavení jsou položky flexibilní uspořádány v pořadí zdroje. Tatoordervlastnost ale určuje pořadí, ve kterém se objeví v kontejneru flex.
flex-grow Definuje schopnost flexibilního objektu v případě potřeby růst. To akceptujets Bezjednotková hodnota, která slouží jako podíl.
flex-shrink Definuje možnost zmenšení pružné položky v případě potřeby.
flex-basis Definuje počáteční velikost pružného objektu před tím, než se podle faktorů ohybu rozdělí jakékoli dostupné místo.
align-self výchozí zarovnání (nebo zarovnání určenéalign-items) pro jednotlivé položky Flex.

Related Tools

Zkrášlovač CSS

Formátujte a zkrášlete svůj CSS kód s profesionální přesností

Převodník jednotek teploty

Transformujte svůj kód SCSS do CSS. Rychle, snadno a bezpečně.

Převodník SCSS do CSS

Transformujte svůj kód SCSS do CSS. Rychle, snadno a bezpečně.

Snadný převod XML do JSON

Generujte bezpečné hashe hesel pro WordPress

Nástroj pro dekódování Base64

Snadno dekódujte řetězce Base64 přímo ve vašem prohlížeči.

Kalkulačka hashů SHA3-384

Generujte hashe SHA3-384 rychle a snadno