CSS Esnek Öğeleri
Alt Öğeler (Öğeler)
Bir esnek kapsayıcının doğrudan alt öğeleri, otomatik olarak esnek (esnek) öğeler haline gelir.
1
2
3
4
Yukarıdaki öğe, gri bir esnek kap içindeki dört mavi esnek öğeyi temsil eder.
Örnek
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Esnek öğe özellikleri şunlardır:
sipariş Özellik
Özellik order, esnek öğelerin sırasını belirtir.
1
2
3
4
Koddaki ilk esnek öğenin mizanpajdaki ilk öğe olarak görünmesi gerekmez.
Sipariş değeri bir sayı olmalıdır, varsayılan değer 0'dır.
Örnek
order özelliği , esnek öğelerin sırasını değiştirebilir:
<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>
Esnek Büyüme Özelliği
Özellik flex-grow, esnek bir öğenin geri kalan esnek öğelere göre ne kadar büyüyeceğini belirtir.
1
2
3
Değer bir sayı olmalıdır, varsayılan değer 0'dır.
Örnek
Üçüncü esnek öğenin diğer esnek öğelerden sekiz kat daha hızlı büyümesini sağlayın:
<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>
flex-shrink Özellik
Özellik flex-shrink, esnek bir öğenin geri kalan esnek öğelere göre ne kadar küçüleceğini belirtir.
1
2
3
4
5
6
7
8
9
10
Değer bir sayı olmalıdır, varsayılan değer 1'dir.
Örnek
Üçüncü esnek öğenin diğer esnek öğeler kadar küçülmesine izin vermeyin:
<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>
esnek temelli Özellik
Özellik flex-basis, esnek bir öğenin başlangıç uzunluğunu belirtir.
1
2
3
4
Örnek
Üçüncü esnek öğenin ilk uzunluğunu 200 piksele ayarlayın:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 200px">3</div>
<div>4</div>
</div>
esnek Özellik
Özellik , , ve özellikleri flexiçin bir kestirme özelliktir .
flex-growflex-shrinkflex-basis
Örnek
Üçüncü esnek öğeyi büyütülemez (0), küçülemez (0) ve başlangıç uzunluğu 200 piksel olacak şekilde yapın:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex:
0 0 200px">3</div>
<div>4</div>
</div>
align-self Özelliği
Özellik align-self, esnek kap içinde seçilen öğe için hizalamayı belirtir.
Özellik align-self , kapsayıcının özelliği tarafından ayarlanan varsayılan hizalamayı geçersiz kılar align-items.
1
2
3
4
Bu örneklerde, özelliği daha iyi göstermek için 200 piksel yüksekliğinde bir kap kullanıyoruz
align-self:
Örnek
Üçüncü esnek öğeyi kabın 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>
Örnek
İkinci esnek öğeyi kabın üstündeki ve üçüncü esnek öğeyi kabın altındaki 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>
CSS Flexbox Öğeleri Özellikleri
Aşağıdaki tablo tüm CSS Flexbox Öğeleri özelliklerini listeler:
| Property | Description |
|---|---|
| align-self | Specifies the alignment for a flex item (overrides the flex container's align-items property) |
| flex | A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties |
| flex-basis | Specifies the initial length of a flex item |
| flex-grow | Specifies how much a flex item will grow relative to the rest of the flex items inside the same container |
| flex-shrink | Specifies how much a flex item will shrink relative to the rest of the flex items inside the same container |
| order | Specifies the order of the flex items inside the same container |