CSS handleiding

CSS TUIS CSS Inleiding CSS-sintaksis CSS-keurders CSS Hoe om CSS Kommentaar CSS kleure CSS agtergronde CSS-grense CSS-marges CSS Opvulling CSS Hoogte/Breedte CSS Box Model CSS uiteensetting CSS teks CSS lettertipes CSS-ikone CSS skakels CSS-lyste CSS-tabelle CSS vertoon CSS maksimum breedte CSS posisie CSS Z-indeks CSS oorloop CSS Float CSS Inline-blok CSS Belyn CSS-kombineerders CSS Pseudo-klas CSS Pseudo-element CSS Deursigtigheid CSS-navigasiebalk CSS-aftrekkies CSS Beeldgalery CSS Beeld Sprites CSS Attr keurders CSS-vorms CSS-tellers CSS-webwerfuitleg CSS-eenhede CSS Spesifisiteit CSS !belangrik CSS Wiskunde funksies

CSS Gevorderd

CSS afgeronde hoeke CSS-randbeelde CSS agtergronde CSS kleure CSS-kleur sleutelwoorde CSS Gradiënte CSS Shadows CSS-tekseffekte CSS Web Fonts CSS 2D-transformasies CSS 3D-transformasies CSS-oorgange CSS-animasies CSS Tooltips CSS-stylbeelde CSS-beeldrefleksie CSS-objekpas CSS voorwerp-posisie CSS-maskering CSS-knoppies CSS-paginering CSS veelvuldige kolomme CSS-gebruikerskoppelvlak CSS veranderlikes CSS-boksgrootte CSS-medianavrae CSS MQ Voorbeelde CSS Flexbox

CSS reageer

RWD Inleiding RWD Uitsigpoort RWD-roosteraansig RWD Media Navrae RWD beelde RWD-video's RWD-raamwerke RWD-sjablone

CSS -rooster

Grid Intro Roosterhouer Rooster item

CSS SASS

SASS Tutoriaal

CSS voorbeelde

CSS-sjablone CSS voorbeelde css vasvra CSS Oefeninge CSS-sertifikaat

CSS Verwysings

CSS Verwysing CSS-keurders CSS-funksies CSS Verwysing Gehoor CSS Web veilige lettertipes CSS Animateerbaar CSS-eenhede CSS PX-EM-omskakelaar CSS kleure CSS-kleurwaardes CSS verstekwaardes CSS-blaaierondersteuning

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:

1
2
3

Selfone en tablette :

1
2
3

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-directionvan rowna 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 flexeiendom 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: