CSS Grid je jos jedan alat koji nam omogucava kreiranje layouta html elemenata na web stranici. CSS Grid je na neki nacin slican CSS Flexboksu, osim sto ovaj drugi omogucava jednodimenzionalno upravljanje (redovi ili kolone) za razliku od CSS grida koji rasporedjuje html elemente u dve dimenzije (redove i kolone). Takodje i u CSS Flexu […]

Ovaj properties nam omogucava align pojedinacnog elementa. Auto je podrazumevana vrednost align-self propertiesa. Napravite folder 041flexbox-align-self i u njemu kreirajte index.html sa boilerplate-om kao i linkom na style.css fajl. U index.html napravicemo listu sa 10 itemsa. U style.css cemo dodati sledece: Povecali smo visinu ul elementa na 100vh kako bi mogli da manipulisemo elementima koristeci […]

I ako deluje slicno sa display: flex, properties, flex properties se ne odnosi na flexboks (pretka) vec na itemse (naslednike – child). Ovaj properties objedinjuje prethodna tri propertiesa. Dakle flex properties prihvata maksimalno 3 velicine i to po sledecem redu: flex-grow, flex-shrink i flex-basis. Napravite index.html i style.css kao u prethodnoj lekciji i dodajte u […]

Flex basis postavlja sirinu ili visinu elementa flexboksa u zavisnosti da li su elementi postavljeni po redovima ili kolonama, pre preostalog prostora koje je ostalo. Kada postavimo flex-basis properties, postavljanje with properties na tom elementu, nece imati uticaj. Ovo je slican properties, kao iz prethodne lekcije tj, njegova sirina ce se u nedostatku prostora, poslednja […]

Flex shrink je sledeci properties koji se odnosi na potomke flexboks predaka. Koristimo ga kada postavimo konkretnu velicinu item-a (npr sirinu). Sto manju vrednost flex-shrink ima, to ce se kasnije skupljati. Napravite index.html i style.css kao u prosloj lekciji i unesite dodatna svojstva u style.css. Pokusajte da smanjujete sirinu prozora i primticete da ce se […]

Flex Grow properties definise koliko ce item zauzeti raspolozivu velicinu flexboksa. Radi se o velicini koja se primenjuje na flexbox naslednike (child). Kreirajte novi folder 037flex-grow i u njemu fajl index.html sa boilerplate-om i povezanim style.css-om. U index.html unesite ul element sa 3 li-ja. style.css Sada cemo naciniti prvi li element najvecim i on ce […]

Order properties se odnosi na potomke flexbox kontejnera i definise mesto po kom redosledu ce se prikazivati. Napravite folder 036flexbox-order i u njemu index.html sa boilerplate-om kao i linkovanim style.css fajlom. Dodajte ul element sa 5 li elementa u index.html. U style.css dodajte sledeci stil: Podrazumevani (default) order se obelezava sa 0. Vece vrednosti od […]

Gap je osobina (properties) koja definise razmak izmedju celija flexbox itema. Gap je nesto slicno marginama i koristi se iskljucivo sa flex i grid elementima. U sledecem primeru kreiracemo ul element sa 20 li elemenata i prikazati osobine gap-a. Napravite folder 035flexbox-gap i u njemu index.html sa bojlerplateom kao i linkovan style.css fajl. U index.html […]