0055 flexbox 1 - bildgalleri
Flexbox är det nya sättet att ordna layouten på en webbsida. För väldigt enkla sidor klarar man sig dock utan flexbox.
På JSFiddle finns lite kod som du kan leka med
Använd A Complete Guide to Flexbox, CSS-Tricks som uppslagsverk för att göra följande uppgifter.
Spara helst uppgifterna på din egen JSFiddle under de namn som ges nedan så att du kan gå tillbaka och titta senare. Länka till uppgifterna på startsidan och ladda upp startsidan till webbhotellet.
Uppgifter
Namn: flex-direction. Testa de fyra värdena row, row-revers, column, column-reverse på egenskapen flex-direction.
Namn: flex-wrap. Testa de tre värdena wrap, nowrap, wrap-reverse på egenskapen flex-wrap.
Namn: justify-content. Testa de fem olika värdena flex-start, flex-end, center, space-around och space-between på egenskapen justify-content.
Namn: align-items. Testa de fem värdena flex-start, flex-end, center, baseline och stretch på egenskapen align-items. Du behöver ändra på HTML-koden så att du kan se skillnaden, samt ta bort height för p-taggarna i CSS.
Namn: align-content. Testa de sex värdena på egenskapen align-content. Det är samma värden som för egenskapen justify-content.
Namn: bildgalleri. Gör en ny mapp 0055-bildgalleri. Gör ett bildgalleri. Använd flexbox för att arrangera bilderna. Låt ditt galleri visa 4 bilder på bredden och minst 3 på höjden. Se till att bilderna visas lika breda men låt dem vara olika höga. Bestäm hur du vill att luften kring bilderna ska fördelas och använd flexbox för att se till att det blir som du vill. Bildgalleriet görs lokalt på din dator för att sedan laddas upp till webbhotellet. Gör det alltså inte i JSFiddle.
Mer om flexbox:
Stöd för flexbox i olika webbläsare, CanIUse.com