Flexbox bilan moslashuvchan dizayn
Moslashuvchan Flexbox
Siz CSS media so‘rovlari bobidan media so‘rovlar yordamida turli ekran o‘lchamlari va qurilmalar uchun turli maketlar yaratishingiz mumkinligini bilib oldingiz.
Masalan, katta ekran o‘lchamlari uchun uch ustunli maket va kichik ekran o‘lchamlari (telefonlar kabi) uchun bir ustunli maket yaratmoqchi bo‘lsangiz, ma’lum breakpointda flex-direction ni row dan column ga o‘zgartirishingiz mumkin (quyidagi misolda 600px):
Misol
.flex-container {
display: flex;
flex-direction: row;
}
.flex-item {
background-color: #f1f1f1;
padding: 10px;
font-size: 30px;
text-align: center;
width: 100%;
}
/*
Make a one column-layout instead of three-column layout */
@media
(max-width: 600px) {
.flex-container {
flex-direction: column;
}
}
Yana bir usul — turli ekran o‘lchamlari uchun turli maketlar yaratish maqsadida flex elementlarning flex xossasi foizini o‘zgartirish. E’tibor bering, bu misol ishlashi uchun flex konteynerda flex-wrap: wrap; ni ham ko‘rsatish kerak:
Misol
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item
{
background-color: #f1f1f1;
padding: 10px;
text-align: center;
font-size: 30px;
flex: 33.3%;
}
/*
Make a one
column-layout instead of a three-column layout */
@media (max-width: 600px)
{
.flex-item {
flex: 100%;
}
}
Flexbox yordamida moslashuvchan rasm galereyasi
Bu yerda biz moslashuvchan rasm galereyasi yaratish uchun media so‘rovlar va flexbox’ni birga ishlatamiz:
O‘zingiz sinab ko‘ring »Flexbox yordamida moslashuvchan veb-sayt
Moslashuvchan navigatsiya paneli va moslashuvchan kontentdan iborat responsive veb-sayt yaratish uchun flexbox’dan foydalaning:
O‘zingiz sinab ko‘ring »W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!