Merhabalar, ilk yazımda sizlere elimden geldiğince Frontend Development ile alakalı naçizane bilgilerimden, deneyimlerimden, Frontend nedir ve nasıl yapılır gibi kavramlardan bahsetmeye çalışacağım.

Benim frontend alanına yönelmemin temel sebebi aslında almış olduğum lise eğitimimle başlıyor desem sanırım daha doğru olacak. O dönemlerde tanıştığım “web geliştirme” kavramı, bu alana ilgi duyduğumu fark etmem noktasında temel oluşturduğunu söyleyebilirim. Halihazırda web tabanlı olduğum için üniversite eğitimimde de frontend alanına yönelik aldığım eğitimler ve yaptığım çalışmalar bu doğrultuda belirlemiş olduğum kariyer hedeflerimle de devam ettiğini belirtebilirim.

Frontend nedir ve nasıl yapılır?

Frontend kavramından bahsedildiği zaman insanların genellikle düşündüğü şey aslında HTML, CSS ve JavaScript’ tir. Kısaca değinecek olursak yukarıda bulunan görselden yararlanmak istiyorum. HTML, bizim oluşturduğumuz web sayfalarının iskelet yapısına benzetebiliriz. Sayfalarımız bu iskelet yapısı üzerinde inşa edilir. CSS, web sayfalarındaki tasarım kısmına karşılık gelir. İçeriklerin nerede, hangi boyutta, hangi stilde görüntüleneceği konusunda yapacağımız ayarlamalarda kullanırız. JavaScript ise oluşturmuş olduğumuz yapının çalışması gereken fonksiyonlarına karşılık gelir. Bir menüye tıkladığımızı düşünelim, bu menünün açılırken yapacağı olay(event), menü açılırken içerisinde mevcutsa bir animasyon veya backend ile haberleşme işlemlerini örneklendirebiliriz.

Her ne kadar frontend’ in temelinde bunlar olsa da son yıllarda JavaScript frameworklerinin (Angular, React ve Vue gibi) popülerleşmesi ve kullanım alanının yaygınlaşması sayesinde frontend dünyasının başka boyutlar kazandığını söylememiz yanlış sayılmaz. SPA dediğimiz yani Single Page Application(Tek Sayfalık Uygulama) kavramıyla birlikte aslında frontend bir uygulama geliştirme haline geldi diyebiliriz. Bununla beraber hayatımıza giren Mobil Application kavramıyla birlikte frontend kısmını sadece web tabanlı düşünmemek gerekir. Yani demem o ki Backend aslında tek bir kısımdan oluşurken Frontend tarafı farklı platformlar içinde dizayn edilmekte veya kullanılabilmektedir. (iOS, Android, IoT vs.)

Responsive tasarıma da değinecek olursam, taşınabilir cihazların hayatımızda aktif olarak rol oynamasından sonra önemi daha da çok ortaya çıkan bir kavram olduğundan bahsedebiliriz. Eskiden mobil cihazlardan web sayfalarını görüntülediğimiz zaman sayfalar sanki desktop bir cihazdan görüntüleniyormuş gibi görüntülenirdi. Fakat responsive tasarımlarında gelişmesiyle bu durum artık sayfaları görüntülediğimiz cihaz boyutlarına göre (mobil,tablet vs.) görüntülenmeye başlandı. Yani sayfalarımız ona göre genişlik kazanıyor, içerikler ona uygun olarak hizalanıyor gibi. Bu da beraberinde mobil cihazlardaki kullanımlarında artmasına sebep oldu.

Frontend, en basit ifadeyle arayüzde kullanıcıyla etkileşime geçen taraf olarak nitelendirebiliriz. Yani kullanıcının ziyaret etmiş olduğu web sayfalarında veya web uygulamalarında görüntülediği, etkileşime girdiği kısım. Bununla ilgili de vereceğim örnekte Twitter’ı baz alalım. Twitter’da anasayfamızda olduğumuzu düşünelim. Takipleştiğimiz kullanıcıların tweetlerini görüntüleyebiliyoruz, bu tweetlere beğeni, retweet gibi farklı olaylar gerçekleştirebiliyoruz, tweet atabiliyoruz, kullanıcılara mesaj gönderebiliyoruz vs.

Özetlemem gerekirse kariyer yolculuğunun başında olan bir geliştirici olarak ilk yazımda elimden geldiğince Frontend Development alanıyla alakalı naçizane bilgi ve tecrübelerimden bahsetmeye çalıştım. Sayılan konular uzayıp gidebilir ancak üzerinde durmak istediğim bazı hususları paylaşmaya gayret ettim. Başarılı olabildiysem ne mutlu bana. Bana ulaşmak isterseniz eğer Twitter, LinkedIn, GitHub üzerinden ulaşabilirsiniz.

Son olarak yazımı Steve Jobs’ın şu sözüyle bitirmek istiyorum;

Teşekkür eder, saygılar sunarım…

Html5 Button nasıl oluşturulur

Html5 Button nasıl oluşturulur video eğitimi:

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ş

1. flexbox nedir?
2. container(kapsayıcı) flex
3. flex-direction
4. flex-wrap
5. flex-flow
6. justify-content
7. align-items
8. align-content
9. order
10. flex-grow
11. flex-shrink
12. flex-basis
13. 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.

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 Ne işe yarar?

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 neler yapabilirsiniz?

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.

Aşağıdaki css eğitim videosunu izleyerek. Css nedir? Css3 Nedir vs Css Ne işe yarar sorularına cevap bulabilirsiniz.

• İrlanda Öğrenci Vizesi için Gerekli Belgeler
• (Solved) Error ‘npm ERR! ERESOLVE unable to resolve dependency tree’ and & How to fix NPM warnings
• Mikroservis Mimarisi Nedir? Monolitik Mimari Nedir? Microservice vs Monolithic
• Metaverse nedir? Metaverse teknolojisi hayatımızda neleri değiştirecek?
• Keycloak Kullanarak Güvenli Java Spring Boot REST API Uygulaması

Yorum Satırlarının önemi nedir?

Tanımlanan yorumlar sayesinde sayfanızın içeriğini ileri ki zamanlarda değiştirmek istediğiniz içerik ile ilgili fikir edinebilir ve son çalışmalarınızın ne amaçla yapıldığını vs bilirsiniz. Bu açıdan değerlendirildiğinde html’de yorum satırları kullanımı çok faydalı olacaktır.

Html yorum satırı eklemek için detaylı eğitim videosu aşağıdaki video da bulunmaktadır.

Sublime Text, içinde birçok programlama dili arayüzü barındıran, çapraz platform bir kaynak gorabet kod düzenleme ve metin editörüdür. Arayüzü Vim’den ilham alınarak tasarlanmıştır. Sublime-paketleri yardımıyla fonksiyonelitesi genişletilebilir ancak Sublime Text açık kaynaklı ya da özgür bir yazılım değildir.

Sublime Text editörünün yapılandırma ayarları için aşağıdaki videoyu izleyebilirsiniz.

Sublime Text editörü hızlı kod yazma kısayolları:

[
 {"keys": ["alt+shift+f"], "command": "reindent", "args": {"single_line": false}},
 { "keys": ["ctrl+7"], "command": "toggle_comment", "args": { "block": false } },
 { "keys": ["ctrl+shift+7"], "command": "toggle_comment", "args": { "block": true } }
]

Kod Açıklaması

• ctrl + 7 = açıklama satırı oluşturmak için kullanılır. Seçili satırda olursak o satırı açıklama satırına çevirecektir.
• shift ctrl 7 Bulunduğu yerde açıklama satırı oluşturmak için.
• shift + Alt + F = Otomatik düzenleme yapmak için

Sublime Text Editörünü İndir – Download Sublime Text Editor:

Sublime Text editörünü indirmek için buraya tıklayın.

web tasarım, html,css,html5,css3,create a website,web site dersleri,

Yaz?l?m?n ve yaz?l?mc?lar?n günümüzün üretim teknolojilerine yapt?klar? katk? ise çok daha can al?c? etkiler yarat?yor. Öncelikle küresel olarak üretim için kullan?lan bütün ekipmanlar?n daha verimli çal??mas?, veri üretmeye ba?lamas?, optimize olmalar? ve olas? sorunlar? ya?anmadan Casinomaxi öngörebilmeleri mümkün ve bunu sa?layanlar yaz?l?mc?lar. Yaz?l?mc?lara bu sistemleri üzerine kuracaklar? temeli sa?layanlar ise GE’nin dijital dönemin liderlerinden biri olmas?n? sa?layan bir kavram ve bir ürün: Endüstriyel ?nternet ve Predix. Endüstriyel ?nternet kullan?c? internetinin insan a??na sa?lad???n?n bir benzerini makinalara sunarken, Predix’te yaz?l?mc?lara standardizasyon ve üretmek istedikleri yaz?l?m için bir temel sa?l?yor.

Predix ?imdiden 19.000 uygulama geli?tiriciyi, yaz?l?mc?y? kendi çevresinde toplayarak Dijital Sanayi için tek ba??na bir ekosistem yaratt? bile. Bunun yan? s?ra GE’nin i? birlikleri ile birlikte bu ekosistem çok daha geni? bir hale geliyor. Dijital Sanayi uygulamalar? ve çözümlerinde GE; Accenture, AT&T, Capgemini, Cisco, Deloitte Digital, Infosys, Intel, Genpact, SoftBank, Softtek, TCS, Vodafone ve Wipro gibi dünya devleri ile partnerlik yap?yor. Bu sayede Predix için her geçti?imiz gün endüstrileri daha da verimli hale getirecek uygulamalar üretilmesi sa?lan?yor ve yeni dünyada art?k endüstriyel partnerler art?k neredeyse tamamen yaz?l?m odakl? ?irketlere dönü?üyor.