CSS Esnek Kapsayıcı
Ana Öğe (Kapsayıcı)
Önceki bölümde belirttiğimiz gibi, bu, üç esnek öğeye sahip esnek bir kapsayıcıdır (mavi alan) :
1
2
3
displayEsnek kap, özelliği şu şekilde
ayarlayarak esnek hale gelir flex:
Örnek
.flex-container {
display: flex;
}
Esnek kapsayıcı özellikleri şunlardır:
esnek yön Özelliği
Özellik flex-direction, kabın esnek öğeleri hangi yönde istiflemek istediğini tanımlar.
1
2
3
Örnek
Değer column, esnek öğeleri dikey olarak istifler (yukarıdan aşağıya):
.flex-container {
display: flex;
flex-direction: column;
}
Örnek
Değer column-reverse, esnek öğeleri dikey olarak (ancak aşağıdan yukarıya doğru) istifler:
.flex-container {
display: flex;
flex-direction: column-reverse;
}
Örnek
Değer row, esnek öğeleri yatay olarak istifler (soldan sağa):
.flex-container {
display: flex;
flex-direction: row;
}
Örnek
Değer row-reverse, esnek öğeleri yatay olarak (ancak sağdan sola) istifler:
.flex-container {
display: flex;
flex-direction: row-reverse;
}
esnek sarma Özelliği
Özellik flex-wrap, esnek öğelerin sarılıp sarılmayacağını belirtir.
Aşağıdaki örnekler,
flex-wrapözelliği daha iyi göstermek için 12 esnek öğeye sahiptir.
1
2
3
4
5
6
7
8
9
10
11
12
Örnek
Değer wrap, gerekirse esnek öğelerin sarılacağını belirtir:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Örnek
Değer nowrap, esnek öğelerin kaydırılmayacağını belirtir (bu varsayılandır):
.flex-container {
display: flex;
flex-wrap: nowrap;
}
Örnek
Değer wrap-reverse, gerektiğinde esnek öğelerin ters sırada sarılacağını belirtir:
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
flex-flow Özellik
Özellik , hem ve
özellikleri flex-flowayarlamak için bir kestirme özelliktir .
flex-directionflex-wrap
Örnek
.flex-container {
display: flex;
flex-flow: row wrap;
}
justify-content Özellik
Özellik justify-content, esnek öğeleri hizalamak için kullanılır:
1
2
3
Örnek
Değer center, esnek öğeleri kabın ortasında hizalar:
.flex-container {
display: flex;
justify-content: center;
}
Örnek
Değer flex-start, esnek öğeleri kapsayıcının başında hizalar (bu varsayılandır):
.flex-container {
display: flex;
justify-content: flex-start;
}
Örnek
Değer flex-end, kapsayıcının sonundaki esnek öğeleri hizalar:
.flex-container {
display: flex;
justify-content: flex-end;
}
Örnek
Değer space-around, satırların öncesinde, arasında ve sonrasında boşluk bulunan esnek öğeleri görüntüler:
.flex-container {
display: flex;
justify-content: space-around;
}
Örnek
Değer space-between, satırlar arasında boşluk bulunan esnek öğeleri görüntüler:
.flex-container {
display: flex;
justify-content: space-between;
}
hizalama öğeleri Özellik
Özellik align-items, esnek öğeleri hizalamak için kullanılır.
1
2
3
Bu örneklerde, özelliği daha iyi göstermek için 200 piksel yüksekliğinde bir kap kullanıyoruz
align-items.
Örnek
Değer center, esnek öğeleri kabın ortasında hizalar:
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
Örnek
Değer flex-start, kapsayıcının üstündeki esnek öğeleri hizalar:
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
Örnek
Değer flex-end, kapsayıcının altındaki esnek öğeleri hizalar:
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
Örnek
Değer stretch, esnek öğeleri kapsayıcıyı dolduracak şekilde genişletir (bu varsayılandır):
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
Örnek
Değer baseline, taban çizgileri gibi esnek öğeleri hizalar:
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}
Not: Örnek, öğelerin metin taban çizgisine göre hizalandığını göstermek için farklı yazı tipi boyutunu kullanır:
1
2
3
hizalama içeriği Özelliği
Özellik align-content, esnek çizgileri hizalamak için kullanılır.
1
2
3
4
5
6
7
8
9
10
11
12
Bu örneklerde, özelliği daha iyi göstermek için
flex-wrapözelliği olarak ayarlanmış 600 piksel yüksekliğinde bir kap kullanıyoruz .wrapalign-content
Örnek
Değer space-between, aralarında eşit boşluk olan esnek çizgileri görüntüler:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
Örnek
Değer space-around, aralarında ve sonrasında boşluk bulunan esnek çizgileri görüntüler:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}
Örnek
Değer stretch, kalan alanı kaplayacak şekilde esnek çizgileri uzatır (bu varsayılandır):
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}
Örnek
Değer centerekranları, kabın ortasındaki esnek çizgileri görüntüler:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}
Örnek
Değer flex-start, kapsayıcının başlangıcındaki esnek çizgileri görüntüler:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}
Örnek
Değer flex-end, kapsayıcının sonundaki esnek çizgileri görüntüler:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}
Mükemmel Merkezleme
Aşağıdaki örnekte çok yaygın bir stil problemini çözeceğiz: mükemmel merkezleme.
ÇÖZÜM:justify-content ve align-itemsözelliklerini olarak
ayarlayın centerve esnek öğe mükemmel bir şekilde ortalanacaktır:
Örnek
.flex-container {
display: flex;
height: 300px;
justify-content:
center;
align-items: center;
}
CSS Flexbox Kapsayıcı Özellikleri
Aşağıdaki tablo, tüm CSS Flexbox Container özelliklerini listeler:
| Property | Description |
|---|---|
| align-content | Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines |
| align-items | Vertically aligns the flex items when the items do not use all available space on the cross-axis |
| display | Specifies the type of box used for an HTML element |
| flex-direction | Specifies the direction of the flexible items inside a flex container |
| flex-flow | A shorthand property for flex-direction and flex-wrap |
| flex-wrap | Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line |
| justify-content | Horizontally aligns the flex items when the items do not use all available space on the main-axis |