CSS Flex-Box Kullanımı
CSS FLEXBOX KULLANIMI
Merhaba, gün geçtikçe gelişen teknolojide internet siteler farklı ekranlarda ve boyutlarda görüntülenmektedir. Oluşturduğumuz sitelerin
tasarım olarak her ekrana uyarlı olması gerekmekte ki bu şekilde kullanım kolaylığı sağlansın. Bu sebebten css flex
özelliği
bizlerin esnek şekilde kutular tasarlamamızı sağlamaktadır. Kutular her ekranda görüntülendiğinde kutu boyutları kendinden boyutlanarak
içerisindeki nesnlerin kutuya göre boyutlandırmasını sağlamaktayız. Bu bize bir çok platformda sitemizi yayınlayabilir hale getiriyor. Tabi
flex özelliğini en önemli sıkıntılarında biride eski versiyon tarayıcılarda çalışmıyor yani desteklenmiyor oluşudur. Bu sebepten bir kaç yıl
öncesine kadar fazla tercik edilmiyordu. Tarayıcıler gün geçtikçe kendilerini güncellediler ve şuandaki güncel versiyon bir çok tarayıcı flex özelliğiniz desteklemektedir.
Şimdi bunla ilk örneğimizi yapalım.
Css flex Kullanımı
Display: felx kullanımı belirtilen kutunun kapsayan içeriklerin flex yani esnek yapıda olacağını belirlemektedir. felx özelliği verilen nesne yatayda inline dikeyde ise block olarak nesne içerisinde yan yana gelirler.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <style> div.main{ display: flex; width: 50%; height: 10vh; background-color: silver; } div.main > div{ padding:1rem; } div.kutu-1{ background-color: sienna; } div.kutu-2{ background-color:rgb(28, 173, 199); } div.kutu-3{ background-color: rgb(201, 6, 201); } </style> <div class="main"> <div class="kutu-1">Kutu-1</div> <div class="kutu-2">Kutu-2</div> <div class="kutu-3">Kutu-3</div> </div> |
Yukardaki örnekte bir tane main yani 3 tane div kapsayan ana div oluşturduk. Bu .main div klasında tanımlamış olduğumuz display:flex
bu kutun ve kapsadığı elemanların
flex yapısında olmasını tanımladı. div.main içerisindeki diğer üç tane div elemanı ise yükselik belirtmememize rağmen main ile aynı boyutta oldular. Yine farkettiyseniz
div elementi block elment olmasına rağman inline element yapısında yan yana dizildiler.
Css flex Tanımlaması
Yukarıda oluşturmuş olduğumuz div.main elemetin kapsadığı elementlerin eşit bir şekilde yatay düzlemde dağılmasını istiyorsak main div altındaki
elementlere flex:1;
şeklinde tanımlamamız yeterlidir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <style> body{ margin:0; padding:0; } div.main{ display: flex; width: 50%; height: 15vh; border:1px solid rgba(0, 0, 0, .125); background-color: silver; } /**********************/ div.main div{ flex: 1; } /**********************/ div.kutu-1{ background-color: sienna; } div.kutu-2{ background-color:rgb(28, 173, 199); } div.kutu-3{ background-color: rgb(201, 6, 201); } </style> <div class="main"> <div class="kutu-1">Kutu-1</div> <div class="kutu-2">Kutu-2</div> <div class="kutu-3">Kutu-3</div> </div> |
Css flex-basis Kullanımı
flex-basis kullanımı ile flex kutu içerisindeki elementlerin boyutlarını belirleyebiliyoruz. Aşağıdaki örnekte ilk kutunun boyutunu 40% vererek kutunun yüzde kırklık bir alan kaplamasını sağladık.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <style> div.main{ display: flex; width: 50%; height: 10vh; background-color: silver; } div.main div{ flex: 1; } /**********************/ div.main div:first-child{ flex-basis: 40%; } /**********************/ div.kutu-1{ background-color: sienna; } div.kutu-2{ background-color:rgb(28, 173, 199); } div.kutu-3{ background-color: rgb(201, 6, 201); } </style> <div class="main"> <div class="kutu-1">Kutu-1</div> <div class="kutu-2">Kutu-2</div> <div class="kutu-3">Kutu-3</div> </div> |
Css flex-direction Kullanımı
flex-direction
oluşturduğumuz esnek kutuların yönünü belirlememizde kullanıyoruz. Aldığı değerler aşağıda sıralanmıştır.
Değer | Açıklama |
row | Sola yatay sıralı bir şekilde konumlanmasını sağlar |
row-reverse | Sağa yatay sıralı bir şekilde konumlanmasını sağlar. |
column | Üsten aşağı dikey sıralı bir şekilde konumlanmasını sağlar. |
column-reverse | Aşağıdan yukarı dikey sıralı bir şekilde konumlanmasını sağlar. |
initial | Varsayılan şekilde sıralanmasını sağlar |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 | div.main{ display: flex; float: left; box-sizing: border-box; width: 25%; height: 25vh; border:1px solid rgba(0, 0, 0, .125); background-color: silver; overflow: hidden; } div.main div{ height: 50px; width: 50px; } div.main:nth-of-type(1){ flex-flow: row wrap; } div.main:nth-of-type(2){ flex-flow: row-reverse wrap; } div.main:nth-of-type(3){ flex-flow: column wrap; } div.main:nth-of-type(4){ flex-flow: column-reverse wrap; } div.main:nth-of-type(5){ flex-flow: row nowrap; background-color: lightcoral; } div.main:nth-of-type(6){ flex-flow: row-reverse nowrap; background-color: lightblue; } div.main:nth-of-type(7){ flex-flow: column nowrap; background-color: magenta; } div.main:nth-of-type(8){ flex-flow: column-reverse nowrap; background-color: lightseagreen; } div.main:nth-of-type(9){ flex-flow: column wrap-reverse; background-color: lightseagreen; } div.main:nth-of-type(10){ flex-flow: column-reverse nowrap; background-color: lightseagreen; } div.main:nth-of-type(11){ flex-flow: row wrap-reverse; background-color: lightseagreen; } div.main:nth-of-type(12){ flex-flow: row-reverse wrap-reverse; background-color: lightseagreen; } div.kutu-1{ background-color: sienna; } div.kutu-2{ background-color:rgb(28, 173, 199); } div.kutu-3{ background-color: rgb(201, 6, 201); } div.kutu-4{ background-color: rgb(50, 24, 148); } div.kutu-5{ background-color: rgb(27, 172, 230); } div.kutu-6{ background-color: rgb(89, 148, 224); } div.kutu-7{ background-color: rgb(201, 6, 201); } div.kutu-8{ background-color: rgb(48, 214, 145); } div.kutu-9{ background-color: rgb(174, 209, 20); } div.kutu-10{ background-color: rgb(93, 158, 9); } div.kutu-11{ background-color: rgb(23, 13, 114); } div.kutu-12{ background-color: rgb(39, 125, 151); } <div class="main"> <div class="kutu-1">1</div> <div class="kutu-2">2</div> <div class="kutu-3">3</div> <div class="kutu-4">4</div> <div class="kutu-5">5</div> <div class="kutu-6">6</div> <div class="kutu-7">7</div> <div class="kutu-8">8</div> <div class="kutu-9">9</div> <div class="kutu-10">10</div> <div class="kutu-11">11</div> <div class="kutu-12">12</div> </div> <div class="main"> <div class="kutu-1">1</div> <div class="kutu-2">2</div> <div class="kutu-3">3</div> <div class="kutu-4">4</div> <div class="kutu-5">5</div> <div class="kutu-6">6</div> <div class="kutu-7">7</div> <div class="kutu-8">8</div> <div class="kutu-9">9</div> <div class="kutu-10">10</div> <div class="kutu-11">11</div> <div class="kutu-12">12</div> </div> <div class="main"> <div class="kutu-1">1</div> <div class="kutu-2">2</div> <div class="kutu-3">3</div> <div class="kutu-4">4</div> <div class="kutu-5">5</div> <div class="kutu-6">6</div> <div class="kutu-7">7</div> <div class="kutu-8">8</div> <div class="kutu-9">9</div> <div class="kutu-10">10</div> <div class="kutu-11">11</div> <div class="kutu-12">12</div> </div> <div class="main"> <div class="kutu-1">1</div> <div class="kutu-2">2</div> <div class="kutu-3">3</div> <div class="kutu-4">4</div> <div class="kutu-5">5</div> <div class="kutu-6">6</div> <div class="kutu-7">7</div> <div class="kutu-8">8</div> <div class="kutu-9">9</div> <div class="kutu-10">10</div> <div class="kutu-11">11</div> <div class="kutu-12">12</div> </div> <div class="main"> <div class="kutu-1">1</div> <div class="kutu-2">2</div> <div class="kutu-3">3</div> <div class="kutu-4">4</div> <div class="kutu-5">5</div> <div class="kutu-6">6</div> <div class="kutu-7">7</div> <div class="kutu-8">8</div> <div class="kutu-9">9</div> <div class="kutu-10">10</div> <div class="kutu-11">11</div> <div class="kutu-12">12</div> </div> <div class="main"> <div class="kutu-1">1</div> <div class="kutu-2">2</div> <div class="kutu-3">3</div> <div class="kutu-4">4</div> <div class="kutu-5">5</div> <div class="kutu-6">6</div> <div class="kutu-7">7</div> <div class="kutu-8">8</div> <div class="kutu-9">9</div> <div class="kutu-10">10</div> <div class="kutu-11">11</div> <div class="kutu-12">12</div> </div> <div class="main"> <div class="kutu-1">1</div> <div class="kutu-2">2</div> <div class="kutu-3">3</div> <div class="kutu-4">4</div> <div class="kutu-5">5</div> <div class="kutu-6">6</div> <div class="kutu-7">7</div> <div class="kutu-8">8</div> <div class="kutu-9">9</div> <div class="kutu-10">10</div> <div class="kutu-11">11</div> <div class="kutu-12">12</div> </div> <div class="main"> <div class="kutu-1">1</div> <div class="kutu-2">2</div> <div class="kutu-3">3</div> <div class="kutu-4">4</div> <div class="kutu-5">5</div> <div class="kutu-6">6</div> <div class="kutu-7">7</div> <div class="kutu-8">8</div> <div class="kutu-9">9</div> <div class="kutu-10">10</div> <div class="kutu-11">11</div> <div class="kutu-12">12</div> </div> <div class="main"> <div class="kutu-1">1</div> <div class="kutu-2">2</div> <div class="kutu-3">3</div> <div class="kutu-4">4</div> <div class="kutu-5">5</div> <div class="kutu-6">6</div> <div class="kutu-7">7</div> <div class="kutu-8">8</div> <div class="kutu-9">9</div> <div class="kutu-10">10</div> <div class="kutu-11">11</div> <div class="kutu-12">12</div> </div> <div class="main"> <div class="kutu-1">1</div> <div class="kutu-2">2</div> <div class="kutu-3">3</div> <div class="kutu-4">4</div> <div class="kutu-5">5</div> <div class="kutu-6">6</div> <div class="kutu-7">7</div> <div class="kutu-8">8</div> <div class="kutu-9">9</div> <div class="kutu-10">10</div> <div class="kutu-11">11</div> <div class="kutu-12">12</div> </div> <div class="main"> <div class="kutu-1">1</div> <div class="kutu-2">2</div> <div class="kutu-3">3</div> <div class="kutu-4">4</div> <div class="kutu-5">5</div> <div class="kutu-6">6</div> <div class="kutu-7">7</div> <div class="kutu-8">8</div> <div class="kutu-9">9</div> <div class="kutu-10">10</div> <div class="kutu-11">11</div> <div class="kutu-12">12</div> </div> <div class="main"> <div class="kutu-1">1</div> <div class="kutu-2">2</div> <div class="kutu-3">3</div> <div class="kutu-4">4</div> <div class="kutu-5">5</div> <div class="kutu-6">6</div> <div class="kutu-7">7</div> <div class="kutu-8">8</div> <div class="kutu-9">9</div> <div class="kutu-10">10</div> <div class="kutu-11">11</div> <div class="kutu-12">12</div> </div> |
Örnek için tıklayınız.
Css flex-grow Kullanımı
Esnek kutu modelinde nesnelerin bir birine oranlar ne kadar kat büyüklükte olacağını belirliyoruz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | div.main{ display: flex; flex-direction: row; width: 50%; height: 10vh; background-color: silver; } div.kutu-1{ background-color: sienna; flex-grow: 1; } div.kutu-2{ background-color:rgb(28, 173, 199); flex-grow: 4; } div.kutu-3{ background-color: rgb(201, 6, 201); flex-grow: 1; } <div class="main"> <div class="kutu-1">1</div> <div class="kutu-2">2</div> <div class="kutu-3">3</div> </div> |
Örnek için tıklayınız.
Css flex-shrink Kullanımı
Esnek kutu modelinde flex-shrink
belirlenen oranda diğer nesnelerden küçük olmasını sağlıyor.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <style> #main { width: 350px; height: 100px; border: 1px solid #c3c3c3; display: flex; } #main div { flex-grow: 1; flex-shrink: 1; flex-basis: 100px; } #main div:nth-of-type(2) { flex-shrink: 3; } </style> <div id="main"> <div style="background-color:coral;"></div> <div style="background-color:lightblue;"></div> <div style="background-color:khaki;"></div> <div style="background-color:pink;"></div> <div style="background-color:lightgrey;"></div> </div> |
Örnek için tıklayınız.
Css flex-wrap Kullanımı
Esnek kutu içerisindeki nesnelerin dikeyde veya yatayda alt satıra inmeden sıralanmasını sağlar. Aynı zamanda bu sıralama ters istikamettede yapılmasını sağlamaktadır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | <style> div.main{ width: 50%; height: 300px; border: 5px solid #444343; display: flex; margin:1rem; } div.main div{ height: 100px; width: 100px; } div.main:nth-of-type(1){ flex-wrap:wrap; } div.main:nth-of-type(2){ flex-wrap: nowrap; } div.main:nth-of-type(3){ flex-wrap: wrap-reverse; } div.kutu-1{ background-color: sienna; } div.kutu-2{ background-color:rgb(28, 173, 199); } div.kutu-3{ background-color: rgb(201, 6, 201); } </style> <div class="main"> <div class="kutu-1">1</div> <div class="kutu-2">2</div> <div class="kutu-3">3</div> <div class="kutu-1">4</div> <div class="kutu-2">5</div> <div class="kutu-3">6</div> <div class="kutu-1">7</div> <div class="kutu-2">8</div> <div class="kutu-3">9</div> <div class="kutu-1">10</div> <div class="kutu-2">12</div> <div class="kutu-3">13</div> </div> <div class="main"> <div class="kutu-1">1</div> <div class="kutu-2">2</div> <div class="kutu-3">3</div> <div class="kutu-1">4</div> <div class="kutu-2">5</div> <div class="kutu-3">6</div> <div class="kutu-1">7</div> <div class="kutu-2">8</div> <div class="kutu-3">9</div> <div class="kutu-1">10</div> <div class="kutu-2">12</div> <div class="kutu-3">13</div> </div> <div class="main"> <div class="kutu-1">1</div> <div class="kutu-2">2</div> <div class="kutu-3">3</div> <div class="kutu-1">4</div> <div class="kutu-2">5</div> <div class="kutu-3">6</div> <div class="kutu-1">7</div> <div class="kutu-2">8</div> <div class="kutu-3">9</div> <div class="kutu-1">10</div> <div class="kutu-2">12</div> <div class="kutu-3">13</div> </div> |
Örnek için tıklayınız.
Yukarıdaki örnekdeki ilk kutuda wrap
özelliği kutuların aşağı düşmeden yan yana dizilmesini sağladı. İkinci örnekte ise verilen nowrap
özelliği ile kutular belilenen genişliği geçtiğinde bir alt satıra inmektedir.Üçüncü kutudaysa verilen wrap-reverse
ile kutu sıralaması aşağıdan yukarı doğru üst satıra çıkarak ilerlemektedir.
flex-box justify-content Kullanımı
Flex box esnek kutu modelinde nesnelerin yatayda ortalanmasını sağlmak için kullanılır. justify-content
direktifi flex-start, flex-end, center, space-around, space-between, space-evenly değerlerini almaktadır. Aşağıdaki örnekte bu konuyu daha iyi kavramanız için örnek bi uygulama bulunamaktadır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | <style> body{ margin:0; padding:0; } div.main{ width: 100%; height: 100px; display: flex; flex-direction: row; background-color:silver; border:2px solid blue; padding:.5rem; } div.main:nth-of-type(1){ justify-content: flex-start; /* sola yaslandı */ } div.main:nth-of-type(2){ justify-content: center; /* kutular ortalandı */ } div.main:nth-of-type(3){ justify-content: flex-end; /* kutular sağa yaslandı */ } div.main:nth-of-type(4){ justify-content: space-around; /* Kutların sağından ve solunda belirli bir boşlukla sıralandı*/ } div.main:nth-of-type(5){ justify-content:space-between; /* ilk ve son kutular sağa sola yaslandı diğer kutular aralıklı sıralandı*/ } div.main:nth-of-type(6){ justify-content:space-evenly; /* Sağında ve solunda eşit oran boşluklarla sıraladı*/ } div.main > div{ flex-basis: 100px; height: 100px; background-color: skyblue; border:1px solid white; } </style> <div class="main"> <div class="kutu-1">Kutu-1</div> <div class="kutu-2">Kutu-2</div> <div class="kutu-3">Kutu-3</div> </div> <div class="main"> <div class="kutu-1">Kutu-1</div> <div class="kutu-2">Kutu-2</div> <div class="kutu-3">Kutu-3</div> </div> <div class="main"> <div class="kutu-1">Kutu-1</div> <div class="kutu-2">Kutu-2</div> <div class="kutu-3">Kutu-3</div> </div> <div class="main"> <div class="kutu-1">Kutu-1</div> <div class="kutu-2">Kutu-2</div> <div class="kutu-3">Kutu-3</div> </div> <div class="main"> <div class="kutu-1">Kutu-1</div> <div class="kutu-2">Kutu-2</div> <div class="kutu-3">Kutu-3</div> </div> <div class="main"> <div class="kutu-1">Kutu-1</div> <div class="kutu-2">Kutu-2</div> <div class="kutu-3">Kutu-3</div> </div> |
Örnek için tıklayınız.
flex-box align-content Kullanımı
justify-content
ile nesneleri yatayda hizalarken align-content
ile de nesnelerin dikeyde hizalanmasını sağlıyoruz. aling-content
flex-start, center, flex-end, space-around, space-between, space-evenly, stretch gibi değerler almaktadır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 | <style> body{ margin:0; padding:0; } div.main{ float: left; width: 25%; height: 25vh; display: flex; flex-direction: row; flex-wrap: wrap; background-color:silver; border:2px solid blue; } div.main:nth-of-type(1){ align-content: flex-start; /* dikeyde en üstte */ } div.main:nth-of-type(2){ align-content: center; /* dikeyde ortalandı */ } div.main:nth-of-type(3){ align-content: flex-end; /* dikeyde en altta */ } div.main:nth-of-type(4){ align-content: space-around; /* Kutların sağından ve solunda belirli bir boşlukla dikeyde hizaladı*/ } div.main:nth-of-type(5){ align-content:space-between; /* ilk ve son kutular yukarıda ve aşağıda yaslandı diğer kutular aralıklı sıralandı*/ } div.main:nth-of-type(6){ align-content:space-evenly; /* Yukarıda ve aşağıda eşit oran boşluklarla sıraladı*/ } div.main:nth-of-type(7){ align-content:stretch; /* tüm boşlukları eşit oran boşluklarda dolduruldu */ } div.main > div{ flex-basis: 100px; padding:.5rem; background-color: skyblue; border:1px solid white; } </style> <div class="main"> <div class="kutu-1">Kutu-1</div> <div class="kutu-2">Kutu-2</div> <div class="kutu-3">Kutu-3</div> <div class="kutu-1">Kutu-4</div> <div class="kutu-2">Kutu-5</div> <div class="kutu-3">Kutu-6</div> <div class="kutu-1">Kutu-7</div> <div class="kutu-2">Kutu-8</div> <div class="kutu-3">Kutu-9</div> </div> <div class="main"> <div class="kutu-1">Kutu-1</div> <div class="kutu-2">Kutu-2</div> <div class="kutu-3">Kutu-3</div> <div class="kutu-1">Kutu-4</div> <div class="kutu-2">Kutu-5</div> <div class="kutu-3">Kutu-6</div> <div class="kutu-1">Kutu-7</div> <div class="kutu-2">Kutu-8</div> <div class="kutu-3">Kutu-9</div> </div> <div class="main"> <div class="kutu-1">Kutu-1</div> <div class="kutu-2">Kutu-2</div> <div class="kutu-3">Kutu-3</div> <div class="kutu-1">Kutu-4</div> <div class="kutu-2">Kutu-5</div> <div class="kutu-3">Kutu-6</div> <div class="kutu-1">Kutu-7</div> <div class="kutu-2">Kutu-8</div> <div class="kutu-3">Kutu-9</div> </div> <div class="main"> <div class="kutu-1">Kutu-1</div> <div class="kutu-2">Kutu-2</div> <div class="kutu-3">Kutu-3</div> <div class="kutu-1">Kutu-4</div> <div class="kutu-2">Kutu-5</div> <div class="kutu-3">Kutu-6</div> <div class="kutu-1">Kutu-7</div> <div class="kutu-2">Kutu-8</div> <div class="kutu-3">Kutu-9</div> </div> <div class="main"> <div class="kutu-1">Kutu-1</div> <div class="kutu-2">Kutu-2</div> <div class="kutu-3">Kutu-3</div> <div class="kutu-1">Kutu-4</div> <div class="kutu-2">Kutu-5</div> <div class="kutu-3">Kutu-6</div> <div class="kutu-1">Kutu-7</div> <div class="kutu-2">Kutu-8</div> <div class="kutu-3">Kutu-9</div> </div> <div class="main"> <div class="kutu-1">Kutu-1</div> <div class="kutu-2">Kutu-2</div> <div class="kutu-3">Kutu-3</div> <div class="kutu-1">Kutu-4</div> <div class="kutu-2">Kutu-5</div> <div class="kutu-3">Kutu-6</div> <div class="kutu-1">Kutu-7</div> <div class="kutu-2">Kutu-8</div> <div class="kutu-3">Kutu-9</div> </div> <div class="main"> <div class="kutu-1">Kutu-1</div> <div class="kutu-2">Kutu-2</div> <div class="kutu-3">Kutu-3</div> <div class="kutu-1">Kutu-4</div> <div class="kutu-2">Kutu-5</div> <div class="kutu-3">Kutu-6</div> <div class="kutu-1">Kutu-7</div> <div class="kutu-2">Kutu-8</div> <div class="ku |
Örnek için tıklayınız.
flex-box align-items Kullanımı
Flex-box kullanımında son olarak align-items
kullanımı öğreneceğiz. Nesneleri kendi içerisinde yatay düzlemde, dikey hizalamak için kullanmaktayız. align-content
direktifi flex-end, flex-start, center, baseline, stretch gibi değerler almaktadır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | div.main{ width: 100%; background-color: silver; padding:.5rem; display: flex; margin-bottom:1rem; } div.main:nth-of-type(2){ align-items: flex-end; } div.main:nth-of-type(3){ align-items: flex-start; } div.main:nth-of-type(4){ align-items: center; } div.main:nth-of-type(5){ align-items:baseline; } div.main:nth-of-type(6){ align-items:stretch; } div.main h1,h3,h5{ background-color: yellow; margin:0; } <div class="main"> <h5>Başlık</h5> <h3>Başlık</h3> <h1>Başlık</h1> </div> <div class="main"> <h5>Başlık</h5> <h3>Başlık</h3> <h1>Başlık</h1> </div> <div class="main"> <h5>Başlık</h5> <h3>Başlık</h3> <h1>Başlık</h1> </div> <div class="main"> <h5>Başlık</h5> <h3>Başlık</h3> <h1>Başlık</h1> </div> <div class="main"> <h5>Başlık</h5> <h3>Başlık</h3> <h1>Başlık</h1> </div> <div class="main"> <h5>Başlık</h5> <h3>Başlık</h3> <h1>Başlık</h1> </div> |
Örnek için tıklayınız.
Evet bunuda öğrendiğimize göre alıştırma yaparak konuyu pekiştirmemiz gerekmektedir. Aşağıda sizin için hazırlamış olduğum flex-box uygulamasını kullanarak öğreniminizi kolaylaştırabilirsiniz.
FLEX-BOX UYGULAMASI İÇİN TIKLAYINIZ.