Razvoj / CSS raspored

Flexbox laboratorija: CSS kontrole za kontejner i stavke

Isprobajte smer flex elemenata, prelamanje, poravnanje, raspodelu prostora i razmake, a zatim podesite rast, skupljanje, osnovnu veličinu, redosled i poravnanje svake stavke. Pogledajte kako se raspored menja i kopirajte CSS.

Flexbox laboratorija: CSS kontrole za kontejner i stavke: Prikazuje flex kontejner uživo sa svojstvima stavki koja možete uređivati, uz kratko objašnjenje pored svake kontrole. Pregled ima fiksnu visinu kako bi efekti na poprečnoj osi bili vidljivi. Rasporedi u mreži sa zajedničkim redovima i kolonama dostupni su u generatoru CSS Grid-a. Radi 100% lokalno u vašem pregledaču, bez otpremanja datoteka na server.

Kategorija: Alatke za programere
Pokretanja: U vašem pregledaču
Trošak: Besplatno · bez registracije
Dostupnost: Spremno za upotrebu

Test Flexbox rasporedaLokalna obrada

U potpunosti radi u vašem pregledaču

SmerPodešava glavnu osu i njen smer.PrelamanjeOmogućava dodatne redove kada stavke ne mogu da stanu.Obostrano poravnanje sadržajaRaspoređuje višak prostora duž glavne ose.Poravnanje stavkiPoravnava stavke na poprečnoj osi unutar svakog reda.Poravnanje sadržajaRaspoređuje redove na poprečnoj osi kada prelamanje napravi više redova.Praznina (px)Podešava razmak između susednih stavki i redova.

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 12px;
}
.item-1 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-2 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-3 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-4 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-5 { flex: 0 1 120px; order: 0; align-self: auto; }

Koristite flexbox za red ili kolonu. Koristite CSS Grid kada i redovima i kolonama trebaju zajedničke staze. Otvori generator za CSS Grid

Izabrana stavka 1RastezanjeRelativni udeo pozitivnog slobodnog prostora.SmanjiRelativna težina smanjivanja, pomnožena osnovnom veličinom.OsnovaPočetna veličina duž glavne ose pre rastezanja ili skupljanja.RedosledMenja se samo vizuelni redosled; redosled čitanja i korišćenja tastature ostaje nepromenjen.Samostalno poravnanjeZamenjuje poravnanje ove stavke po poprečnoj osi kontejnera.

Model flex rasporeda

W3C CSS Flexible Box Layout Module Level 1: https://www.w3.org/TR/css-flexbox-1/ . Slobodan prostor raspodeljuje se pomoću težina rastezanja i skupljanja flex elemenata duž glavne ose.

Poravnanje i pristupačnost

MDN osnovni koncepti flexbox-a: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox . Poprečna osa je normalna na glavnu osu; vizuelno menjanje redosleda ne menja redosled u dokumentu.

Kako se koristi

Podesite smer, prelamanje i poravnanje kontejnera.
Kliknite na stavku i promenite njenu veličinu i poravnanje.
Dodajte ili uklonite stavke, pregledajte raspored i kopirajte generisani CSS.

Privatnost i ograničenja

Podešavanja rasporeda obrađuju se lokalno u vašem pregledaču.

Srodne alatke

Često postavljana pitanja

Zašto align-content ponekad ne radi ništa?

On raspoređuje flex linije. Da bi efekat bio vidljiv, potrebno je prelamanje, više linija i slobodan prostor na poprečnoj osi.

Da li order menja redosled za čitač ekrana?

Ne. Menja vizuelni redosled, dok redosled čitanja dokumenta i redosled kretanja tastaturom ostaju nepromenjeni. Zadržite logičan redosled dokumenta.

Kada umesto toga treba da koristim Grid?

Koristite Grid kada redovi i kolone treba da dele iste trake. Flexbox je koristan kada se stavke raspoređuju prvenstveno duž jedne ose.

Besplatan alat · pokretanja: u vašem pregledaču · nalog nije potreban