Stvorite savršene Flexbox izglede

Vizualizirajte, prilagodite i generirajte CSS flexbox kod pomoću našeg intuitivnog sučelja za povlačenje i ispuštanje.

Svojstva spremnika

Svojstva predmeta

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; }
Generirani CSS kod

Popularne Flexbox unaprijed postavljene postavke

Centrirajte vodoravno i okomito

Content

Savršeno za centriranje logotipa, gumba ili bilo kojeg elementa vodoravno i okomito.

Jednaki razmak

Item 1
Item 2
Item 3

Stvorite jednak razmak između elemenata s razmakom između ili razmakom okolo.

Okomiti izbornik

Home
About
Contact

Izgradite okomiti navigacijski izbornik s dosljednim razmakom i poravnanjem.

Responzivna mreža

Box 1
Box 2
Box 3
Box 4
Box 5

Stvorite responzivni raspored rešetke koji omata stavke na temelju dostupnog prostora.

Zastava heroja

Glavni naslov

Odjeljak o heroju s pozivom na akciju

Dizajnirajte natpis heroja s naslovom, podnaslovom i gumbom za poziv na akciju.

Izgled podnožja

Company

About Us

Careers

Support

Centar za pomoć

Kontaktirajte nas

© 2023 Flexbox generator

Izradite responzivno podnožje sa stupcima koji se slažu na manjim zaslonima.

Primjeri iz stvarnog svijeta

Navigacijska traka

Logo
Home
Products
About
Contact

Uobičajeni izgled navigacijske trake s logotipom s lijeve strane, stavkama izbornika u sredini i ikonom košarice s desne strane.

Card Grid

Naslov kartice

Tekst opisa kartice ovdje

Naslov kartice

Tekst opisa kartice ovdje

Naslov kartice

Tekst opisa kartice ovdje

Responzivna rešetka kartica koja se prilagođava različitim veličinama zaslona pomoću svojstava flexboxa.

Izgled članka

Naslov članka

Objavljeno 1. siječnja 2023. · 5 min čitanja

Sadržaj članka ovdje. To može biti kratak sažetak ili cijeli tekst članka. Flexbox pomaže poravnati sliku i tekst na vizualno privlačan način.

Uobičajeni izgled članka sa slikom s lijeve strane i tekstualnim sadržajem s desne strane, složen na mobilnim uređajima.

Izgled nadzorne ploče

Header
Sidebar
Glavni sadržaj
Footer

Izgled nadzorne ploče sa zaglavljem, bočnom trakom, glavnim područjem sadržaja i podnožjem pomoću flexboxa za vodoravno i okomito poravnanje.

Osnove Flexboxa

Što je Flexbox?

Fleksibilni raspored okvira, poznatiji kao Flexbox, CSS3 je model izgleda koji pruža učinkovit način raspodjele i poravnavanja prostora između stavki u spremniku, čak i kada je njihova veličina nepoznata ili dinamična.

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).

Ključni pojmovi:Flexbox uvodi dva glavna koncepta:Flex spremnik and the Fleksibilni predmeti. Spremnik je nadređeni element, a stavke su njegovi izravni potomci.

Glavna os naspram križne osi

Flexbox rasporedi temelje se na dvije osi:main axis and the Križna os.

  • Glavna os:Primarna os duž koje su položeni savitljivi predmeti. Definirano od straneflex-direction.
  • Križna os:Os okomita na glavnu os. Njegov smjer ovisi o smjeru glavne osi.
Glavna os →
← Križna os
Start
Main
End

Svojstva spremnika

Property Description
display Definira fleksibilni spremnik; inline ili blok ovisno o zadanoj vrijednosti.
flex-direction Uspostavlja glavnu os, definirajući tako smjer stavljanja savitljivih predmeta u spremnik savitljivosti.
flex-wrap Prema zadanim postavkama, sve fleksibilne stavke pokušat će stati u jedan redak. To možete promijeniti i dopustiti da se stavke omotaju po potrebi pomoću ovog svojstva.
justify-content Poravnava savitljive stavke duž glavne osi trenutne linije fleksibilnog spremnika.
align-items Poravnava savitljive stavke duž poprečne osi trenutne linije fleksibilnog spremnika.
align-content Poravnava linije savitljivog spremnika unutar kada ima dodatnog prostora u poprečnoj osi.

Svojstva predmeta

Property Description
order Prema zadanim postavkama, fleksibilne stavke raspoređene su u izvornom redoslijedu. Međutim,orderSvojstvo kontrolira redoslijed kojim se pojavljuju u spremniku Flex.
flex-grow Definira sposobnost fleksibilnog predmeta da raste ako je potrebno. Prihvaća vrijednost bez jedinice koja služi kao proporcija.
flex-shrink Definira mogućnost da se fleksibilna stavka smanji ako je potrebno.
flex-basis Definira početnu veličinu fleksibilne stavke prije nego što se bilo koji raspoloživi prostor raspodijeli prema faktorima savitljivosti.
align-self Omogućuje zadano poravnanje (ili ono koje je odredioalign-items) koje treba nadjačati za pojedinačne fleksibilne stavke.

Related Tools

CSS uljepšivač

Formatirajte i uljepšajte svoj CSS kod s profesionalnom preciznošću

Pretvarač olovke u CSS

Transform your SCSS code into CSS. Fast, easy, and secure.

SCSS u CSS pretvarač

Transform your SCSS code into CSS. Fast, easy, and secure.

Pretvorite JSON u XML bez napora

Transform your JSON data into structured XML format with a single click. Fast, secure, and completely browser-based.

Whirlpool Hash Kalkulator

Generirajte Whirlpool hasheve brzo i jednostavno

SHA3-224 Hash kalkulator

Generate SHA3-224 hashes quickly and easily