CSS Flexbox

1
2
3
4
5
6
7
8

Deneyin

CSS Flexbox Düzen Modülü

Flexbox düzen modülü (çıkıştan) önce kullanılabilir düzen modelleri aşağıdaki dört türdür:

  • Blok (Block), web sayfasındaki bir bölüm (bölüm) için kullanılır
  • Satır içi (Inline), metin için kullanılır
  • Tablo, iki boyutlu tablo verileri için kullanılır
  • Konumlandırma, elemanın belirli konumunu belirlemek için kullanılır

Esnek çerçeve düzen modülü, daha kolay esnek ve yanıt verici düzen yapıları tasarlamak için kullanılır ve yükleme veya konumlandırma kullanılmadan.

Tarayıcı desteği

Tüm modern tarayıcılar destekler flexbox özellikleri.

29.0 11.0 22.0 10 48

Flexbox öğeleri

Flexbox modelü kullanmaya başlamak için, öncelikle Flex konteynerini tanımlamanız gerekmektedir.

1
2
3

Üstdeki element, üç flex projesi içeren bir flex konteynerini temsil eder (mavi alan).

Örnek

üç flex projesi içeren flex konteyneri:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Deneyin

ana element (konteyner)

tarafından display Özellik ayarlanmıştır: flexflex konteyneri, esnek hale gelecektir:

1
2
3

Örnek

.flex-container {
  display: flex;
}

Deneyin

Aşağıda, flex konteyneri özellikleri verilmiştir:

flex-direction Özelliği

flex-direction Özellik, konteynerin flex projelerini hangi yönde sıralayacağını tanımlar.

1
2
3

Örnek

column Değer, flex projelerini yukarıdan aşağıya doğru dikey olarak sıralar:

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

Deneyin

Örnek

column-reverse Değer, flex projelerini aşağıdan yukarıya doğru dikey olarak sıralar:

.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

Deneyin

Örnek

row Değer, flex projelerini soldan sağa doğru düzlemden sıralar:

.flex-container {
  display: flex;
  flex-direction: row;
}

Deneyin

Örnek

row-reverse Değer, flex projelerini sağdan sola doğru düzlemden sıralar:

.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

Deneyin

flex-wrap Özelliği

flex-wrap Özellik, flex projelerinin satırlara geçip geçmemesi gerektiğini belirler.

Aşağıdaki örnek, flex-wrap özelliğini daha iyi göstermek için 12 adet flex projesi içerir.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Örnek

wrap Değer, gerekirse, flex projelerinin satırlara geçmesini sağlar:

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

Deneyin

Örnek

nowrap Değer, flex projelerinin satırlara geçmemesini sağlar (varsayılan):

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

Deneyin

Örnek

wrap-reverse Değer, gerekirse, esnek projelerin ters sırayla satırlara geçmesini sağlar:

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

Deneyin

flex-flow Özelliği

flex-flow Özellik, flex-direction ve flex-wrap özelliklerini aynı anda ayarlamak için kısa bir özelliktir.

Örnek

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

Deneyin

justify-content Özelliği

justify-content Özellik, flex projelerinin hizalanmasını sağlar:

1
2
3

Örnek

center Değer, flex projelerini konteynerin merkezine hizalar:

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

Deneyin

Örnek

flex-start Değer, flex projelerini konteynerin başına hizalar (varsayılan):

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

Deneyin

Örnek

flex-end Değer, flex projelerini konteynerin sonuna hizalar:

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

Deneyin

Örnek

space-around Değer, satırların başında, arasında ve sonunda boşluk olan flex projelerini gösterir:

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

Deneyin

Örnek

space-between Değer, satırlar arasında boşluk olan flex projelerini gösterir:

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

Deneyin

align-items Özelliği

align-items Özellik, flex projelerinin dikey olarak hizalanmasını sağlar.

1
2
3

Bu örneklerde, align-items özelliğini daha iyi göstermek için 200 piksel yüksek bir konteyner kullanıyoruz.

Örnek

center Değer, flex projelerini konteynerin ortasında hizalar:

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}

Deneyin

Örnek

flex-start Değer, flex projelerini konteynerin üstünde hizalar:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}

Deneyin

Örnek

flex-end Değer, esnek projeleri konteynerin altında hizalar:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}

Deneyin

Örnek

stretch Değer, flex projelerini konteyneri doldurmak için gerer (varsayılan):

.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
}

Deneyin

Örnek

baseline Değer, flex projelerinin taban çizgisini hizalar:

.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
}

Deneyin

Dikkat:Bu örnekte, projelerin metin tabanına göre hizalandığını göstermek için farklı font-size kullanılır:

1
2
3
4

align-content Özelliği

align-content Bu özellik, esnek çizgileri hizalamak için kullanılır.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Bu örneklerde, 600 piksel yüksek konteyner kullanıyoruz ve flex-wrap özelliğini wrap olarak ayarlıyoruz, align-content özelliğini daha iyi göstermek için.

Örnek

space-between Değer, esnek çizgiler arasında eşit aralıklar gösterir:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
}

Deneyin

Örnek

space-around Değer, esnek çizgileri önce, arasında ve sonra boşlukla gösterir:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
}

Deneyin

Örnek

stretch Değer, esnek çizgileri kalan alanı kaplamak için gerer (varsayılan):

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;
}

Deneyin

Örnek

center Değer, esnek çizgilerin konteynerin ortasında gösterilir:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
}

Deneyin

Örnek

flex-start Değer, esnek çizgilerin konteynerin başında gösterilir:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
}

Deneyin

Örnek

flex-end Değer, esnek çizgilerin konteynerin sonunda gösterilir:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
}

Deneyin

Mükemmel ortalama

Aşağıdaki örnekte, çok yaygın bir stil sorunu çöreceğiz: mükemmel ortalama.

Çözüm: justify-content ve align-items Özellikleri ortala, ardından flex projeleri mükemmel ortalanır:

Örnek

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

Deneyin

alt elemanlar (projeler)

flex konteynerinin doğrudan alt elemanları otomatik olarak esnek (flex) projeler haline gelir.

1
2
3
4

上面的元素代表一个灰色弹性容器内的四个蓝色弹性项目。

Örnek

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div> 
  <div>4</div>
</div>

Deneyin

用于弹性项目的属性有：

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

order 属性

order 属性规定 flex 项目的顺序。

1
2
3
4

代码中的首个 flex 项目不必在布局中显示为第一项。

order 值必须是数字，默认值是 0。

Örnek

order 属性可以改变 flex 项目的顺序：

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div> 
  <div style="order: 1">4</div>
</div>

Deneyin

flex-grow 属性

flex-grow 属性规定某个 flex 项目相对于其余 flex 项目将增长多少。

1
2
3

该值必须是数字，默认值是 0。

Örnek

使第三个弹性项目的增长速度比其他弹性项目快八倍：

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div> 
</div>

Deneyin

flex-shrink 属性

flex-shrink 属性规定某个 flex 项目相对于其余 flex 项目将收缩多少。

1
2
3
4
5
6
7
8
9

该值必须是数字，默认值是 0。

Örnek

不要让第三个弹性项目收缩得与其他弹性项目一样多：

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

Deneyin

flex-basis 属性

flex-basis 属性规定 flex 项目的初始长度。

1
2
3
4

Örnek

将第三个弹性项目的初始长度设置为 200 像素：

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
  <div>4</div>
</div>

Deneyin

flex 属性

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

Örnek

使第三个弹性项目不可增长（0），不可收缩（0），且初始长度为 200 像素：

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>

Deneyin

align-self 属性

align-self 弹性容器内所选项目的对齐方式由属性规定。

align-self Özellik, konteynerin align-items özelliği tarafından belirlenen varsayılan hizalama yöntemini geçersiz kılar.

1
2
3
4

Bu örneklerde, align-self özelliğini daha iyi görmek için 200 piksel yüksekliğinde bir konteyner kullanıyoruz:

Örnek

Üçüncü esnek projeyi konteynerin ortasına hizalayın:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>

Deneyin

Örnek

İkinci esnek projeyi konteynerin üstüne hizalayın, üçüncü esnek projeyi konteynerin altına hizalayın:

<div class="flex-container">
  <div>1</div>
  <div style="align-self: flex-start">2</div>
  <div style="align-self: flex-end">3</div>
  <div>4</div>
</div>

Deneyin

Flexbox Kullanılan Yanıt Verici Görsel Kütüphanesi

Flexbox kullanarak yanıt verici bir görsel kütüphanesi oluşturun, bu kütüphane ekran boyutuna göre dört, iki veya tam genişlik görseller arasında değişir:

Deneyin

Flexbox Kullanılan Yanıt Verici Web Sitesi

Flexbox kullanarak yanıt verici web siteleri oluşturun, bu sitelerde esnek navigasyon panelleri ve esnek içerikler bulunur:

Deneyin

CSS Flexbox Özellikleri

Aşağıdaki tablo, flexbox ile birlikte kullanılan CSS özelliklerini içerir:

Özellik Açıklama
display HTML öğeleri için kullanılan kutu türünü belirtir.
flex-direction Esnek konteyner içindeki esnek projelerin yönünü belirler.
justify-content Esnek projeler ana eksen üzerindeki tüm kullanılabilir alanı kullanmadığında bu projeleri yatay olarak hizalar.
align-items Esnek projeler ana eksen üzerindeki tüm kullanılabilir alanı kullanmadığında bu öğeleri dikey olarak hizalar.
flex-wrap Esnek projelerin bir flex çizgisinde yeterli alan olmadığında satır değiştirmesi gerekip gerekmediğini belirtir.
align-content flex-wrap özelliğinin davranışını değiştirir. align-items ile benzerdir, ancak esnek projeleri hizalamaz, aksine flex çizgisini hizalar.
flex-flow flex-direction ve flex-wrap özelliklerinin kısaltılmış özellikleri.
order Esnek projenin aynı konteyner içindeki diğer esnek projelerle karşılaştırıldığında sırasını belirler.
align-self Esnek projeler için kullanılır. Konteynerin align-items özelliğini geçerlidir.
flex flex-grow、flex-shrink ve flex-basis özelliklerinin kısaltılmış özellikleri.