Yukar\u0131da bulunan maddelerden 9 ve sonras\u0131 \u00f6\u011feler(items) i\u00e7in olan \u00f6zelliklerdir. Anlat\u0131m\u0131n sonuna do\u011fru ne demek istedi\u011fimi anlayacaks\u0131n\u0131z.<\/p>\n\n\n\n

1- Flexbox nedir?<\/h2>\n\n\n\n
Flexbox (Esnek kutu modeli), boyutlar\u0131 bilinmeyen, dinamik alanlar\u0131 daha kolay y\u00f6netmek i\u00e7in Css3 ile birlikte hayat\u0131m\u0131za girdi. Flex box’tan \u00f6nce \u00f6\u011feleri sa\u011fa-sola dayamak i\u00e7in float kullan\u0131rd\u0131. Float \u00f6zellikleri ile kutular\u0131m\u0131z\u0131 yan yana alabiliyorduk fakat \u00e7ok fazla esneklik sa\u011flayam\u0131yordu. Bunlardan en b\u00fcy\u00fck problem ise dikey ortalama yapmak.<\/p>\n\n\n\n
Flex yap\u0131s\u0131n\u0131 kullanmam\u0131z\u0131n en b\u00fcy\u00fck sebebi flex yap\u0131s\u0131 ile kapsay\u0131c\u0131ya(container) ve i\u00e7indeki \u00f6\u011felerine esneklik getirebiliyoruz. Flex yap\u0131s\u0131 ile kutu modellerimizin yatay ve dikey hizalarda nas\u0131l g\u00f6r\u00fcnece\u011fini, \u00f6\u011felerin kendi i\u00e7inde hizalamalar\u0131n\u0131 ve s\u0131ralamalar\u0131n\u0131n de\u011fi\u015ftirilmesi gibi muhte\u015fem \u00f6zellikleri bulunuyor.<\/p>\n\n\n\n

2- Kapsay\u0131c\u0131(container) flex \u00f6zelli\u011fi<\/h2>\n\n\n\n
Bu \u00f6zellik asl\u0131nda daha \u00f6nce kulland\u0131\u011f\u0131m\u0131z display \u00f6zelli\u011fi. Flex ile birlikte yeni de\u011ferler alarak esnek kapsay\u0131c\u0131(container) kullan\u0131lmaya ba\u015fland\u0131. Esnek modeller olu\u015fturmak i\u00e7in display \u00f6zelli\u011fine flex<\/strong> veya flex-inline<\/strong> olarak tan\u0131mlama yapmam\u0131z yeterli. Flex ile flex-inline yap\u0131lar\u0131n\u0131n fark\u0131 ise yine display \u00f6zelli\u011fi olan block <\/strong>ve inline <\/strong>yap\u0131lar\u0131 ile ayn\u0131.<\/p>\n\n\n\n
A\u015fa\u011f\u0131da display: flex; tan\u0131mlamas\u0131 yaparak bir kapsay\u0131c\u0131 \u00f6rne\u011fi verelim. Bundan sonraki \u00f6rneklerde bu kod \u00fczerinden ilerleyece\u011fiz. <\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Css3 Flexbox(Kutu Modeli) - Kapsay\u0131c\u0131<\/title>\n <style>\n .flex-container {\n display: flex;\n color: green;\n border: 2px solid green;\n }\n\n .flex-container > div {\n background-color: #ededed;\n width: 100px; \n line-height: 75px;\n margin: 10px;\n text-align: center;\n font-size: 30px;\n\n }\n <\/style>\n<\/head>\n<body>\n\n <div class=\"flex-container\">\n <div>1<\/div>\n <div>2<\/div>\n <div>3<\/div> \n <\/div>\n\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\nYukar\u0131da yazm\u0131\u015f oldu\u011fumuz flex tan\u0131mlamas\u0131 ile olu\u015fan ekran g\u00f6r\u00fcnt\u00fcs\u00fc a\u015fa\u011f\u0131daki gibi olacakt\u0131r.<\/p>\n\n\n\n
$\"display$
display flex <\/figcaption><\/figure><\/div>\n\n\n\n
3- Flex-direction nedir?<\/h2>\n\n\n\n
\u00d6\u011felerin(items) y\u00f6n\u00fcn\u00fc belirlemek i\u00e7in flex-direction kullan\u0131l\u0131r. Flex-direction varsay\u0131lan olarak row de\u011ferine sahiptir ve kapsay\u0131c\u0131 i\u00e7inde bulunan t\u00fcm \u00f6\u011feler(items) yan yana listelenir. A\u015fa\u011f\u0131da bu \u00f6zelli\u011fin ald\u0131\u011f\u0131 de\u011ferleri inceleyelim ve sonras\u0131nda bu de\u011ferlerin kullan\u0131m\u0131na bakal\u0131m.<\/p>\n\n\n\n
`.container {\n flex-direction: row | row-reverse | column | column-reverse;\n}<\/code><\/pre>\n\n\n\n`
row <\/strong>(varsay\u0131lan) = soldan sa\u011fa do\u011fru s\u0131ralar.<\/li>
row-reverse<\/strong> = sa\u011fdan sola do\u011fru s\u0131ralar.<\/li>
column<\/strong> = yukar\u0131dan a\u015fa\u011f\u0131 do\u011fru s\u0131ralar.<\/li>
column-reverse<\/strong> = a\u015fa\u011f\u0131dan yukar\u0131 do\u011fru s\u0131ralar.<\/li><\/ul>\n\n\n\n
<\/h3>\n\n\n\n
Yukar\u0131da bahsetmi\u015f oldu\u011fumuz flex-direction \u00f6zelli\u011fi ile ilgili bir \u00f6rnek yapal\u0131m ve flex-direction \u00f6zelli\u011finin alm\u0131\u015f oldu\u011fu de\u011ferlerin nas\u0131l g\u00f6z\u00fckece\u011fini inceleyelim.<\/p>\n\n\n\n
\u00d6rnek: flex-direction: row | row-reverse | column | column-reverse;<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Css3 Flexbox(Kutu Modeli) - flex-direction<\/title>\n <style> \n .container {\n display: flex;\n color: green;\n border: 1px solid green; \n margin-top: 20px;\n }\n \n .container > div {\n background-color: #ededed;\n width: 100px; \n line-height: 75px;\n margin: 10px;\n text-align: center;\n font-size: 25px;\n }\n\n .flex1 {flex-direction: row;}\n .flex2 {flex-direction: row-reverse;}\n .flex3 {flex-direction: column;}\n .flex4 {flex-direction: column-reverse;}\n\n <\/style>\n<\/head>\n<body>\n\n <div class=\"container flex1 \">\n <div>1<\/div>\n <div>2<\/div>\n <div>3<\/div>\n <\/div>\n\n <div class=\"container flex2 \">\n <div>1<\/div>\n <div>2<\/div>\n <div>3<\/div>\n <\/div>\n\n <div class=\"container flex3 \">\n <div>1<\/div>\n <div>2<\/div>\n <div>3<\/div>\n <\/div>\n\n <div class=\"container flex4 \">\n <div>1<\/div>\n <div>2<\/div>\n <div>3<\/div>\n <\/div>\n\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n\u00d6rnek \u00c7\u0131kt\u0131: flex-direction: row | row-reverse | column | column-reverse;<\/h3>\n\n\n\nflex-direction: row | row-reverse | column | column-reverse<\/figcaption><\/figure><\/div>\n\n\n\n4- Flex-wrap nedir?<\/h2>\n\n\n\nFlex kapsay\u0131c\u0131(container) i\u00e7erisinde bulunan \u00f6\u011feler(items) varsay\u0131lan olarak esnek \u00f6\u011feler tek bir sat\u0131ra s\u0131\u011fmaya \u00e7al\u0131\u015f\u0131rlar fakat baz\u0131 durumlarda tek sat\u0131ra s\u0131\u011fmayan i\u00e7eriklerimiz olabilmektedir. Bu gibi durumlarda \u00f6\u011feleri(items) birden fazla sat\u0131ra yaymak i\u00e7in flex-wrap \u00f6zelli\u011finden faydalan\u0131r\u0131z.<\/p>\n\n\n\n .container {\n flex-wrap: nowrap | wrap | wrap-reverse;\n}\n<\/code><\/pre>\n\n\n\nwrap<\/strong>\u00a0= \u00d6\u011feler gerekti\u011finde birden fazla sat\u0131rda yukar\u0131dan a\u015fa\u011f\u0131 do\u011fru listelenir.<\/li> nowrap\u00a0(varsay\u0131lan) <\/strong>= T\u00fcm \u00f6\u011feleri tek bir sat\u0131da yan yana listeler.<\/li> wrap-reverse<\/strong>\u00a0= \u00d6\u011feler gerekti\u011finde birden fazla sat\u0131rda a\u015fa\u011f\u0131dan yukar\u0131 do\u011fru listelenir.<\/li><\/ul>\n\n\n\n<\/h3>\n\n\n\nYukar\u0131da bahsetmi\u015f oldu\u011fumuz flex-wrap \u00f6zelli\u011fi ile ilgili bir \u00f6rnek yapal\u0131m ve flex-wrap \u00f6zelli\u011finin alm\u0131\u015f oldu\u011fu de\u011ferlerin nas\u0131l g\u00f6z\u00fckece\u011fini inceleyelim.<\/p>\n\n\n\n \u00d6rnek: flex-wrap: wrap | nowrap | wrap-reverse;<\/h3>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Css3 Flexbox(Kutu Modeli) - flex-direction<\/title>\n <style> \n .container {display: flex; color: green;border: 1px solid green; margin-top: 20px;}\n .container > div {background-color: #ededed;width: 100px; line-height: 75px;margin: 10px; text-align: center;font-size: 25px;}\n \n .flex-wrap1 {flex-wrap: wrap;}\n .flex-wrap2 {flex-wrap: nowrap;}\n .flex-wrap3 {flex-wrap: wrap-reverse;} \n <\/style>\n<\/head>\n<body>\n\n <div class=\"container flex-wrap1 \">\n <div>1<\/div> <div>2<\/div> <div>3<\/div> <div>4<\/div>\n <div>5<\/div> <div>6<\/div> <div>7<\/div> <div>8<\/div> \n <\/div>\n\n <div class=\"container flex-wrap2 \">\n <div>1<\/div> <div>2<\/div> <div>3<\/div> <div>4<\/div>\n <div>5<\/div> <div>6<\/div> <div>7<\/div> <div>8<\/div> \n <\/div>\n\n <div class=\"container flex-wrap3 \">\n <div>1<\/div> <div>2<\/div> <div>3<\/div> <div>4<\/div>\n <div>5<\/div> <div>6<\/div> <div>7<\/div> <div>8<\/div> \n <\/div> \n\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n\u00d6rnek \u00c7\u0131kt\u0131: flex-wrap: wrap | nowrap | wrap-reverse;<\/h3>\n\n\n\nflex-wrap: nowrap | wrap | wrap-reverse<\/figcaption><\/figure><\/div>\n\n\n\n5- Flex-flow nedir?<\/h2>\n\n\n\nFlex-flow<\/strong> \u00f6zelli\u011fi flex-direction<\/strong> ve flex wrap<\/strong> \u00f6zelliklerinin kullan\u0131m\u0131 i\u00e7in k\u0131sa bir yoldur. Her iki \u00f6zellik(flex-direction<\/strong> ve flex wrap<\/strong>) de\u011ferini tek seferde tan\u0131mlamak i\u00e7in kullan\u0131l\u0131r.<\/p>\n\n\n\n \u00d6ncelikle flex-direction<\/strong> ve flex wrap<\/strong> \u00f6zelliklerini ayr\u0131 ayr\u0131 tan\u0131mlayal\u0131m.<\/h3>\n\n\n\n.container {\n flex-direction: column;\n flex-wrap: wrap;\n}\n<\/code><\/pre>\n\n\n\nFlex-flow<\/strong> kullanarak tek seferde tan\u0131mlama yapal\u0131m.<\/h3>\n\n\n\n.container {\n flex-flow: wrap row;\n}<\/code><\/pre>\n\n\n\nYukar\u0131da bahsetmi\u015f oldu\u011fumuz flex-flow \u00f6zelli\u011fi ile ilgili bir \u00f6rnek yapal\u0131m ve flex-flow \u00f6zelli\u011finin alm\u0131\u015f oldu\u011fu de\u011ferlerin nas\u0131l g\u00f6z\u00fckece\u011fini inceleyelim.<\/p>\n\n\n\n \u00d6rnek: flex-flow: wrap row;<\/h3>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Css3 Flexbox(Kutu Modeli) - flex-flow<\/title>\n <style> \n .container {display: flex; color: green;border: 1px solid green; margin-top: 20px;}\n .container > div {background-color: #ededed;width: 100px; line-height: 75px;margin: 10px; text-align: center;font-size: 25px;}\n .flex-flow {flex-flow: wrap row;} \n <\/style>\n<\/head>\n<body>\n\n <div class=\"container flex-flow \">\n <div>1<\/div> <div>2<\/div> <div>3<\/div> <div>4<\/div>\n <div>5<\/div> <div>6<\/div> <div>7<\/div> <div>8<\/div> \n <\/div>\n\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n\u00d6rnek \u00c7\u0131kt\u0131: flex-flow: wrap row;<\/h3>\n\n\n\nflex-flow: wrap row;<\/figcaption><\/figure><\/div>\n\n\n\n6- Justify-content nedir?<\/h2>\n\n\n\nJustify-content \u00f6\u011felerin(items) yatay eksende hizas\u0131n\u0131 ayarlamak-konumland\u0131rmak i\u00e7in kullan\u0131l\u0131r.<\/p>\n\n\n\n .container {\n justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly;\n}<\/code><\/pre>\n\n\n\nflex-start (varsay\u0131lan)<\/strong> = \u00d6\u011feleri(items) ba\u015flang\u0131\u00e7 noktas\u0131na(sola) dayal\u0131 hizalar.<\/li> center<\/strong> = \u00d6\u011feleri(items) ortada hizalar.<\/li> flex-end<\/strong> = \u00d6\u011feleri(items) biti\u015f noktas\u0131na(sa\u011fa) dayal\u0131 hizalar.<\/li> space-between<\/strong> = \u0130lk \u00f6\u011fe(item) ba\u015flang\u0131\u00e7 noktas\u0131na(sola) dayal\u0131, son \u00f6\u011fe(item) biti\u015f noktas\u0131na(sa\u011fa) dayal\u0131 ve di\u011fer \u00f6\u011feler aras\u0131nda e\u015fit aral\u0131klar b\u0131rak\u0131larak, ortal\u0131 olacak \u015fekilde hizalan\u0131r.<\/li> space-around<\/strong> = T\u00fcm \u00f6\u011felerin solundan ve sa\u011f\u0131ndan e\u015fit aral\u0131klarla bo\u015fluk b\u0131rak\u0131larak ortalan\u0131r. \u0130lk ve son \u00f6\u011fenin aras\u0131nda kalan \u00f6\u011felerin iki taraf\u0131nda bo\u015fluk olaca\u011f\u0131 i\u00e7in ortadaki \u00f6\u011feler aras\u0131ndaki bo\u015fluk, ba\u015flang\u0131\u00e7 ve biti\u015f \u00f6\u011felerine g\u00f6re daha fazla olacakt\u0131r.<\/li> space-evenly<\/strong> = Ba\u015flang\u0131\u00e7 ve biti\u015f \u00f6\u011feleri dahil olmakla birlikte, t\u00fcm \u00f6\u011felerin aras\u0131 ayn\u0131 e\u015fitlikte olacak \u015fekilde hizalar.<\/li><\/ul>\n\n\n\nYukar\u0131da bahsetti\u011fimiz justify-content \u00f6zelli\u011finin ald\u0131\u011f\u0131 farkl\u0131 de\u011ferler de mevcut fakat baz\u0131lar\u0131 taray\u0131c\u0131lar taraf\u0131ndan hen\u00fcz desteklenmemektedir. Bu de\u011ferlerin t\u00fcm\u00fcn\u00fc incelemek i\u00e7in buraya t\u0131klay\u0131n\u0131z<\/a>.<\/p>\n\n\n\n NOT: space-evenly<\/strong> tan\u0131mlamas\u0131n\u0131n taray\u0131c\u0131 uyum problemleri oldu\u011fu i\u00e7in \u015fuan kullanman\u0131z\u0131 tavsiye etmiyorum. Microsoft \u0130nternet Explorer, Edge taraf\u0131ndan desteklenmemektedir.<\/p>\n\n\n\n Yukar\u0131da bahsetmi\u015f oldu\u011fumuz justify-content \u00f6zelli\u011fi ile ilgili bir \u00f6rnek yapal\u0131m ve justify-content \u00f6zelli\u011finin alm\u0131\u015f oldu\u011fu de\u011ferlerin nas\u0131l g\u00f6z\u00fckece\u011fini inceleyelim.<\/p>\n\n\n\n \u00d6rnek: justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly;<\/h3>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Css3 Flexbox(Kutu Modeli) - justify-content<\/title>\n <style> \n .container {display: flex; color: green;border: 1px solid green; \n margin-top: 20px;}\n .container > div {background-color: #ededed;width: 100px; line-height: 75px;\n margin: 10px; text-align: center;font-size: 25px;}\n \n .justify-content1 {justify-content: flex-start;} \/* sola dayal\u0131 \/\n .justify-content2 {justify-content: center;} \/ ortal\u0131 \/\n .justify-content3 {justify-content: flex-end;} \/ sa\u011fa dayal\u0131 \/\n .justify-content4 {justify-content: space-between;} \/ ilk \u00f6\u011fe sola - son \u00f6\u011fe sa\u011fa - di\u011ferleri ortal\u0131 \/ \n .justify-content5 {justify-content: space-around;} \/ sa\u011f sol e\u015fit bo\u015fluk - ortada 2 kat\u0131 \/\n .justify-content6 {justify-content: space-evenly;} \/ t\u00fcm \u00f6\u011feler e\u015fit bo\u015fluk \/ \n\n <\/style>\n<\/head>\n<body>\n\n <div class=\"container justify-content1 \">\n <div>1<\/div> <div>2<\/div> <div>3<\/div> \n <\/div>\n\n <div class=\"container justify-content2 \">\n <div>1<\/div> <div>2<\/div> <div>3<\/div> \n <\/div>\n\n <div class=\"container justify-content3 \">\n <div>1<\/div> <div>2<\/div> <div>3<\/div> \n <\/div> \n\n <div class=\"container justify-content4 \">\n <div>1<\/div> <div>2<\/div> <div>3<\/div> \n <\/div> \n\n <div class=\"container justify-content5 \">\n <div>1<\/div> <div>2<\/div> <div>3<\/div> \n <\/div> \n\n <div class=\"container justify-content6 \">\n <div>1<\/div> <div>2<\/div> <div>3<\/div> \n <\/div> \n\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n\u00d6rnek \u00c7\u0131kt\u0131: justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly;<\/h3>\n\n\n\njustify-content: flex-start | center | flex-end | space-between | space-around | space-evenly;<\/figcaption><\/figure><\/div>\n\n\n\n7- Align-items nedir?<\/h2>\n\n\n\nAlign-items, \u00f6\u011felerin(items) dikey eksende hizas\u0131n\u0131 ayarlamak-konumland\u0131rmak i\u00e7in kullan\u0131l\u0131r.<\/p>\n\n\n\n .container {\n align-items: stretch | flex-start | center | flex-end | baseline;\n}<\/code><\/pre>\n\n\n\nstretch(varsay\u0131lan)<\/strong> = Hizalama yapmaz, \u00f6\u011felerin y\u00fcksekliklerini kapsay\u0131c\u0131ya(container) g\u00f6re uzat\u0131r.<\/li> flex-start <\/strong>= \u00d6\u011feleri yukar\u0131ya do\u011fru hizalar.<\/li> center<\/strong> = \u00d6\u011feleri ortaya do\u011fru hizalar.<\/li> flex-end<\/strong> = \u00d6\u011feleri a\u015fa\u011f\u0131ya do\u011fru hizalar.<\/li> baseline<\/strong> = \u00d6\u011felerin i\u00e7indeki ilk sat\u0131r\u0131 baz alarak ortalama yapar.<\/li><\/ul>\n\n\n\nYukar\u0131da bahsetmi\u015f oldu\u011fumuz align-items \u00f6zelli\u011fi ile ilgili bir \u00f6rnek yapal\u0131m ve align-items \u00f6zelli\u011finin alm\u0131\u015f oldu\u011fu de\u011ferlerin nas\u0131l g\u00f6z\u00fckece\u011fini inceleyelim.<\/p>\n\n\n\n \u00d6rnek: align-items: stretch | flex-start | center | flex-end | baseline;<\/h3>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Css3 Flexbox(Kutu Modeli) - align-items<\/title>\n <style> \n .container {display: flex; color: green;border: 1px solid green; \n margin-top: 20px; height: 150px;} \n .container > div {background-color: #ededed;width: 100px; line-height: 75px;\n margin: 10px; text-align: center;font-size: 25px;}\n \n .align-items1 {align-items: stretch;} \/ varsay\u0131lan, y\u00fcksekli\u011fe g\u00f6re doldurur \/ \n .align-items2 {align-items: flex-start;} \/ yukar\u0131ya dayal\u0131 \/\n .align-items3 {align-items: center;} \/ ortal\u0131 \/\n .align-items4 {align-items: flex-end;} \/ a\u015fa\u011f\u0131ya dayal\u0131 \/ \n .align-items5 {align-items: baseline;} \/ ilk sat\u0131r\u0131 baz alarak ortalama yapar \/ \n \n \/ baseline de\u011ferini anlamak i\u00e7in \u00f6\u011fe de\u011ferlerini de\u011fi\u015ftirip bir \u00e7izgi \u00e7izelim \/ \n .align-items5 div:nth-child(2){line-height: 50px;}\n .align-items5 div:last-child {line-height: 25px;}\n hr {border: 1px solid red;margin-top: -93px;z-index: 10;position: relative;}\n <\/style>\n<\/head>\n<body>\n\n <div class=\"container align-items1 \">\n <div>1<\/div> <div>2<\/div> <div>3<\/div> \n <\/div>\n\n <div class=\"container align-items2 \">\n <div>1<\/div> <div>2<\/div> <div>3<\/div> \n <\/div>\n\n <div class=\"container align-items3 \">\n <div>1<\/div> <div>2<\/div> <div>3<\/div> \n <\/div> \n\n <div class=\"container align-items4 \">\n <div>1<\/div> <div>2<\/div> <div>3<\/div> \n <\/div> \n \n <div class=\"container align-items5 \">\n <div>1<\/div> <div>2<\/div> <div>3<\/div>\n <\/div> \n\n <hr\/>\n\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n\u00d6rnek \u00c7\u0131kt\u0131: align-items: stretch | flex-start | center | flex-end | baseline;<\/h3>\n\n\n\nalign-items: stretch | flex-start | center | flex-end | baseline<\/figcaption><\/figure><\/div>\n\n\n\n8- Align-content nedir?<\/h2>\n\n\n\nAlign-content, Align-items gibi dikey hizalamalar i\u00e7in kullan\u0131l\u0131r fakat aralalar\u0131nda \u00f6nemli bir fark var. Align-content tan\u0131mlamalar\u0131 ile \u00e7ok sat\u0131rl\u0131 yap\u0131larda \u00f6\u011felerin(items) dikey eksende sat\u0131rlar\u0131n hizas\u0131n\u0131 ayarlamak i\u00e7in kullan\u0131l\u0131r.\u00a0<\/p>\n\n\n\n .container {\n align-content: stretch | flex-start | center | flex-end | space-between | space-evenly;\n}<\/code><\/pre>\n\n\n\nstretch (varsay\u0131lan) <\/strong>= \u00d6\u011feleri hizalamaz, kapsay\u0131c\u0131n\u0131n y\u00fcksekli\u011fine g\u00f6re \u00f6\u011felerin y\u00fcksekliklerini uzat\u0131r.<\/li> flex-start<\/strong> = \u00d6\u011feleri dikey eksende ba\u015fta hizalar.<\/li> center<\/strong> = \u00d6\u011feleri dikey eksende ortal\u0131 hizalar.<\/li> flex-end<\/strong> = \u00d6\u011feleri dikey eksende sonda hizalar.<\/li> space-between<\/strong> = \u0130lk sat\u0131daki \u00f6\u011feler kapsay\u0131c\u0131n\u0131n(container) ba\u015fta, son sat\u0131rdaki \u00f6\u011feler sonra olmak \u00fczere di\u011fer sat\u0131rdaki \u00f6\u011feleri dikey eksende ortalar.<\/li> space-evenly<\/strong> = \u00d6\u011feleri sat\u0131rlar aras\u0131 e\u015fit oranda olacak \u015fekilde dikey eksende ortalar.<\/li><\/ul>\n\n\n\nNOT: space-evenly<\/strong> tan\u0131mlamas\u0131n\u0131n taray\u0131c\u0131 uyum problemleri oldu\u011fu i\u00e7in \u015fuan kullanman\u0131z\u0131 tavsiye etmiyorum. Microsoft \u0130nternet Explorer, Edge taraf\u0131ndan desteklenmemektedir.<\/p>\n\n\n\n Yukar\u0131da bahsetmi\u015f oldu\u011fumuz align-content \u00f6zelli\u011fi ile ilgili bir \u00f6rnek yapal\u0131m ve align-content \u00f6zelli\u011finin alm\u0131\u015f oldu\u011fu de\u011ferlerin nas\u0131l g\u00f6z\u00fckece\u011fini inceleyelim.<\/p>\n\n\n\n \u00d6rnek: align-content: stretch | flex-start | center | flex-end | space-between | space-evenly;<\/h3>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Css3 Flexbox(Kutu Modeli) - align-content<\/title>\n <style> \n .container {display: flex; flex-wrap: wrap; color: green;border: 1px solid green; margin-top: 20px; height: 200px;}\n .container > div {background-color: #ededed;width: 80px; line-height: 40px;margin: 10px; text-align: center;font-size: 25px;}\n \n .align-content1 {align-content: stretch;} \/ varsay\u0131lan y\u00fcksekli\u011fe g\u00f6re \u00f6\u011felerin y\u00fcksekli\u011fi belirlenir\/\n .align-content2 {align-content: flex-start;} \n .align-content3 {align-content: center;} \n .align-content4 {align-content: flex-end;} \n .align-content5 {align-content: space-between;} \n .align-content6 {align-content: space-around;} \n <\/style>\n<\/head>\n<body>\n\n <div class=\"container align-content1 \">\n <div>1<\/div> <div>2<\/div> <div>3<\/div> <div>4<\/div>\n <div>5<\/div> <div>6<\/div> <div>7<\/div> <div>8<\/div> \n <div>9<\/div> <div>10<\/div> <div>11<\/div> <div>12<\/div> \n <\/div>\n\n <div class=\"container align-content2 \">\n <div>1<\/div> <div>2<\/div> <div>3<\/div> <div>4<\/div>\n <div>5<\/div> <div>6<\/div> <div>7<\/div> <div>8<\/div> \n <div>9<\/div> <div>10<\/div> <div>11<\/div> <div>12<\/div> \n <\/div>\n\n <div class=\"container align-content3 \">\n <div>1<\/div> <div>2<\/div> <div>3<\/div> <div>4<\/div>\n <div>5<\/div> <div>6<\/div> <div>7<\/div> <div>8<\/div> \n <div>9<\/div> <div>10<\/div> <div>11<\/div> <div>12<\/div> \n <\/div> \n\n <div class=\"container align-content4 \">\n <div>1<\/div> <div>2<\/div> <div>3<\/div> <div>4<\/div>\n <div>5<\/div> <div>6<\/div> <div>7<\/div> <div>8<\/div> \n <div>9<\/div> <div>10<\/div> <div>11<\/div> <div>12<\/div> \n <\/div>\n\n <div class=\"container align-content5 \">\n <div>1<\/div> <div>2<\/div> <div>3<\/div> <div>4<\/div>\n <div>5<\/div> <div>6<\/div> <div>7<\/div> <div>8<\/div> \n <div>9<\/div> <div>10<\/div> <div>11<\/div> <div>12<\/div> \n <\/div>\n\n <div class=\"container align-content6 \">\n <div>1<\/div> <div>2<\/div> <div>3<\/div> <div>4<\/div>\n <div>5<\/div> <div>6<\/div> <div>7<\/div> <div>8<\/div> \n <div>9<\/div> <div>10<\/div> <div>11<\/div> <div>12<\/div> \n <\/div> \n\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n\u00d6rnek \u00c7\u0131kt\u0131: align-content: stretch | flex-start | center | flex-end | space-between | space-evenly;<\/h3>\n\n\n\nalign-content: stretch | flex-start | center | flex-end | space-between | space-evenly<\/figcaption><\/figure><\/div>\n\n\n\n9- Order<\/h2>\n\n\n\nOrder, \u00f6\u011felerin s\u0131ralan\u0131\u015f\u0131n\u0131 de\u011fi\u015ftirmek i\u00e7in kullan\u0131l\u0131r. Order \u00f6zelli\u011finin varsay\u0131lan de\u011feri 0\u2019d\u0131r.<\/p>\n\n\n\n Normal s\u0131ras\u0131 1 – 2 – 3 olan divlerin s\u0131ralamas\u0131n\u0131 de\u011fi\u015ftirerek 3 – 2 – 1 olarak s\u0131ralayal\u0131m.<\/p>\n\n\n\n \u00d6rnek: Order<\/h3>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Css3 Flexbox(Kutu Modeli) - order<\/title>\n <style> \n .container {display: flex; color: green;border: 1px solid green; margin-top: 20px;}\n .container > div {background-color: #ededed;width: 100px; line-height: 75px;\n margin: 10px; text-align: center;font-size: 25px;}\n \/ order \/\n .order1 { order: 2; }\n .order2 { order: 1; }\n .order3 { order: 0; }\n <\/style>\n<\/head>\n<body>\n \n <div class=\"container\">\n <div class=\"order1\">1<\/div> \n <div class=\"order2\">2<\/div> \n <div class=\"order3\">3<\/div> \n <\/div> \n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n\u00d6rnek \u00c7\u0131kt\u0131: Order<\/h3>\n\n\n\nflex-items-order<\/figcaption><\/figure><\/div>\n\n\n\n10- Flex-grow<\/h2>\n\n\n\nFlex-grow, bir \u00f6\u011fenin di\u011fer \u00f6\u011felere g\u00f6re daha b\u00fcy\u00fck olmas\u0131n\u0131 ayarlamak i\u00e7in kullan\u0131l\u0131r. Bu \u00f6zelli\u011fi kulland\u0131\u011f\u0131n\u0131z zaman i\u00e7erisinde bulunan items de\u011ferleri kapsay\u0131c\u0131y\u0131(container) dolduracakt\u0131r. Flex-grow \u00f6zelli\u011finin varsay\u0131lan de\u011feri 0\u2019d\u0131r.<\/p>\n\n\n\n \u00d6rnek olarak t\u00fcm \u00f6\u011felerin(items) de\u011ferini 1 yap\u0131p, son \u00f6\u011fenin de\u011ferini 2 yaparsak, sonu\u00e7 olarak son \u00f6\u011fenin boyutu 2 kat daha b\u00fcy\u00fck olacakt\u0131r.<\/p>\n\n\n\n \u00d6rnek: Flex-grow<\/h3>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Css3 flexbox(Kutu Modeli) - flex-grow<\/title>\n <style> \n .container {display: flex; color: green;border: 1px solid green; margin-top: 20px;}\n .container > div {background-color: #ededed;width: 100px; line-height: 75px;\n margin: 10px; text-align: center;font-size: 25px;}\n \/ flex-grow \/\n .flex-grow1 { flex-grow: 1; }\n .flex-grow2 { flex-grow: 1; }\n .flex-grow3 { flex-grow: 2; }\n <\/style>\n<\/head>\n<body>\n \n <div class=\"container\">\n <div class=\"flex-grow1\">1<\/div> \n <div class=\"flex-grow2\">2<\/div> \n <div class=\"flex-grow3\">3<\/div> \n <\/div> \n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n\u00d6rnek \u00c7\u0131kt\u0131: Flex-grow<\/h2>\n\n\n\nflex-items-flex-grow<\/figcaption><\/figure><\/div>\n\n\n\n11- Flex-shrink<\/h2>\n\n\n\nflex-shrink \u00f6zelli\u011fi flex-grow \u00f6zelli\u011finin tam tersi g\u00f6revi \u00fcstlenmektedir. Yani k\u00fc\u00e7\u00fcltme i\u015flemi i\u00e7in kullan\u0131l\u0131r. Varsay\u0131lan de\u011feri 1\u2019dir. <\/p>\n\n\n\n \u00d6rnek olarak e\u011fer t\u00fcm \u00f6\u011felere 1 de\u011ferini verip son \u00f6\u011feye 2 de\u011ferini verirseniz, k\u00fc\u00e7\u00fclmesi gerekti\u011finde di\u011ferlerine g\u00f6re 2 kat daha \u00f6nce k\u00fc\u00e7\u00fclecektir. <\/p>\n\n\n\n \u00d6rnek: flex-shrink<\/h3>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Css3 flexbox(Kutu Modeli) - flex-shrink<\/title>\n <style> \n .container {display: flex; color: green;border: 1px solid green; margin-top: 20px;}\n .container > div {background-color: #ededed;width: 220px; line-height: 75px;\n margin: 10px; text-align: center;font-size: 25px;}\n \/ flex-shrink \/\n .flex-shrink1 { flex-shrink: 1; }\n .flex-shrink2 { flex-shrink: 1; }\n .flex-shrink3 { flex-shrink: 2; }\n <\/style>\n<\/head>\n<body>\n\n <div class=\"container\">\n <div class=\"flex-shrink1\">1<\/div> \n <div class=\"flex-shrink2\">2<\/div> \n <div class=\"flex-shrink3\">3<\/div> \n <\/div> \n\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n\u00d6rnek \u00c7\u0131kt\u0131: flex-shrink<\/h3>\n\n\n\nflex-items-flex-shrink<\/figcaption><\/figure><\/div>\n\n\n\n12- Flex-basis<\/h2>\n\n\n\nFlex-basis \u00f6zelli\u011fi \u00f6\u011felerin geni\u015fli\u011fini belirlemek i\u00e7in kullan\u0131l\u0131r.(Yeterli geni\u015fli\u011fe sahip olmas\u0131 durumunda) Flex-basis \u00f6zelli\u011fi ile t\u00fcm uzunluk birimleri (px, pt, em vb.) kullan\u0131labilir. Varsay\u0131lan de\u011feri auto\u2019dur. E\u011fer de\u011fer olarak 0 verilirse, sadece i\u00e7indeki de\u011fer kadar geni\u015fli\u011fe sahip olur.<\/p>\n\n\n\n \u00d6rnek olarak 2 div olu\u015ftural\u0131m ve bulundu\u011fu alan\u0131n yar\u0131s\u0131na sahip olmas\u0131n\u0131 sa\u011flayal\u0131m.<\/p>\n\n\n\n \u00d6rnek: Flex-basis<\/h3>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Css3 flexbox(Kutu Modeli) - flex-basis<\/title>\n <style> \n .container {display: flex; color: green;border: 1px solid green; margin-top: 20px;}\n .container > div {background-color: #ededed;width: 220px; line-height: 75px;\n margin: 10px; text-align: center;font-size: 25px;}\n \/ flex-basis *\/\n .flex-basis1 { flex-basis: 50%; }\n .flex-basis2 { flex-basis: 50%; } \n <\/style>\n<\/head>\n<body>\n\n <div class=\"container\">\n <div class=\"flex-basis1\">1<\/div> \n <div class=\"flex-basis2\">2<\/div> \n <\/div> \n\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n\u00d6rnek \u00c7\u0131kt\u0131: Flex-basis<\/h3>\n\n\n\nflex-items-flex-basis<\/figcaption><\/figure><\/div>\n\n\n\n13- Flex <\/h2>\n\n\n\nFlex<\/strong> \u00f6zelli\u011fi, s\u0131ras\u0131yla flex-grow<\/strong>, flex-shrink<\/strong> ve flex-basis<\/strong> \u00f6zelliklerinin k\u0131sa kullan\u0131m\u0131d\u0131r. \u0130lk de\u011feri zorunlu olarak tan\u0131mlanmal\u0131d\u0131r. shrink ve basis de\u011ferlerini belirtmek zorunlu de\u011fildir. Varsay\u0131lan olarak 0 1 auto de\u011ferine sahiptir. <\/p>\n\n\n\n \u00d6rnek olarak \u00e7ok fazla tercih edilen flex-grow: 1; flex-shrink:1; flex-basis: auto; tan\u0131mlamas\u0131n\u0131 yapal\u0131m.<\/p>\n\n\n\n \u00d6rnek: Flex<\/h3>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Css3 flexbox(Kutu Modeli) - flex-shrink<\/title>\n <style> \n .container {display: flex; color: green;border: 1px solid green; margin-top: 20px;}\n .container > div {background-color: #ededed;width: 220px; line-height: 75px;\n margin: 10px; text-align: center;font-size: 25px; flex: 1 1 auto;}\n <\/style>\n<\/head>\n<body>\n\n <div class=\"container\">\n <div>1<\/div> \n <div>2<\/div> \n <div>3<\/div> \n <\/div> \n\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n\u00d6rnek \u00c7\u0131kt\u0131: Flex<\/h3>\n\n\n\nflex-items-flex<\/figcaption><\/figure><\/div>\n\n\n\nVe mutlu sona geldik arkada\u015flar, buraya kadar geldi\u011finize g\u00f6re flex yap\u0131s\u0131 i\u00e7in g\u00fczel yol kat ettiniz demektir. Yorumlarda soru cevap yaparak anlamad\u0131\u011f\u0131n\u0131z yerleri sorabilirsiniz. Haz\u0131rlarken biraz yoruldum fakat birileri i\u00e7in faydal\u0131 olaca\u011f\u0131n\u0131 umuyorum. Bir sonraki e\u011fitimde g\u00f6r\u00fc\u015fmek \u00fczere ba\u015far\u0131lar dilerim.<\/p>\n\n\n\n <\/p>\n\n\n\n <\/p>\n\n\n\n <\/p>\n","protected":false},"excerpt":{"rendered":" Bu yaz\u0131mda sizlere CSS Flexbox Layout Module (CSS Flexbox Yerle\u015fim Mod\u00fcl\u00fc) ile ilgili detayl\u0131 kullan\u0131mlar\u0131n\u0131 ele alaca\u011f\u0131z. Bu yaz\u0131n\u0131n sonunda CSS flexbox nedir, flexbox nas\u0131l kullan\u0131l\u0131r, flexbox nerelerde kullan\u0131l\u0131r, flew-wrap nedir, flex-direction nedir, flex-wrap nedir, flex-flow nedir, justify-content nedir, align-items nedir, align-content nedir gibi sorular\u0131n\u0131za yan\u0131t bulabileceksiniz. Flex yap\u0131s\u0131 alt\u0131nda hem kapsay\u0131c\u0131 (container) i\u00e7in hemde […]<\/p>\n","protected":false},"author":1,"featured_media":7496,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"tdm_status":"","tdm_grid_status":""},"categories":[3809],"tags":[3964,523,3819,3820,3917,3916,3383,3823,3976,3920,3919,3974,3968,3959,3961,3966,3967,3960,3975,3918,3915,3965],"_links":{"self":[{"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/posts\/7344"}],"collection":[{"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/comments?post=7344"}],"version-history":[{"count":58,"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/posts\/7344\/revisions"}],"predecessor-version":[{"id":7501,"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/posts\/7344\/revisions\/7501"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/media\/7496"}],"wp:attachment":[{"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/media?parent=7344"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/categories?post=7344"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/tags?post=7344"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

<\/h3>\n\n\n\nYukar\u0131da bahsetmi\u015f oldu\u011fumuz flex-direction \u00f6zelli\u011fi ile ilgili bir \u00f6rnek yapal\u0131m ve flex-direction \u00f6zelli\u011finin alm\u0131\u015f oldu\u011fu de\u011ferlerin nas\u0131l g\u00f6z\u00fckece\u011fini inceleyelim.<\/p>\n\n\n\n

<\/h3>\n\n\n\nYukar\u0131da bahsetmi\u015f oldu\u011fumuz flex-wrap \u00f6zelli\u011fi ile ilgili bir \u00f6rnek yapal\u0131m ve flex-wrap \u00f6zelli\u011finin alm\u0131\u015f oldu\u011fu de\u011ferlerin nas\u0131l g\u00f6z\u00fckece\u011fini inceleyelim.<\/p>\n\n\n\n

<\/h3>\n\n\n\n
Yukar\u0131da bahsetmi\u015f oldu\u011fumuz flex-direction \u00f6zelli\u011fi ile ilgili bir \u00f6rnek yapal\u0131m ve flex-direction \u00f6zelli\u011finin alm\u0131\u015f oldu\u011fu de\u011ferlerin nas\u0131l g\u00f6z\u00fckece\u011fini inceleyelim.<\/p>\n\n\n\n

<\/h3>\n\n\n\n
Yukar\u0131da bahsetmi\u015f oldu\u011fumuz flex-wrap \u00f6zelli\u011fi ile ilgili bir \u00f6rnek yapal\u0131m ve flex-wrap \u00f6zelli\u011finin alm\u0131\u015f oldu\u011fu de\u011ferlerin nas\u0131l g\u00f6z\u00fckece\u011fini inceleyelim.<\/p>\n\n\n\n