Flex yapısı altında hem kapsayıcı (container) için hemde içindeki öğeler(items) için birden fazla flex özelliği bulunmaktadır. İnceleyeceğimiz flex özellikleri maddeler halinde aşağıda verilmiştir.
CSS Flexbox (Flexible Box) eğitim videosu içerisinde ele alınan konular madde halinde aşağıda verilmişdir. Dilerseniz aşağıda bulunan tüm flexbox yapısına ait özelliklerin yazılı anlatımına buradan ulaşarak detayları okuyabilir ve uygulamaları inceleyebilirsiniz. Eğitim video içeriğinde de aynı konuların anlatımı yer almaktadır. İçerik aynıdır.
Bu yazımda sizlere CSS Flexbox Layout Module (CSS Flexbox Yerleşim Modülü) ile ilgili detaylı kullanımlarını ele alacağız. Bu yazının sonunda CSS flexbox nedir, flexbox nasıl kullanılır, flexbox nerelerde kullanılır, flew-wrap nedir, flex-direction nedir, flex-wrap nedir, flex-flow nedir, justify-content nedir, align-items nedir, align-content nedir gibi sorularınıza yanıt bulabileceksiniz.
Flex yapısı altında hem kapsayıcı (container) için hemde içindeki öğeler(items) için birden fazla flex özelliği bulunmaktadır. İnceleyeceğimiz flex özellikleri maddeler halinde aşağıda verilmiştir.
Yukarıda bulunan maddelerden 9 ve sonrası öğeler(items) için olan özelliklerdir. Anlatımın sonuna doğru ne demek istediğimi anlayacaksınız.
Flexbox (Esnek kutu modeli), boyutları bilinmeyen, dinamik alanları daha kolay yönetmek için Css3 ile birlikte hayatımıza girdi. Flex box’tan önce öğeleri sağa-sola dayamak için float kullanırdı. Float özellikleri ile kutularımızı yan yana alabiliyorduk fakat çok fazla esneklik sağlayamıyordu. Bunlardan en büyük problem ise dikey ortalama yapmak.
Flex yapısını kullanmamızın en büyük sebebi flex yapısı ile kapsayıcıya(container) ve içindeki öğelerine esneklik getirebiliyoruz. Flex yapısı ile kutu modellerimizin yatay ve dikey hizalarda nasıl görüneceğini, öğelerin kendi içinde hizalamalarını ve sıralamalarının değiştirilmesi gibi muhteşem özellikleri bulunuyor.
Bu özellik aslında daha önce kullandığımız display özelliği. Flex ile birlikte yeni değerler alarak esnek kapsayıcı(container) kullanılmaya başlandı. Esnek modeller oluşturmak için display özelliğine flex veya flex-inline olarak tanımlama yapmamız yeterli. Flex ile flex-inline yapılarının farkı ise yine display özelliği olan block ve inline yapıları ile aynı.
Aşağıda display: flex; tanımlaması yaparak bir kapsayıcı örneği verelim. Bundan sonraki örneklerde bu kod üzerinden ilerleyeceğiz.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Css3 Flexbox(Kutu Modeli) - Kapsayıcı</title>
<style>
.flex-container {
display: flex;
color: green;
border: 2px solid green;
}
.flex-container > div {
background-color: #ededed;
width: 100px;
line-height: 75px;
margin: 10px;
text-align: center;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Yukarıda yazmış olduğumuz flex tanımlaması ile oluşan ekran görüntüsü aşağıdaki gibi olacaktır.
Öğelerin(items) yönünü belirlemek için flex-direction kullanılır. Flex-direction varsayılan olarak row değerine sahiptir ve kapsayıcı içinde bulunan tüm öğeler(items) yan yana listelenir. Aşağıda bu özelliğin aldığı değerleri inceleyelim ve sonrasında bu değerlerin kullanımına bakalım.
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
Yukarıda bahsetmiş olduğumuz flex-direction özelliği ile ilgili bir örnek yapalım ve flex-direction özelliğinin almış olduğu değerlerin nasıl gözükeceğini inceleyelim.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Css3 Flexbox(Kutu Modeli) - flex-direction</title>
<style>
.container {
display: flex;
color: green;
border: 1px solid green;
margin-top: 20px;
}
.container > div {
background-color: #ededed;
width: 100px;
line-height: 75px;
margin: 10px;
text-align: center;
font-size: 25px;
}
.flex1 {flex-direction: row;}
.flex2 {flex-direction: row-reverse;}
.flex3 {flex-direction: column;}
.flex4 {flex-direction: column-reverse;}
</style>
</head>
<body>
<div class="container flex1 ">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container flex2 ">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container flex3 ">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container flex4 ">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Flex kapsayıcı(container) içerisinde bulunan öğeler(items) varsayılan olarak esnek öğeler tek bir satıra sığmaya çalışırlar fakat bazı durumlarda tek satıra sığmayan içeriklerimiz olabilmektedir. Bu gibi durumlarda öğeleri(items) birden fazla satıra yaymak için flex-wrap özelliğinden faydalanırız.
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
Yukarıda bahsetmiş olduğumuz flex-wrap özelliği ile ilgili bir örnek yapalım ve flex-wrap özelliğinin almış olduğu değerlerin nasıl gözükeceğini inceleyelim.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Css3 Flexbox(Kutu Modeli) - flex-direction</title>
<style>
.container {display: flex; color: green;border: 1px solid green; margin-top: 20px;}
.container > div {background-color: #ededed;width: 100px; line-height: 75px;margin: 10px; text-align: center;font-size: 25px;}
.flex-wrap1 {flex-wrap: wrap;}
.flex-wrap2 {flex-wrap: nowrap;}
.flex-wrap3 {flex-wrap: wrap-reverse;}
</style>
</head>
<body>
<div class="container flex-wrap1 ">
<div>1</div> <div>2</div> <div>3</div> <div>4</div>
<div>5</div> <div>6</div> <div>7</div> <div>8</div>
</div>
<div class="container flex-wrap2 ">
<div>1</div> <div>2</div> <div>3</div> <div>4</div>
<div>5</div> <div>6</div> <div>7</div> <div>8</div>
</div>
<div class="container flex-wrap3 ">
<div>1</div> <div>2</div> <div>3</div> <div>4</div>
<div>5</div> <div>6</div> <div>7</div> <div>8</div>
</div>
</body>
</html>
Flex-flow özelliği flex-direction ve flex wrap özelliklerinin kullanımı için kısa bir yoldur. Her iki özellik(flex-direction ve flex wrap) değerini tek seferde tanımlamak için kullanılır.
.container {
flex-direction: column;
flex-wrap: wrap;
}
.container {
flex-flow: wrap row;
}
Yukarıda bahsetmiş olduğumuz flex-flow özelliği ile ilgili bir örnek yapalım ve flex-flow özelliğinin almış olduğu değerlerin nasıl gözükeceğini inceleyelim.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Css3 Flexbox(Kutu Modeli) - flex-flow</title>
<style>
.container {display: flex; color: green;border: 1px solid green; margin-top: 20px;}
.container > div {background-color: #ededed;width: 100px; line-height: 75px;margin: 10px; text-align: center;font-size: 25px;}
.flex-flow {flex-flow: wrap row;}
</style>
</head>
<body>
<div class="container flex-flow ">
<div>1</div> <div>2</div> <div>3</div> <div>4</div>
<div>5</div> <div>6</div> <div>7</div> <div>8</div>
</div>
</body>
</html>
Justify-content öğelerin(items) yatay eksende hizasını ayarlamak-konumlandırmak için kullanılır.
.container {
justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly;
}
Yukarıda bahsettiğimiz justify-content özelliğinin aldığı farklı değerler de mevcut fakat bazıları tarayıcılar tarafından henüz desteklenmemektedir. Bu değerlerin tümünü incelemek için buraya tıklayınız.
NOT: space-evenly tanımlamasının tarayıcı uyum problemleri olduğu için şuan kullanmanızı tavsiye etmiyorum. Microsoft İnternet Explorer, Edge tarafından desteklenmemektedir.
Yukarıda bahsetmiş olduğumuz justify-content özelliği ile ilgili bir örnek yapalım ve justify-content özelliğinin almış olduğu değerlerin nasıl gözükeceğini inceleyelim.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Css3 Flexbox(Kutu Modeli) - justify-content</title>
<style>
.container {display: flex; color: green;border: 1px solid green;
margin-top: 20px;}
.container > div {background-color: #ededed;width: 100px; line-height: 75px;
margin: 10px; text-align: center;font-size: 25px;}
.justify-content1 {justify-content: flex-start;} /* sola dayalı */
.justify-content2 {justify-content: center;} /* ortalı */
.justify-content3 {justify-content: flex-end;} /* sağa dayalı */
.justify-content4 {justify-content: space-between;} /* ilk öğe sola - son öğe sağa - diğerleri ortalı */
.justify-content5 {justify-content: space-around;} /* sağ sol eşit boşluk - ortada 2 katı */
.justify-content6 {justify-content: space-evenly;} /* tüm öğeler eşit boşluk */
</style>
</head>
<body>
<div class="container justify-content1 ">
<div>1</div> <div>2</div> <div>3</div>
</div>
<div class="container justify-content2 ">
<div>1</div> <div>2</div> <div>3</div>
</div>
<div class="container justify-content3 ">
<div>1</div> <div>2</div> <div>3</div>
</div>
<div class="container justify-content4 ">
<div>1</div> <div>2</div> <div>3</div>
</div>
<div class="container justify-content5 ">
<div>1</div> <div>2</div> <div>3</div>
</div>
<div class="container justify-content6 ">
<div>1</div> <div>2</div> <div>3</div>
</div>
</body>
</html>
Align-items, öğelerin(items) dikey eksende hizasını ayarlamak-konumlandırmak için kullanılır.
.container {
align-items: stretch | flex-start | center | flex-end | baseline;
}
Yukarıda bahsetmiş olduğumuz align-items özelliği ile ilgili bir örnek yapalım ve align-items özelliğinin almış olduğu değerlerin nasıl gözükeceğini inceleyelim.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Css3 Flexbox(Kutu Modeli) - align-items</title>
<style>
.container {display: flex; color: green;border: 1px solid green;
margin-top: 20px; height: 150px;}
.container > div {background-color: #ededed;width: 100px; line-height: 75px;
margin: 10px; text-align: center;font-size: 25px;}
.align-items1 {align-items: stretch;} /* varsayılan, yüksekliğe göre doldurur */
.align-items2 {align-items: flex-start;} /* yukarıya dayalı */
.align-items3 {align-items: center;} /* ortalı */
.align-items4 {align-items: flex-end;} /* aşağıya dayalı */
.align-items5 {align-items: baseline;} /* ilk satırı baz alarak ortalama yapar */
/* baseline değerini anlamak için öğe değerlerini değiştirip bir çizgi çizelim */
.align-items5 div:nth-child(2){line-height: 50px;}
.align-items5 div:last-child {line-height: 25px;}
hr {border: 1px solid red;margin-top: -93px;z-index: 10;position: relative;}
</style>
</head>
<body>
<div class="container align-items1 ">
<div>1</div> <div>2</div> <div>3</div>
</div>
<div class="container align-items2 ">
<div>1</div> <div>2</div> <div>3</div>
</div>
<div class="container align-items3 ">
<div>1</div> <div>2</div> <div>3</div>
</div>
<div class="container align-items4 ">
<div>1</div> <div>2</div> <div>3</div>
</div>
<div class="container align-items5 ">
<div>1</div> <div>2</div> <div>3</div>
</div>
<hr/>
</body>
</html>
Align-content, Align-items gibi dikey hizalamalar için kullanılır fakat aralalarında önemli bir fark var. Align-content tanımlamaları ile çok satırlı yapılarda öğelerin(items) dikey eksende satırların hizasını ayarlamak için kullanılır.
.container {
align-content: stretch | flex-start | center | flex-end | space-between | space-evenly;
}
NOT: space-evenly tanımlamasının tarayıcı uyum problemleri olduğu için şuan kullanmanızı tavsiye etmiyorum. Microsoft İnternet Explorer, Edge tarafından desteklenmemektedir.
Yukarıda bahsetmiş olduğumuz align-content özelliği ile ilgili bir örnek yapalım ve align-content özelliğinin almış olduğu değerlerin nasıl gözükeceğini inceleyelim.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Css3 Flexbox(Kutu Modeli) - align-content</title>
<style>
.container {display: flex; flex-wrap: wrap; color: green;border: 1px solid green; margin-top: 20px; height: 200px;}
.container > div {background-color: #ededed;width: 80px; line-height: 40px;margin: 10px; text-align: center;font-size: 25px;}
.align-content1 {align-content: stretch;} /* varsayılan yüksekliğe göre öğelerin yüksekliği belirlenir*/
.align-content2 {align-content: flex-start;}
.align-content3 {align-content: center;}
.align-content4 {align-content: flex-end;}
.align-content5 {align-content: space-between;}
.align-content6 {align-content: space-around;}
</style>
</head>
<body>
<div class="container align-content1 ">
<div>1</div> <div>2</div> <div>3</div> <div>4</div>
<div>5</div> <div>6</div> <div>7</div> <div>8</div>
<div>9</div> <div>10</div> <div>11</div> <div>12</div>
</div>
<div class="container align-content2 ">
<div>1</div> <div>2</div> <div>3</div> <div>4</div>
<div>5</div> <div>6</div> <div>7</div> <div>8</div>
<div>9</div> <div>10</div> <div>11</div> <div>12</div>
</div>
<div class="container align-content3 ">
<div>1</div> <div>2</div> <div>3</div> <div>4</div>
<div>5</div> <div>6</div> <div>7</div> <div>8</div>
<div>9</div> <div>10</div> <div>11</div> <div>12</div>
</div>
<div class="container align-content4 ">
<div>1</div> <div>2</div> <div>3</div> <div>4</div>
<div>5</div> <div>6</div> <div>7</div> <div>8</div>
<div>9</div> <div>10</div> <div>11</div> <div>12</div>
</div>
<div class="container align-content5 ">
<div>1</div> <div>2</div> <div>3</div> <div>4</div>
<div>5</div> <div>6</div> <div>7</div> <div>8</div>
<div>9</div> <div>10</div> <div>11</div> <div>12</div>
</div>
<div class="container align-content6 ">
<div>1</div> <div>2</div> <div>3</div> <div>4</div>
<div>5</div> <div>6</div> <div>7</div> <div>8</div>
<div>9</div> <div>10</div> <div>11</div> <div>12</div>
</div>
</body>
</html>
Order, öğelerin sıralanışını değiştirmek için kullanılır. Order özelliğinin varsayılan değeri 0’dır.
Normal sırası 1 – 2 – 3 olan divlerin sıralamasını değiştirerek 3 – 2 – 1 olarak sıralayalım.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Css3 Flexbox(Kutu Modeli) - order</title>
<style>
.container {display: flex; color: green;border: 1px solid green; margin-top: 20px;}
.container > div {background-color: #ededed;width: 100px; line-height: 75px;
margin: 10px; text-align: center;font-size: 25px;}
/* order */
.order1 { order: 2; }
.order2 { order: 1; }
.order3 { order: 0; }
</style>
</head>
<body>
<!-- 3 2 1 olarak sıralayalım -->
<div class="container">
<div class="order1">1</div>
<div class="order2">2</div>
<div class="order3">3</div>
</div>
</body>
</html>
Flex-grow, bir öğenin diğer öğelere göre daha büyük olmasını ayarlamak için kullanılır. Bu özelliği kullandığınız zaman içerisinde bulunan items değerleri kapsayıcıyı(container) dolduracaktır. Flex-grow özelliğinin varsayılan değeri 0’dır.
Örnek olarak tüm öğelerin(items) değerini 1 yapıp, son öğenin değerini 2 yaparsak, sonuç olarak son öğenin boyutu 2 kat daha büyük olacaktır.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Css3 flexbox(Kutu Modeli) - flex-grow</title>
<style>
.container {display: flex; color: green;border: 1px solid green; margin-top: 20px;}
.container > div {background-color: #ededed;width: 100px; line-height: 75px;
margin: 10px; text-align: center;font-size: 25px;}
/* flex-grow */
.flex-grow1 { flex-grow: 1; }
.flex-grow2 { flex-grow: 1; }
.flex-grow3 { flex-grow: 2; }
</style>
</head>
<body>
<!-- flex-grow -->
<div class="container">
<div class="flex-grow1">1</div>
<div class="flex-grow2">2</div>
<div class="flex-grow3">3</div>
</div>
</body>
</html>
flex-shrink özelliği flex-grow özelliğinin tam tersi görevi üstlenmektedir. Yani küçültme işlemi için kullanılır. Varsayılan değeri 1’dir.
Örnek olarak eğer tüm öğelere 1 değerini verip son öğeye 2 değerini verirseniz, küçülmesi gerektiğinde diğerlerine göre 2 kat daha önce küçülecektir.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Css3 flexbox(Kutu Modeli) - flex-shrink</title>
<style>
.container {display: flex; color: green;border: 1px solid green; margin-top: 20px;}
.container > div {background-color: #ededed;width: 220px; line-height: 75px;
margin: 10px; text-align: center;font-size: 25px;}
/* flex-shrink */
.flex-shrink1 { flex-shrink: 1; }
.flex-shrink2 { flex-shrink: 1; }
.flex-shrink3 { flex-shrink: 2; }
</style>
</head>
<body>
<div class="container">
<div class="flex-shrink1">1</div>
<div class="flex-shrink2">2</div>
<div class="flex-shrink3">3</div>
</div>
</body>
</html>
Flex-basis özelliği öğelerin genişliğini belirlemek için kullanılır.(Yeterli genişliğe sahip olması durumunda) Flex-basis özelliği ile tüm uzunluk birimleri (px, pt, em vb.) kullanılabilir. Varsayılan değeri auto’dur. Eğer değer olarak 0 verilirse, sadece içindeki değer kadar genişliğe sahip olur.
Örnek olarak 2 div oluşturalım ve bulunduğu alanın yarısına sahip olmasını sağlayalım.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Css3 flexbox(Kutu Modeli) - flex-basis</title>
<style>
.container {display: flex; color: green;border: 1px solid green; margin-top: 20px;}
.container > div {background-color: #ededed;width: 220px; line-height: 75px;
margin: 10px; text-align: center;font-size: 25px;}
/* flex-basis */
.flex-basis1 { flex-basis: 50%; }
.flex-basis2 { flex-basis: 50%; }
</style>
</head>
<body>
<div class="container">
<div class="flex-basis1">1</div>
<div class="flex-basis2">2</div>
</div>
</body>
</html>
Flex özelliği, sırasıyla flex-grow, flex-shrink ve flex-basis özelliklerinin kısa kullanımıdır. İlk değeri zorunlu olarak tanımlanmalıdır. shrink ve basis değerlerini belirtmek zorunlu değildir. Varsayılan olarak 0 1 auto değerine sahiptir.
Örnek olarak çok fazla tercih edilen flex-grow: 1; flex-shrink:1; flex-basis: auto; tanımlamasını yapalım.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Css3 flexbox(Kutu Modeli) - flex-shrink</title>
<style>
.container {display: flex; color: green;border: 1px solid green; margin-top: 20px;}
.container > div {background-color: #ededed;width: 220px; line-height: 75px;
margin: 10px; text-align: center;font-size: 25px; flex: 1 1 auto;}
</style>
</head>
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Ve mutlu sona geldik arkadaşlar, buraya kadar geldiğinize göre flex yapısı için güzel yol kat ettiniz demektir. Yorumlarda soru cevap yaparak anlamadığınız yerleri sorabilirsiniz. Hazırlarken biraz yoruldum fakat birileri için faydalı olacağını umuyorum. Bir sonraki eğitimde görüşmek üzere başarılar dilerim.
The post CSS3 Flexbox Yerleşim Modeli Kullanımı ve Tüm Detayları first appeared on Kampüs Kod.]]>CSS (Cascading Style Sheets), web sitelerimize görsel güzellik katmamızı sağlayan, metin ve format biçimlendirmemize olanak sağlayan bir web geliştirme teknolojisidir.
CSS3 ise CSS’in daha yeni versiyonu olarak supertotobet geliştirilmiş bir sürümüdür.
CSS, HTML öğelerinin nasıl görüntülenmesi gerektiğini belirler. HTML‘in bize kısıtlı olarak sağladığı görünümleri, daha hoş ve profesyonel hale getirerek daha cezbedici bir görünüm sağlar.
Css ile bir web sitesinde en fazla ihtiyaç duyacağınız buton tasarımları, menü tasarımları, iletişim formları, web site genel şablonları ve bunların responsive yapılarını yani mobil uyumlu hale getirmeyi istediğiniz şekilde ayarlayabilirsiniz.