Css Flexbox Kullanımı ve Yapısı

nhtctn nhtctn

Flexbox yapısı sayesinde çok esnek ve kullanışlı yerleşimler yapabilmekteyiz.Bu yapıyla yatay veya dikey olarak nesneleri hareket ettirmek gayet rahat bir şekilde yapılır.

Flexbox yapısı aşağıdaki resimde olduğu gibidir.Kapsayıcı bir container ve içindeki elemanlardan oluşan bir yapıdır.

Display:flex
Container’ın görünüm özelliği display:flex olarak belirtilmesi gerekiyor. Bunu yaptığımız zaman container(kapsayıcı) içindeki elemanlar inline-block gibi hareket edecektir.

    <div class="container">
        <div class="item">Eleman1</div>
        <div class="item">Eleman2</div>
        <div class="item">Eleman3</div>
        <div class="item">Eleman4</div>
    </div>
      * {
            margin: 0;
            padding: 0;
        }

        .container {
            background-color: lightgray;
            padding: 20px;
            display: flex;
        }

        .item {
            padding: 30px;
            margin: 8px;
            background-color: deeppink;
            font-size: 20px;
        }

Yukarıda container(kapsayıcıyı) display:flex yapınca aşağıda gördüğünüz gibi elemanları yana yana gelmiş bulundu inline-block gibi davrandılar.Yani içerik kadar yer kapladılar.Eğer display:flex olarak belirtmeseydik div’ler block elemanlar olduğundan her div bir satırı kaplayacaktı.

Bu iki grup aşağıdaki gibi özellikler barındırır.

Flex Container

1-flex-direction

Bu özellik container içindeki elemanların sıralama yönünü belirler.

Aldığı Değerler: row, row-reverse, column, column-reverse

Varsayılan Değer: row

row: Elemanları soldan sağa doğru sıralar.

row-reverse: Elemanları sağdan sola doğru sıralar.

column: Elemanları sütün olarak yukarıdan aşağı doğru sıralar.

column-reverse: Elemanları sütün olarak aşağıdan yukarıya doğru sıralar.

  .container {
            display: flex;
            flex-direction:row;
            
            background-color: lightgray;
            padding: 20px;  
        }
  .container {
            display: flex;
            flex-direction:row-reverse;
            
            background-color: lightgray;
            padding: 20px;
            
        }
  .container {
            display: flex;
            flex-direction:column;
            
            background-color: lightgray;
            padding: 20px;
            
        }
  .container {
            display: flex;
            flex-direction:column-reverse;
            
            background-color: lightgray;
            padding: 20px;
            
        }

2-flex-wrap

Varsayılan olarak elemanlarımız tek bir satıra sığmaya çalışırlar sığmadığı zaman scroll açılır ve container dışına çıkmaya çalışırlar.Bu özellik sayesinde satıra sığmadığı takdirde bir sonraki satırdan devam eder.

Aldığı Değerler: nowrap, wrap, wrap-reverse

Varsayılan Deperi: nowrap

nowrap: Tek satırda elemanlar soldan sağa sıralanır.

wrap: Birden fazla satırda elemanlar soldan sağa doğru sıralanır.

wrap-reverse: Birden fazla satırda elemanlar sağdan sola doğru sıralanır.

  <div class="container">
        <div class="item">Eleman1</div>
        <div class="item">Eleman2</div>
        <div class="item">Eleman3</div>
        <div class="item">Eleman4</div>
        <div class="item">Eleman5</div>
        <div class="item">Eleman6</div>
        <div class="item">Eleman7</div>
        <div class="item">Eleman8</div>
        <div class="item">Eleman9</div>
        <div class="item">Eleman10</div>
        <div class="item">Eleman11</div>
        <div class="item">Eleman12</div>
    </div>
 * {
            margin: 0;
            padding: 0;
        }

        .container {
            display: flex;
            flex-wrap: nowrap;

            background-color: lightgray;
            padding: 20px;

        }

        .item {
            padding: 30px;
            margin: 8px;
            background-color: deeppink;
            font-size: 20px;
        }
 .container {
            display: flex;
            flex-wrap: wrap;

            background-color: lightgray;
            padding: 20px;

        }
 .container {
            display: flex;
            flex-wrap: wrap-reverse;

            background-color: lightgray;
            padding: 20px;

        }

3-justify-content

Container içindeki elemanların x (yatayda) ekseninde nasıl hizalanacağını belirler.

Aldığı Değerler: flex-start, center, flex-end, space-between, space-around, space-evenly

Varsayılan Değer: flex-start

flex-start: Yatayda elemanlar sola hizalanır.

center: Yatayda elemanlar ortaya hizalanır.

flex-end: Yatayda elemanlar sağa hizalanır.

space-between: Yatayda elemanlar eşit aralıkla dizilirler.İlk eleman başına ve son eleman sonrasına boşluk bırakılmaz.

space-around: Yatayda elemanlar eşit aralıkla dizilirler.İlk eleman öncesine ve son eleman sonrasına eleman aralıklarının değerinin yarısı kadar boşluk bırakır.

space-evenly: Yatayda elemanlar eşit olarak dizilirler. ilk eleman öncesine ve son eleman sonrasına aynı değerde boşluk bırakır.

 .container {
            display: flex;
            justify-content: flex-start;

            background-color: lightgray;
            padding: 20px;

        }
 .container {
            display: flex;
            justify-content: center;

            background-color: lightgray;
            padding: 20px;

        }
 .container {
            display: flex;
            justify-content: flex-end;

            background-color: lightgray;
            padding: 20px;

        }
 .container {
            display: flex;
            justify-content: space-between;

            background-color: lightgray;
            padding: 20px;

        }
 .container {
            display: flex;
            justify-content: space-around;

            background-color: lightgray;
            padding: 20px;

        }
 .container {
            display: flex;
            justify-content: space-evenly;

            background-color: lightgray;
            padding: 20px;

        }

4-align-items

Container içindeki elemanların y (dikeyde) ekseninde nasıl hizalanacağını belirler.

Aldığı Değerler: flex-start, center, flex-end, strech, baseline,

Varsayılan Değeri: strech

flex-start: Dikeyde elemanlar kapsayıcının başından başlayarak hizalanır.

center: Dikeyde elemanlar kapsayıcının ortasından başlayarak hizalanır.

flex-end: Dikeyde elemanlar kapsayıcının altından başlayarak hizalanır.

baseline: Dikeyde Elemanların yazı boyutlarına göre hizalama yapar.

strech: Dikeyde elemanların yükseklikliği container(kapsayıcının) yüksekliği kadar olur.

 <div class="container">
        <div class="item">Eleman1</div>
        <div class="item">Eleman2</div>
        <div class="item i3">Eleman3</div>
        <div class="item">Eleman4</div>
        <div class="item i5">Eleman5</div>
 
    </div>
 * {
            margin: 0;
            padding: 0;
        }

        .container {
            height: 600px;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            

            background-color: lightgray;
            padding: 20px;

        }
        .item {
            padding: 30px;
            margin: 8px;
            background-color: deeppink;
            font-size: 20px;
        }
         .i3{
            height: 10px;
        }
        .i5{
            height: 300px;
        }
 .container {
            height: 600px;
            display: flex;
            justify-content: center;
            align-items: center;
            

            background-color: lightgray;
            padding: 20px;

        }
 .container {
            height: 600px;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            

            background-color: lightgray;
            padding: 20px;

        }
   .container {
            height: 600px;
            display: flex;
            justify-content: center;
            align-items: baseline;
            
            background-color: lightgray;
            padding: 20px;

        }
   * {
            margin: 0;
            padding: 0;
        }

        .container {
            height: 600px;
            display: flex;
            justify-content: center;
            align-items: stretch;
            

            background-color: lightgray;
            padding: 20px;

        }

        .item {
            padding: 30px;
            margin: 8px;
            background-color: deeppink;
            font-size: 20px;
        }
         .i3{
            height: 10px;
        }
        .i5{
            height: 300px;
        }

5-align-content

flex özelliği uygulanmış elemanların dikey olarak hizalamak için kullanılır.Bir önceki özelliğimiz olan align-items tek satırlı işlemlerde geçerli olurken bu özelliğimiz ise çok satırlılarda işlev görmektedir.

Aldığı Değerler:flex-start, center, flex-end, space-between, space-around, strech

Varsayılan Değer: strech

flex-start: Elemanlar kapsayıcının dikey olarak başından başlayarak hizalanır.

center: Elemanlar kapsayıcının dikey olarak ortasından başlayarak hizalanır.

flex-end: Elemanlar kapsayıcının dikey olarak altından başlayarak hizalanır.

space-between: Elemanlardan ilk kutu kapsayıcının başında, son kutu kapsayıcının sonunda dikey olacak şekilde eşit hizalanır.

space-around: Elemanlar arası eşit boşluk bırakarak dikeyde hizalar.

strech: Elemanlar arası boşluk bırakmayacak şekilde dikeyde hizalanır.

<div class="container">
        <div class="item">Eleman1</div>
        <div class="item">Eleman2</div>
        <div class="item ">Eleman3</div>
        <div class="item">Eleman4</div>
        <div class="item ">Eleman5</div>
        <div class="item">Eleman1</div>
        <div class="item">Eleman2</div>
        <div class="item ">Eleman3</div>
        <div class="item">Eleman4</div>
        <div class="item ">Eleman5</div>
        <div class="item">Eleman1</div>
        <div class="item">Eleman2</div>
        <div class="item ">Eleman3</div>
        <div class="item">Eleman4</div>
    </div>
* {
            margin: 0;
            padding: 0;
        }

        .container {

            display: flex;
            height: 600px;
            flex-wrap: wrap;
            align-content: flex-start;

            background-color: lightgray;
            padding: 20px;
        }

        .item {
            padding: 30px;
            margin: 8px;
            background-color: deeppink;
            font-size: 20px;
        }
* {
            margin: 0;
            padding: 0;
        }

        .container {

            display: flex;
            height: 600px;
            flex-wrap: wrap;
            align-content: center;

            background-color: lightgray;
            padding: 20px;
        }

        .item {
            padding: 30px;
            margin: 8px;
            background-color: deeppink;
            font-size: 20px;
        }
* {
            margin: 0;
            padding: 0;
        }

        .container {

            display: flex;
            height: 600px;
            flex-wrap: wrap;
            align-content: flex-end;

            background-color: lightgray;
            padding: 20px;
        }

        .item {
            padding: 30px;
            margin: 8px;
            background-color: deeppink;
            font-size: 20px;
        }
* {
            margin: 0;
            padding: 0;
        }

        .container {

            display: flex;
            height: 600px;
            flex-wrap: wrap;
            align-content: space-between;

            background-color: lightgray;
            padding: 20px;
        }

        .item {
            padding: 30px;
            margin: 8px;
            background-color: deeppink;
            font-size: 20px;
        }
* {
            margin: 0;
            padding: 0;
        }

        .container {

            display: flex;
            height: 600px;
            flex-wrap: wrap;
            align-content: space-around;

            background-color: lightgray;
            padding: 20px;
        }

        .item {
            padding: 30px;
            margin: 8px;
            background-color: deeppink;
            font-size: 20px;
        }
* {
            margin: 0;
            padding: 0;
        }

        .container {

            display: flex;
            height: 600px;
            flex-wrap: wrap;
            align-content:strech;

            background-color: lightgray;
            padding: 20px;
        }

        .item {
            padding: 30px;
            margin: 8px;
            background-color: deeppink;
            font-size: 20px;
        }

Flex Items

1-align-self

Container içindeki seçilen her bir elemanı özel olarak dikeyde hizalamak için kullanılır.

Aldığı Değerler: auto, flex-start, center, flex-end,baseline, strech

Varsayılan Değeri: auto

Değerlerimiz yine aynı görevleri görmektedir tekrar yazma ihtiyacı duymadım.

<div class="container">
        <div class="item i1">Eleman1</div>
        <div class="item i2">Eleman2</div>
        <div class="item i3">Eleman3</div>
        <div class="item i4">Eleman4</div>
        <div class="item i5">Eleman5</div>
        <div class="item i6">Eleman1</div>
    </div>
* {
            margin: 0;
            padding: 0;
        }

        .container {

            display: flex;
            align-items: center;
            height: 600px;


            background-color: lightgray;
            padding: 20px;

        }
        .item {

            padding: 30px;
            margin: 8px;
            background-color: deeppink;
            font-size: 20px;
        }

        .i1 {

            align-self: flex-start;
        }

        .i2 {

            align-self: center;
        }

        .i3 {

            align-self: flex-end;
        }

        .i4 {

            align-self: baseline;
        }

        .i5 {

            align-self: stretch;
        }

        .i6 {

            align-self: auto;
        }

2-order

Varsayılan olarak elemanlar html’de yazılan sıraya göre dizilirler.Order ile bunların sırasını değiştirmek mümkündür.

Aldığı Değerler: Sayı

Varsayılan Değer: 0

<div class="container">
        <div class="item i1">Eleman1</div>
        <div class="item i2">Eleman2</div>
        <div class="item i3">Eleman3</div>
        <div class="item i4">Eleman4</div>
        <div class="item i5">Eleman5</div>
        <div class="item i6">Eleman6</div>
    </div>
* {
            margin: 0;
            padding: 0;
        }

        .container {

            display: flex;
            align-items: center;
            height: 600px;


            background-color: lightgray;
            padding: 20px;

        }
        .item {

            padding: 30px;
            margin: 8px;
            background-color: deeppink;
            font-size: 20px;
        }

        .i1 {

            order: 6;
        }

        .i2 {

           
        }

        .i3 {

              order: 4;
        }

        .i4 {

        
        }

        .i5 {

           order: -2;
        }

        .i6 {

            order: -3;
        }

3-flex-grow

Flex-grow ile elemana esnek genişlikler verebilirsiniz.Üç adet kutu olduğunu düşünelim.İki kutuya flex-grow: 1 değerini diğer kutuya da flex-grow:2 değerini verelim.Flex-grow:2 değerini alan kutu diğerlerine göre 2 kat daha geniş olacaktır.Varsayılan değer 0 dır

<div class="container">
        <div class="item i1">Eleman1</div>
        <div class="item i2">Eleman2</div>
        <div class="item i3">Eleman3</div>
        <div class="item i4">Eleman4</div>
        <div class="item i5">Eleman5</div>
        <div class="item i6">Eleman6</div>
    </div>
* {
            margin: 0;
            padding: 0;
        }

        .container {

            display: flex;
            align-items: center;
            height: 600px;


            background-color: lightgray;
            padding: 20px;

        }
        .item {

            padding: 30px;
            margin: 8px;
            background-color: deeppink;
            font-size: 20px;
            flex-grow: 1;
        }

        .i1 {

            flex-grow: 2;
        }

        .i2 {

           flex-grow: 4;
        }

4-flex-shrink

Bu aslında flex-grow özelliğinin tam aksine, küçültme işlemi için kullanılır. Varsayılan olarak değeri 1’dir. Eğer bir öğeye değer olarak 2 verirseniz, diğerlerine göre küçülmesi gerektiğinde daha önce küçülecektir. Değeri artırırsanız örneğin 4. öğeye 2, 5. öğeye 3 değeri verirseniz, küçülme esnasında her ikiside küçülecektir ancak 5. öğe 4. öğeye göre daha hızlı küçülecektir. Zaten bu öğelerde artık küçülecek yer kalmadığında diğer öğeler küçülmeye başlar. Esnek yapılarda bildiğiniz gibi kapsayıcıya göre genişlik ve yükseklik ayarlanmaktadır. Bu gibi durumlarda büyümeye ve küçülmeye müdahale için bu özellik işe yarayacaktır.

Aldığı Değerler: Sayı

Varsayılan Değer: 1

.i4 {
    flex-shrink: 2;
}
.i5 {
    flex-shrink: 3;
}

5-flex-basis

Öğelerin eğer alanı yetiyorsa olması gereken genişliği belirlemek için kullanılır. Değer olarak tüm uzunluk birimleri (px, pt, em vb.) kullanılabilir. Eğer değer olarak 0 belirlenirse, doğrudan sadece içindeki değer kadar genişliği olur.

Aldığı Değerler: px,pt, em,rem vb.;

Varsayılan olarak değeri auto’dur.

  .i1 {

            flex-basis: 40%;
        }

        .i2 {
            flex-basis: 20%;

flex: 0 1 200px; bu kullanım flex grow, flex shrink ve flex basis ‘in tek satır ile kullanımıdır.

Yorum yazın

BENZER YAZILAR