Voorkomen dat afbeelding krimpt met Flexbox

Flexbox is een CSS-modus die het een stuk eenvoudiger maakt om mooie lay-outs te maken. Een van de kenmerken van het Flexbox-model is dat elementen in een enkele rij kleiner worden naarmate de beschikbare ruimte afneemt.

Bijvoorbeeld, als je een rij elementen hebt en je verkleint de breedte van de browser, dan zullen de elementen in de breedte krimpen naarmate de breedte van het bevattende element vermindert. Dit is nodig om de elementen op een enkele rij te houden.

Als de rij een afbeelding bevat, heb je twee mogelijkheden:

• Laat de afbeelding samen met de andere elementen krimpen
• Houd de afbeelding een vaste grootte en laat de andere elementen toch krimpen.

Laten we eens kijken hoe je deze twee opties kunt uitvoeren.

De basis code van Flexbox

In dit eenvoudige voorbeeld hebben we een div die een afbeelding en info-tekst bevat.

We willen dat de afbeelding en tekst naast elkaar staan in een enkele rij. Het enige wat je hoeft te doen is de weergave van de container op flex te zetten:

.container {
    display: flex;
} 

Je hoeft je geen zorgen te maken over floats. Dankzij de magie van flexbox!

Flexbox en afbeelding passend maken

To ensure the image shrinks when the available space is reduced, simply set the with of img to 100%:

img {
  width: 100%;
}

Vaste breedte (fixed)

Om ervoor te zorgen dat de afbeelding krimpt wanneer de beschikbare ruimte wordt verkleind, zet je eenvoudig de img op 100%:

img {
  width: 100%;
}
 
.image {
    flex-shrink: 0;
}

Handleiding flexbox kolommen maken css grid div container

Volgorde van de kolommen

De volgorde van de kolommen kun je zelf bepalen. Belangrijk in verband met responsive.
De flex container eigenschappen zijn:

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

www.w3schools.com/css/css3_flexbox_container.asp

flex-grow

flex-grow: 0;

Het element zal niet groeien als er ruimte beschikbaar is. Het zal alleen de ruimte gebruiken die het nodig heeft.

flex-grow: 1;

Het element zal groeien met een factor 1. Het zal de resterende ruimte opvullen als geen ander flexbox item een flex-grow waarde heeft.

flex-grow: 2;

Omdat de flex-grow waarde relatief is, hangt het gedrag af van de waarde van de flexbox item siblings.
In dit voorbeeld wordt de resterende ruimte verdeeld in 3:
1 derde gaat naar het groene item
2 derde gaat naar het roze item
Niets gaat naar het gele item, dat zijn oorspronkelijke breedte behoudt

voorbeeld: cssreference.io/property/flex-grow/

See the Pen Flex-Shrink Example 2 by Geoff Graham (@geoffgraham) on CodePen.

Links:
https://stackoverflow.com/questions/43056180/flexbox-3-divs-two-columns-one-with-two-rows/43057107

See the Pen Flexbox list grid by Lottejackson (@lottejackson) on CodePen.

Flexbox en justify-content

De eigenschap justify-content is een sub-eigenschap van de module Flexibele kaderindeling.

Het definieert de uitlijning langs de hoofdas. Het helpt bij het verdelen van extra vrije ruimte die overblijft als alle flexitems op een regel niet flexibel zijn, of wel flexibel zijn maar hun maximale grootte hebben bereikt. Het geeft ook enige controle over de uitlijning van items als ze de lijn overlopen.

De justify-content eigenschap aanvaardt vijf verschillende waarden:

• flex-start (standaard): items worden ingepakt in de richting van de startregel
• flex-end: items worden ingepakt in de richting van de eindlijn
• center: items worden gecentreerd langs de lijn
• space-between: items worden gelijkmatig verdeeld over de lijn; eerste item is op de startlijn, laatste item op de eindlijn
• ruimte-om: items zijn gelijkmatig verdeeld in de lijn met gelijke ruimte eromheen
• spatie-gelijk: items zijn zo verdeeld dat de afstand tussen twee aangrenzende uitlijningsvakken, voor het eerste uitlijningsvak en na het laatste uitlijningsvak gelijk is

See the Pen Flexbox & justify-content by CSS-Tricks (@css-tricks) on CodePen.

Flexwrap voor flex items op een rij handleiding

De CSS eigenschap flex-wrap stelt in of flexitems op één regel moeten staan of op meerdere regels mogen staan. Als wikkelen is toegestaan, stelt het de richting in waarin regels worden gestapeld.
Een goede Flexwrap handleiding vind je hier:

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap