Esnek kutu düzeni
CSS Esnek Kutu'nun ortaya çıkmasıyla, web tasarımcılarının 1 kabusları 1 çözüldü. En çirkinlerden biri, dikey hizalama. Şimdi bilinmeyen yüksekliklerde bile mümkün .
"Yirmi yıllık düzen saldırıları sona eriyor. Belki yarın değil, yakında ve hayatımızın geri kalanında."
- CSS Efsanevi Eric Meyer , W3Conf 2013'te
Esnek Kutu (ya da kısaca, Flexbox), özellikle yerleşim amacıyla tasarlanmış yeni bir düzen sistemidir. Şartname durumları :
Esnek düzen, yüzeysel olarak blok düzenine benzer. Kayan reklamlar ve sütunlar gibi blok düzeninde kullanılabilen daha karmaşık metin veya belge merkezli özelliklerin çoğundan yoksundur. Buna karşılık, alan dağıtmak ve içeriği webapps ve karmaşık web sayfalarının sıklıkla ihtiyaç duyduğu şekilde hizalamak için basit ve güçlü araçlar kazanır.
Bu durumda nasıl yardımcı olabilir? İyi, görelim bakalım.
Dikey hizalanmış sütunlar
Twitter Bootstrap kullanarak .rowbazı .col-*s var. Yapmamız gereken tek şey istenilen göstermektir .row2 bir şekilde esnek konteyner kutusu ve daha sonra tüm hizaya esnek öğe tarafından dikey ler (sütunlar)align-items özelliği.
BURADAN ÖRNEK (Lütfen yorumları dikkatle okuyun)
<div class="container">
<div class="row vertical-align"> <!--
^-- Additional class -->
<div class="col-xs-6"> ... </div>
<div class="col-xs-6"> ... </div>
</div>
</div>
.vertical-align {
display: flex;
align-items: center;
}
Çıktı
Renkli alan sütunların doldurma kutusunu görüntüler.
Açıklama align-items: center
8.3 Çapraz Eksen Hizalama: align-itemsözellik
Esnek eşyalar , esnek konteynerin mevcut hattının çapraz ekseninde , buna benzer, justify-contentancak dikey yönde hizalanabilir . align-itemsanonim esnek öğeler dahil olmak üzere tüm esnek kabın öğeleri için varsayılan hizalamayı ayarlar .
align-items: center;
Merkez değerine göre, esnek öğenin kenar boşluğu kutusu, çizgi içindeki çapraz eksende ortalanır .
Büyük Uyarı
Önemli not # 1: Twitter Bootstrap, sınıflardan widthbirini .col-xs-#sütunlara vermediğiniz sürece ekstra küçük cihazlardaki sütunları belirtmez .
Bu nedenle bu belirli demoda, .col-xs-*sütunların mobil modda düzgün görüntülenmesi için sınıfları kullandım , çünkü widthsütunun açıkça belirtildiğinden.
Ama alternatif olabilir kapatmak flexbox'a değiştirerek basitçe düzeni display: flex;için display: block;belirli ekran boyutlarında. Örneğin:
/* Extra small devices (767px and down) */
@media (max-width: 767px) {
.row.vertical-align {
display: block; /* Turn off the flexible box layout */
}
}
Veya yalnızca aşağıdaki gibi belirli ekran boyutlarında belirtebilirsiniz.vertical-align :
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
.row.vertical-align {
display: flex;
align-items: center;
}
}
Bu durumda, ben gelirdim @KevinNelson bireyin yaklaşımı .
Önemli not # 2: Kısalık nedeniyle satıcı ön ekleri atlandı. Flexbox sözdizimi zaman içinde değiştirildi. Yeni yazılı sözdizimi web tarayıcılarının eski sürümlerinde çalışmaz (ancak Internet Explorer 9 ve daha eski sürümlerde Internet Explorer 9! Flexbox desteklenmez).
Bu, satıcı gibi önceden eklenmiş özellikleri de kullanmanız gerektiği anlamına gelir display: -webkit-box , üretim modunda vb. .
Eğer tıklarsanız "Geçiş Derleyen Görünüm" in Demo , siz (sayesinde öneki CSS bildirimlerinde sürümünü göreceksiniz Autoprefixer ).
Dikey hizalanmış içeriğe sahip tam yükseklikte sütunlar
Önceki demoda gördüğünüz gibi , sütunlar (esnek öğeler) artık konteynerleri (esnek konteyner kutusu, yani .rowöğe) kadar yüksek değildir.
Bunun nedeni, özellik centeriçin değer kullanılmasıdır align-items. Varsayılan değer şudur:stretch öğelerin üst öğenin tüm yüksekliğini doldurabilmesidir.
Bunu düzeltmek display: flex;için sütunlara da ekleyebilirsiniz :
BURAYA ÖRNEK (Yine, yorumlara dikkat edin)
.vertical-align {
display: flex;
flex-direction: row;
}
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
display: flex;
align-items: center; /* Align the flex-items vertically */
justify-content: center; /* Optional, to align inner flex-items
horizontally within the column */
}
Çıktı
Renkli alan sütunların doldurma kutusunu görüntüler.
Son olarak, en önemlisi , buradaki demoların ve kod snippet'lerinin size farklı bir fikir vermek, hedefe ulaşmak için modern bir yaklaşım sağlamak olduğunu unutmayın. Bu yaklaşımı gerçek dünya web sitelerinde veya uygulamalarında kullanacaksanız lütfen " Büyük Uyarı " bölümüne dikkat edin.
Tarayıcı desteği de dahil olmak üzere daha fazla okuma için bu kaynaklar yararlı olacaktır:
1. Div içindeki bir görüntüyü duyarlı yükseklikle dikey olarak hizalayın
2. Twitter Bootstrap'ın varsayılan değerini değiştirmemek için ek bir sınıf kullanmak daha iyidir .row.
div, içerideki metin yok, böyle bir şey jsfiddle.net/corinem/Aj9H9 ama bu örnekte bootstrap kullanmıyorum