Frontend & WordPress kurs

263 lekcije

HTML

CSS

Responsive

javaScript

SASS Preprocesor

Wordpress CMS

Database SQL

Wordpress Custom Theme

CSS - Flex

Na ovom predavanju upoznaćemo se sa FLEX propertijem.

Do sada smo za pravljenje layouta koristili:

  • display:inline-block
  • float

U toku rada smo se sretali sa odredjenim problemima koji ovi propertiji imaju. Od skora je uveden FLEX properti koji nam omogućava da na izuzetno lagan način manipulišemo elementima i pravimo layout tj da rasporedjujemo elemente na WEB stranici.

Sam properi FLEX je kompleksan. Kada pricamo o njemu vazno je napomenuti da treba da razlikujemo 2 stvari:

  • FLEX CONTAINER
  • FLEX ITEME

Flex container je element koji ima definisan DISPLAY:FLEX a flex ITEMI su prvi potomci FLEX CONTAINERA

U zavisnosti od toga mozemo i koristiti odredjene opcije:

ZA FLEX CONTAINER:

  • display:flex
  • flex-wrap : wrap, no-wrap, wrap-reverse
  • flex-direction: row, row-reverse, column, column-reverse
  • justify-content: flex-start, flex-end, center, space-between, space-around, space-evenly
  • align-items: flex-start, flex-end, center, baseline, strach
  • align-content:flex-start, flex-end, center, baseline, strach

 

ZA FLEX ITEME:

  • flex-grow
  • flex-srink
  • flex-basis
  • flex: flex-grow flex-srink flex-basis
  • self-align: flex-start, flex-end, center, baseline, strach
  • order

Korišćenjem ovog sajta prihvatate upotrebu kolačića. Saznajte više