CSS Esnek Duyarlı
Duyarlı Flexbox
CSS Medya Sorguları bölümünden, farklı ekran boyutları ve cihazlar için farklı düzenler oluşturmak üzere medya sorgularını kullanabileceğinizi öğrendiniz .
Dizüstü ve Masaüstü Bilgisayarlar:
Cep ve Tabletler:
Örneğin, çoğu ekran boyutu için iki sütunlu bir düzen ve küçük ekran boyutları (telefonlar ve tabletler gibi) için tek sütunlu bir düzen oluşturmak istiyorsanız, flex-directionbaşlangıç
öğesini belirli bir kesme noktasında (800 piksel) olarak rowdeğiştirebilirsiniz . columnaşağıdaki örnek):
Örnek
.flex-container {
display: flex;
flex-direction: row;
}
/* Responsive layout - makes a one column layout instead of a two-column
layout */
@media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
}
flexBaşka bir yol, farklı ekran boyutları için farklı düzenler oluşturmak için esnek öğelerin özelliğinin yüzdesini değiştirmektir . flex-wrap: wrap;Bu örneğin çalışması için esnek kapsayıcıya da eklememiz gerektiğini unutmayın :
Örnek
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item-left {
flex: 50%;
}
.flex-item-right {
flex: 50%;
}
/* Responsive layout - makes a one column layout instead of a two-column
layout */
@media (max-width: 800px) {
.flex-item-right,
.flex-item-left {
flex: 100%;
}
}
Flexbox kullanarak Duyarlı Resim Galerisi
Ekran boyutuna bağlı olarak dört, iki veya tam genişlikte görüntü arasında değişen duyarlı bir görüntü galerisi oluşturmak için flexbox'ı kullanın:
Flexbox kullanarak Duyarlı Web Sitesi
Esnek bir gezinme çubuğu ve esnek içerik içeren duyarlı bir web sitesi oluşturmak için flexbox'ı kullanın: