CSS3 Flexbox Yerleşim Modeli Kullanımı ve Tüm Detayları

Yazar

28 Mayıs 2020

2191

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.

İnceleyeceğimiz Flex Konularına hızlı geçiş

flexbox nedir?
container(kapsayıcı) flex
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
order
flex-grow
flex-shrink
flex-basis
flex

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.

1- Flexbox nedir?

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.

2- Kapsayıcı(container) flex özelliği

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.

3- Flex-direction nedir?

Öğ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;
}

row (varsayılan) = soldan sağa doğru sıralar.
row-reverse = sağdan sola doğru sıralar.
column = yukarıdan aşağı doğru sıralar.
column-reverse = aşağıdan yukarı doğru sıralar.

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.

Örnek: flex-direction: row | row-reverse | column | column-reverse;

<!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>

Örnek Çıktı: flex-direction: row | row-reverse | column | column-reverse;

4- Flex-wrap nedir?

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;
}

wrap = Öğeler gerektiğinde birden fazla satırda yukarıdan aşağı doğru listelenir.
nowrap (varsayılan) = Tüm öğeleri tek bir satıda yan yana listeler.
wrap-reverse = Öğeler gerektiğinde birden fazla satırda aşağıdan yukarı doğru listelenir.

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.

Örnek: flex-wrap: wrap | nowrap | wrap-reverse;

<!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>

Örnek Çıktı: flex-wrap: wrap | nowrap | wrap-reverse;

5- Flex-flow nedir?

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.

Öncelikle flex-direction ve flex wrap özelliklerini ayrı ayrı tanımlayalım.

.container {
    flex-direction: column;
    flex-wrap: wrap;
}

Flex-flow kullanarak tek seferde tanımlama yapalım.

.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.

Örnek: flex-flow: wrap row;

<!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>

Örnek Çıktı: flex-flow: wrap row;

6- Justify-content nedir?

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;
}

flex-start (varsayılan) = Öğeleri(items) başlangıç noktasına(sola) dayalı hizalar.
center = Öğeleri(items) ortada hizalar.
flex-end = Öğeleri(items) bitiş noktasına(sağa) dayalı hizalar.
space-between = İlk öğe(item) başlangıç noktasına(sola) dayalı, son öğe(item) bitiş noktasına(sağa) dayalı ve diğer öğeler arasında eşit aralıklar bırakılarak, ortalı olacak şekilde hizalanır.
space-around = Tüm öğelerin solundan ve sağından eşit aralıklarla boşluk bırakılarak ortalanır. İlk ve son öğenin arasında kalan öğelerin iki tarafında boşluk olacağı için ortadaki öğeler arasındaki boşluk, başlangıç ve bitiş öğelerine göre daha fazla olacaktır.
space-evenly = Başlangıç ve bitiş öğeleri dahil olmakla birlikte, tüm öğelerin arası aynı eşitlikte olacak şekilde hizalar.

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.

Örnek: justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly;

<!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>

Örnek Çıktı: justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly;

7- Align-items nedir?

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;
}

stretch(varsayılan) = Hizalama yapmaz, öğelerin yüksekliklerini kapsayıcıya(container) göre uzatır.
flex-start = Öğeleri yukarıya doğru hizalar.
center = Öğeleri ortaya doğru hizalar.
flex-end = Öğeleri aşağıya doğru hizalar.
baseline = Öğelerin içindeki ilk satırı baz alarak ortalama yapar.

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.

Örnek: align-items: stretch | flex-start | center | flex-end | baseline;

<!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>

Örnek Çıktı: align-items: stretch | flex-start | center | flex-end | baseline;

8- Align-content nedir?

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;
}

stretch (varsayılan) = Öğeleri hizalamaz, kapsayıcının yüksekliğine göre öğelerin yüksekliklerini uzatır.
flex-start = Öğeleri dikey eksende başta hizalar.
center = Öğeleri dikey eksende ortalı hizalar.
flex-end = Öğeleri dikey eksende sonda hizalar.
space-between = İlk satıdaki öğeler kapsayıcının(container) başta, son satırdaki öğeler sonra olmak üzere diğer satırdaki öğeleri dikey eksende ortalar.
space-evenly = Öğeleri satırlar arası eşit oranda olacak şekilde dikey eksende ortalar.

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.

Örnek: align-content: stretch | flex-start | center | flex-end | space-between | space-evenly;

<!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>

Örnek Çıktı: align-content: stretch | flex-start | center | flex-end | space-between | space-evenly;

9- Order

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.

Örnek: Order

<!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>

Örnek Çıktı: Order

10- Flex-grow

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.

Örnek: Flex-grow

<!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>

Örnek Çıktı: Flex-grow

11- Flex-shrink

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.

Örnek: flex-shrink

<!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>

Örnek Çıktı: flex-shrink

12- Flex-basis

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.

Örnek: Flex-basis

<!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>

Örnek Çıktı: Flex-basis

13- Flex

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.

Örnek: Flex

<!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>

Örnek Çıktı: Flex

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.