CSS3 Flexbox
Esnek kutularına veya flexbox , CSS3 yeni bir düzen modudur.
Kullanımı flexbox sayfa düzeni farklı ekran boyutları ve farklı görüntüleme cihazları yerleştirmek gerektiğinde elemanlar tahmin edilebileceği davranması sağlanmaktadır.
Birçok uygulama için, esnek kutu modeli yüzen kullanmak, ne de içindekiler marjları ile esnek kabın marjları çöküşü yapmaz blok modeli üzerinde bir iyileşme sağlar.
Tarayıcı Desteği
Tablodaki rakamlar tamamen özelliği destekleyen ilk tarayıcı sürümü belirtin.
Sayılar ardından -webkit- veya -moz- bir önek ile çalıştığım ilk versiyonunu belirtin.
| özellik | |||||
|---|---|---|---|---|---|
| Basic support (single-line flexbox) |
29.0 21.0 -webkit- |
11.0 | 22.0 18.0 -moz- |
6.1 -webkit- | 12.1 -webkit- |
| Multi-line flexbox | 29.0 21.0 -webkit- |
11.0 | 28.0 | 6.1 -webkit- | 17.0 15.0 -webkit- 12.1 |
CSS3 Flexbox Kavramlar
Flexbox esnek kaplarda ve esnek maddeden oluşmaktadır.
Bir esnek kap ayarlayarak bildirilen display ya da bir elemanın özelliği flex (rendered as a block) ya da inline-flex (rendered as inline) .
Bir esnek kap İçinde bir veya daha fazla esnek öğe var.
Not: Bir esnek konteyner dışında ve esnek bir öğeye içindeki her şey her zamanki gibi oluşturulur. Flexbox'a bir esnek kabın içine nasıl yerleştirildiğini esnek ürün tanımlar.
Esnek öğe bir esnek hat boyunca bir esnek kap içinde konumlandırılır. Varsayılan olarak esnek konteyner başına yalnızca bir esnek çizgi vardır.
Aşağıdaki örnek, üç esnek öğeleri gösterir. Bunlar varsayılan olarak konumlandırılmıştır: Yatay esnek hat boyunca, soldan sağa doğru:
Örnek
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width:
400px;
height: 250px;
background-color:
lightgrey;
}
.flex-item
{
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div
class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div
class="flex-item">flex item 3</div>
</div>
</body>
</html>Esnek çizginin yönünü değiştirmek de mümkündür.
Biz ayarlarsanız direction mülkü rtl (right-to-left) , metin sağa çizilmiş ayrıldı ve ayrıca esnek hat sayfa düzenini değiştirecek yön değiştirir edilir:
Örnek
body {
direction: rtl;
}
.flex-container {
display: -webkit-flex;
display: flex;
width:
400px;
height: 250px;
background-color:
lightgrey;
}
.flex-item
{
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
} Flex Yön
flex-direction özelliği esnek kabın içine esnek öğelerin yönünü belirtir. Varsayılan değeri flex-direction olduğu row (soldan sağa, yukarıdan alt).
aşağıdaki gibi başka değerler şunlardır:
-
row-reverse- yazma modu ise (direction) soldan sağa doğrudur, esnek öğe kaldı hakkına şekilde düzenlenir -
column- yazma sistemi yatay ise, esnek ürün dikey şekilde düzenlenir -
column-reverse- sütunu ile aynı, ancak ters
Aşağıdaki örnek ile sonucunu göstermektedir row-reverse değeri:
Örnek
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row-reverse;
flex-direction:
row-reverse;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Aşağıdaki örnek ile sonucunu göstermektedir column değeri:
Örnek
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction:
column;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Aşağıdaki örnek ile sonucunu göstermektedir column-reverse değeri:
Örnek
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column-reverse;
flex-direction:
column-reverse;
width:
400px;
height: 250px;
background-color:
lightgrey;
} haklı içerik Mülkiyet
justify-content öğeleri ana ekseni üzerindeki tüm kullanılabilir alanı kullanmadığınızda özellik yatay esnek kabın öğeleri hizalar.
Olası değerler şunlardır:
-
flex-start- Varsayılan değer. Öğeler kabın başında konumlandırılmış -
flex-end- Ürünler kabın ucunda konumlandırılmış -
center- Öğeler kabın merkezinde konumlandırılmış -
space-between- Ürünler çizgiler arasındaki boşluk konumlandırılır -
space-around- Ürünler arasında, daha önce boşluk yerleştirilebilir ve satırları sonra edilir
Aşağıdaki örnek ile sonucunu göstermektedir flex-end değeri:
Örnek
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-end;
justify-content:
flex-end;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Aşağıdaki örnek ile sonucunu göstermektedir center değeri:
Örnek
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content:
center;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Aşağıdaki örnek ile sonucunu göstermektedir space-between değer:
Örnek
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content:
space-between;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Aşağıdaki örnek ile sonucunu göstermektedir space-around değeri:
Örnek
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
justify-content:
space-around;
width:
400px;
height: 250px;
background-color:
lightgrey;
} hizalama-kalemlerdir
align-items ürün çapraz ekseni üzerinde tüm kullanılabilir alanı kullanmadığınızda özellik dikey esnek kabın öğeleri hizalar.
Olası değerler şunlardır:
-
stretch- Varsayılan değer. Öğeler kabı sığacak şekilde uzatılır -
flex-start- Öğeler kabın üst kısmında konumlandırılmış -
flex-end- Ürünler kabın alt kısmında konumlandırılmış -
center- Öğeler kabın merkezinde konumlandırılmıştır (vertically) -
baseline- Ürünler, kabın taban çizgisinde konumlandırılır
Aşağıdaki örnek ile sonucunu göstermektedir stretch değeri (this is the default value) :
Örnek
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
align-items:
stretch;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Aşağıdaki örnek ile sonucunu göstermektedir flex-start değeri:
Örnek
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-start;
align-items:
flex-start;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Aşağıdaki örnek ile sonucunu göstermektedir flex-end değeri:
Örnek
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-end;
align-items:
flex-end;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Aşağıdaki örnek ile sonucunu göstermektedir center değeri:
Örnek
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items:
center;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Aşağıdaki örnek ile sonucunu göstermektedir baseline değeri:
Örnek
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: baseline;
align-items:
baseline;
width:
400px;
height: 250px;
background-color:
lightgrey;
} esnek-wrap Mülkiyet
flex-wrap özelliği bir esnek satırda onlar için yeterli yer yoksa esnek öğeleri sarmak veya olmasın gerekip gerekmediğini belirtir.
Olası değerler şunlardır:
-
nowrap- Varsayılan değer. Esnek ürün sarın olmaz -
wrap- Gerekirse esnek ürün kaydırılır -
wrap-reverse- Gerekirse esnek ürün ters sırada, kaydırılır
Aşağıdaki örnek ile sonucunu göstermektedir nowrap değeri (this is the default value) :
Örnek
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
width:
300px;
height: 250px;
background-color:
lightgrey;
} Aşağıdaki örnek ile sonucunu göstermektedir wrap değeri:
Örnek
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width:
300px;
height: 250px;
background-color:
lightgrey;
} Aşağıdaki örnek ile sonucunu göstermektedir wrap-reverse değeri:
Örnek
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap-reverse;
flex-wrap:
wrap-reverse;
width:
300px;
height: 250px;
background-color:
lightgrey;
} hizalama içerikli Mülkiyet
align-content mülkiyet davranışını değiştiren flex-wrap özelliği. Benzer align-items , ancak bunun yerine esnek öğeleri hizalayarak nedeniyle, esnek çizgiler hizalar.
Olası değerler şunlardır:
-
stretch- Varsayılan değer. Çizgiler kalan yer kaplar için germek -
flex-start- Çizgiler esnek konteyner başlangıcına doğru paketlenmiş -
flex-end- Çizgiler esnek kabın sonuna doğru paketlenmiş -
center- Çizgiler esnek kabın merkezine doğru paketlenmiş -
space-between- Lines eşit esnek bir kap içinde dağıtılır -
space-around- hatlar eşit iki ucunda yarı boyutlu boşluklu, esnek bir kap içinde dağıtılır
Aşağıdaki örnek ile sonucunu göstermektedir center değeri:
Örnek
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap:
wrap;
-webkit-align-content: center;
align-content:
center;
width:
300px;
height: 300px;
background-color:
lightgrey;
} Flex öğesi özellikleri
Sipariş
order Tesis, aynı kabın içine esnek öğelerin geri kalanı için esnek madde göreli sırasını belirtir:
Örnek
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
.first {
-webkit-order: -1;
order: -1;
} kenar
Ayar margin: auto; Ekstra alan emecektir. Farklı pozisyonlara esnek öğeleri itmek için kullanılabilir.
Aşağıdaki örnekte set margin-right: auto; İlk esnek öğeye. Bu, tüm ekstra alan bu elemanın sağında absorbe edilmesine neden olacaktır:
Örnek
.flex-item {
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: 10px;
}
.flex-item:first-child {
margin-right: auto;
} Mükemmel Merkezleme
tam ortalanmasını: Aşağıdaki örnekte neredeyse günlük sorunu çözecektir.
Bu flexbox'a ile çok kolaydır. Ayar margin: auto; mükemmel hem eksen merkezli öğeyi yapacaktır:
Örnek
.flex-item {
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: auto;
} hizalamak-öz
align-self esnek öğelerin mülkiyet konusu öğe için esnek kabın hizalama-ürün özelliğini geçersiz kılar. Bu aynı olası değerlere sahip align-items özelliği.
Aşağıdaki örnek, her esnek öğesine farklı hizalama-öz değerlerini ayarlar:
Örnek
.flex-item {
background-color: cornflowerblue;
width: 60px;
min-height: 100px;
margin: 10px;
}
.item1 {
-webkit-align-self: flex-start;
align-self:
flex-start;
}
.item2 {
-webkit-align-self: flex-end;
align-self: flex-end;
}
.item3 {
-webkit-align-self: center;
align-self: center;
}
.item4 {
-webkit-align-self:
baseline;
align-self: baseline;
}
.item5 {
-webkit-align-self: stretch;
align-self: stretch;
} esnek
flex özellik aynı kabın içine esnek öğelerin geri kalan kısmına göre esnek öğenin uzunluğunu belirtir.
Aşağıdaki örnekte, ilk esnek madde boş alan 2/4 tüketir ve diğer iki esnek ürün boş alan her 1/4 tüketir:
Örnek
.flex-item {
background-color: cornflowerblue;
margin: 10px;
}
.item1 {
-webkit-flex: 2;
flex: 2;
}
.item2 {
-webkit-flex: 1;
flex: 1;
}
.item3 {
-webkit-flex: 1;
flex: 1;
} 
Diğer Örnekler
Flexbox'a ile Duyarlı bir web sitesi oluşturma
Bu örnek flexbox'a ile duyarlı web sitesi düzeni nasıl oluşturulacağını gösterir.
CSS3 flexbox'a Özellikleri
Aşağıdaki tabloda flexbox'a ile kullanılan CSS özelliklerini listeler:
| özellik | Açıklama |
|---|---|
| display | Bir HTML elemanı için kullanılan kutu türünü belirtir |
| flex-direction | Bir esnek kabın içine esnek öğelerin yönünü belirtir |
| justify-content | Yatay ürün ana ekseni üzerindeki tüm kullanılabilir alanı kullanmadığınızda esnek öğeleri hizalar |
| align-items | Dikey ürün çapraz ekseni üzerinde tüm kullanılabilir alanı kullanmadığınızda esnek öğeleri hizalar |
| flex-wrap | bir esnek satırda onlar için yeterli yer yoksa esnek öğeleri sarmak veya olmasın belirtir |
| align-content | esnek-wrap özelliği davranışını değiştirir. Bu hizaya-öğeleri için, bunun yerine esnek öğeleri hizalanması benzer, o esnek çizgiler hizalar |
| flex-flow | esnek-yön ve esnek-sarma için steno propert |
| order | Aynı kap içindeki esnek öğelerin geri kalanı için esnek madde göreli sırasını belirtir |
| align-self | esnek öğeler üzerinde kullanılır. Konteynerin hizalama-ürün özelliğini geçersiz kılar |
| flex | Aynı kap içindeki esnek öğelerin geri kalan kısmına göre bir esnek öğenin uzunluğunu belirtir |