Uitleg van flexbox

uit de cursus Webdesign & Layout met css (2019)

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Geef een reactie of stel een vraag

Geef een antwoord

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Webdesign & Layout met css (2019)

perm_identity Belinda | video_library 58 video's | query_builder 03:28:15

Webdesign met CSS

Met css bepaal je de layout en de vormgeving van een webpagina. CSS schrijf je in een apart bestand dat je koppelt aan de html-pagina’s. Hiermee koppel je de inhoud los van de vormgeving en dat biedt heel veel voordelen. Dankzij externe css-stijlbladen zorg je voor een consistente vormgeving en opmaak voor de gehele website. Leer op welke manier je CSS kan verbinden aan webpagina’s en gebruik te maken van de juiste css-selectors.

CSS blijft in ontwikkeling

CSS biedt een groot aantal css-stijlopdrachten waarmee je onder andere teksten en afbeeldingen perfect kunt vormgeven. CSS is continu in beweging omdat hier elke dag aan ontwikkeld wordt. Het is dus een taak om altijd op de hoogte te blijven van de nieuwe mogelijkheden en de veranderingen. Maar de basis is de basis, en die leer je in deze cursus. Vanuit dit startpunt kun je jezelf blijven ontwikkelen in deze krachtige manier van het consistent vormgeven van je HTML-pagina’s.

Doelgroep van deze cursus

Wil jij zelf de vormgeving van html-pagina’s bepalen dan is deze cursus absoluut een must.

Wat ga je leren

In deze online basiscursus  leer je de grondbeginselen van css (Cascading Style Sheets). Waaronder hoe je met grid en flexbox op een waanzinnig snelle, efficiënte en makkelijke manier snel een responsive design kunt maken die zich automatisch op elk formaat beeldscherm perfect aanpast. In deze cursus leer je direct hoe je jouw website responsive maakt met mediaqueries. Klinkt misschien ingewikkeld maar je zult merken dat dit reuze meevalt. En daarnaast is het vaardig worden van responsive design een ‘must’ voor webdesigners.

Vereiste voorkennis en vaardigheden

Voor het volgen van deze cursus heb je kennis en ervaring nodig van het vervaardigen en structureren van html-pagina’s.

css-grid en flexbox worden tegenwoordig in één adem uitgesproken

als het gaat om responsive webdesign en layout.

Beiden lijken soms hetzelfde te doen maar er is één heel groot verschil.

Met css-grid kun je een layout creëren op basis van rijen en kolommen.

Je kunt elementen dus in één stijlopdracht zowel horizontaal als verticaal positioneren.

Dat hebben we al gezien in het vorige hoofdstuk.

De volledige layout beschrijving zie je terug in één stijlopdracht. Je ziet hem hier staan.

Flexbox kan elementen enkel of horizontaal of verticaal positioneren.

Niet beide tegelijkertijd en dat is een heel ander verhaal.

Voor het grote layout-werk gebruik je het css-grid.

Voor de kleinere layouts binnen het grote geheel gebruik je meestal flexbox.

In ieder geval gebruik je flexbox als je enkel elementen horizontaal of verticaal wilt gaan verdelen.

Voor flexbox geldt net als bij het grid dat je een parent-element de opdracht geeft om van zijn kinderen flex-items te maken.

Dit doe je door aan de parent-selector de css-eigenschap display:flex te verbinden.

Hiermee wordt de parent een flex-container.

Alleen de eerstegraads-kinderen zullen dan gaan reageren op de flex-eigenschappen.

Dus in het geval van een lijst geef je de opdracht display:flex aan de -ul-.

Hiermee zijn de li's flex-items geworden.

In deze cursus behandel ik weer alleen de belangrijkste eigenschappen en opties van flexbox.

Mocht je meer willen weten over alle mogelijke instellingen en opties.

Dan verwijs ik je graag door naar de aparte cursus hierover.

Je begint met de eigenschappen voor de flex-container op te geven.

Wat je hier bepaalt geldt automatisch voor alle kinderen, de flex-items.

Bepaal eerst de richting met flex-direction.

Je kunt kiezen uit row of column.

Standaard proberen flex-items op één regel te gaan staan.

Om toestemming te geven om naar een volgende regel door te stromen kies je voor flex-wrap:wrap.

Anders staat deze standaard op no-wrap.

Items die dan niet op de regel passen kunnen dan voorbij de container gaan lopen.

Met als gevolg dat de inhoud niet meer zichtbaar is.

De wijze waarop de items zich horizontaal verdelen op de regel bepaal je met justify-content.

Je kunt ze centreren, links- of rechts laten uitlijnen of laten verdelen over de beschikbare ruimte.

Met align-items kun je elementen binnen een container

verticaal laten uitlijnen aan bovenkanten, onderkanten, middelpunten of laten uitrekken over de beschikbare ruimte.

In de komende video gaan we hiermee aan de slag.