Today is sunday and also my birthday (I am 27 today 😭😭😭). I didn't get much done except doing the "CSS Flexbox" course on freecodecamp and watched a CSS Flexbox tutorial playlist done by The Net Ninja. CSS Flexbox is completely new to me hence it was very interesting to learn but I will need a lot of practice in order to grab the concept of it.
Here is a few notes I have taken while playing the Flexbox Froggy game which might help me remember flexbox a little better in the future:
Aligns items horizontally (unless flex-direction: column;). Below are the following values it accepts:
flex-start:Items align to the left side of the container.
flex-end:Items align to the right side of the container.
center:Items align at the center of the container.
space-between:Items display with equal spacing between them.
space-around:Items display with equal spacing around them.
Aligns items vertically. Below are the following values it accepts:
flex-start:Items align to the top side of the container.
flex-end:Items align to the bottom side of the container.
center:Items align at the vertical center of the container.
baseline:Items display at the baseline of the container.
stretch:Items are stretched to fit the container.
This CSS property defines the direction items are placed in the container. Below are the following values it accepts:
row:Items are placed the same as the text direction.
row-reverse:Items are placed opposite to the text direction.
column:Items are placed top to bottom.
column-reverse:Items are placed bottom to top.
flex-wrap property is used to specify whether flex items are forced into a single line or wrapped onto multiple lines.
nowrap:Every item is fit to a single line.
wrap:Items wrap around to additional lines.
wrap-reverse:Items wrap around to additional lines in reverse.
Flex-flow is a combination of these two properties:
flex-wrap. This shorthand property accepts the value of one of the two properties separated by a space.
flex-flow: column wrap - an example
This property sets how multiple lines are spaced apart from each other. This property takes the following values:
flex-start:Lines are packed at the top of the container.
flex-end:Lines are packed at the bottom of the container.
center:Lines are packed at the vertical center of the container.
space-between:Lines display with equal spacing between them.
space-around:Lines display with equal spacing around them.
stretch:Lines are stretched to fit the container.
NOTE: This can be confusing, but align-content determines the spacing between lines, while align-items determines how the items as a whole are aligned within the container. When there is only one line, align-content has no effect