CSS Flex reageer
Responsiewe Flexbox
Jy het uit die CSS Medianavrae- hoofstuk geleer dat jy medianavrae kan gebruik om verskillende uitlegte vir verskillende skermgroottes en toestelle te skep.
Skootrekenaars en rekenaars:
Selfone en
:Byvoorbeeld, as jy 'n twee-kolom-uitleg vir die meeste skermgroottes wil skep, en 'n een-kolom-uitleg vir klein skermgroottes (soos fone en tablette), kan jy die flex-direction
van row
na column
by 'n spesifieke breekpunt verander (800px in die voorbeeld hieronder):
Voorbeeld
.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;
}
}
Nog 'n manier is om die persentasie van die flex
eiendom van die buigitems te verander om verskillende uitlegte vir verskillende skermgroottes te skep. Let daarop dat ons ook flex-wrap: wrap;
op die buighouer moet insluit vir hierdie voorbeeld om te werk:
Voorbeeld
.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%;
}
}
Responsiewe beeldgalery met Flexbox
Gebruik flexbox om 'n responsiewe beeldgalery te skep wat wissel tussen vier, twee of volle breedte beelde, afhangende van die skermgrootte:
Responsiewe webwerf wat Flexbox gebruik
Gebruik flexbox om 'n responsiewe webwerf te skep wat 'n buigsame navigasiebalk en buigsame inhoud bevat: