Info
I1
justify-content: space-between; vs justify-content: space-around; (Midten og mellomrom mellom, ender står fast og mellomrom mellom

I2 https://www.w3schools.com/css/css3_flexbox_container.asp
The align-items property is used to align the flex items when they do not use all available space on the cross-axis (vertically).

The align-content property is used to align the flex lines.
The align-content property is similar to align-items, but instead of aligning flex items, it aligns the flex lines.
All the content is alligned where deciced, start, end, center 

What: The align-content CSS property determines the spacing between lines and aligns items vertically and require multipple lines / rows.

I3
aprilFools css github 
https://github.com/juanfran/postcss-trolling
https://github.com/madeleineostoja/postcss-responsive-type
https://github.com/seaneking/postcss-responsive-type
https://github.com/jednano/postcss-all-link-colors
https://github.com/francoisromain/postcss-button
https://evilmartians.com/?utm_source=postcss-focus
https://gist.github.com/lucprincen/9548ab19bfc34f10ef8a
https://www.youtube.com/watch?v=OFkjpadgBAU LEVEL 24 | FLEXBOX FROGGY
https://codepip.com/games/grid-garden/
https://codepip.com/register/
https://www.youtube.com/watch?v=3elGSZSWTbM Flexbox or grid - How to decide?
https://www.youtube.com/watch?v=44FTAS-qT8Q 10 CSS PRO Tips and Tricks you NEED to know
https://www.youtube.com/watch?v=PL3Odw-k8W4 These CSS PRO Tips & Tricks Will Blow Your Mind!
https://www.youtube.com/watch?v=ugzxCcpoSdE spill

I4

    row-gap
    column-gap
  row-gap: 1rem;
  column-gap: 2rem;
  
Flexbox Froggy

7.3 (24-24) flex-flow:column-reverse wrap-reverse; justify-content:center; align-content:space-between;




align-items: center;
align-content: space-between;
flex-flow: column-reverse wrap-reverse;
justify-content: center;

flex-direction: column-reverse; 
flex-wrap: wrap-reverse;
justify-content:center;
align-content:space-between;

flex-flow:column-reverse wrap;
justify-content: center;
align-content: space-between;
transform: scaleX(-1);

flex-flow:column-reverse wrap-reverse;
justify-content: center;
align-content: space-between;
transform: scaleX(1);

flex-flow: column-reverse wrap;
justify-content: center;
align-content: space-between;
transform: scaleX(-.99955);

flex-flow: column-reverse wrap;
justify-content: center;
align-content: space-between;
rotate: 180deg;

flex-direction: column-reverse;
flex-wrap: wrap-reverse;
align-content: space-between;
justify-content: center;

flex-flow: column-reverse wrap;
justify-content: center;
align-content: space-between;
direction: rtl;

Bring the frogs home one last time by using the CSS properties you've learned:

    justify-content
    align-items
    flex-direction
    order
    align-self
    flex-wrap
    flex-flow
    align-content
	
7.3 (23-24) flex-direction: column-reverse; align-content: center;

The frogs have had a party, but it is time to go home. Use a combination of flex-direction and align-content to get them to their lilypads.

7.2 (22-24) align-content: flex-end;

Now the current has bunched the lilypads at the bottom. Use align-content to guide the frogs there.

7.1 (21-24) align-content: flex-start;
What: The align-content CSS property determines the spacing between lines and aligns items vertically and require multipple lines / rows.

The frogs are spread all over the pond, but the lilypads are bunched at the top. You can use align-content to set 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.

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.


6.1 (20-24) flex-flow: column wrap;
What: The flex-flow CSS shorthand property combines flex-direction and flex-wrap which can wrap around items to additional rows or columns.

The two properties flex-direction and flex-wrap are used so often together that the shorthand property flex-flow was created to combine them. This shorthand property accepts the value of the two properties separated by a space.

For example, you can use flex-flow: row wrap to set rows and wrap them.

Try using flex-flow to repeat the previous level.

Help this army of frogs form three orderly columns using a combination of flex-direction and flex-wrap.

5.2 (19-24) flex-direction: column; flex-wrap: wrap;

Help this army of frogs form three orderly columns using a combination of flex-direction and flex-wrap.


5.1 (18-24) flex-wrap: wrap;
What: The flex-wrap CSS property wraps around items to additional lines.

Oh no! The frogs are all squeezed onto a single row of lilypads. Spread them out using the flex-wrap property, which accepts the following values:

    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.

4.5 (17-24) order: 1; align-self: flex-end;

Combine order with align-self to help the frogs to their destinations.

4.4 (16-24) align-self: flex-end; ( container align-items: flex-end;)

Another property you can apply to individual items is align-self. This property accepts the same values as align-items and its value for the specific item.

4.3 (16-24) order: -1;

Another property you can apply to individual items is align-self. This property accepts the same values as align-items and its value for the specific item.

4.2 (15-24) order: -1;

Use the order property to send the red frog to his lilypad.

4.1 (14-24) order: 2;
What: The order CSS property orders individual items.

Sometimes reversing the row or column order of a container is not enough. In these cases, we can apply the order property to individual items. By default, items have a value of 0, but we can use this property to also set it to a positive or negative integer value (-2, -1, 0, 1, 2).

Use the order property to reorder the frogs according to their lilypads.

3.5 (13-24) justify-content: center; flex-direction: row-reverse; align-items: flex-end;

Help the frogs find their lilypads using flex-direction, justify-content, and align-items.

3.5 (12-24) justify-content: space-between; flex-direction: column-reverse;

Help the frogs find their lilypads using flex-direction and justify-content.

3.4 (11-24) justify-content: flex-end; flex-direction: column;

Help the frogs find their lilypads using flex-direction and justify-content.

Notice that when the flex direction is a column, justify-content changes to the vertical and align-items to the horizontal.

3.3 (10-24) justify-content: flex-end; flex-direction: row-reverse;

Help the frogs get to their own lilypads. Although they seem close, it will take both flex-direction and justify-content to get them there.

Notice that when you set the direction to a reversed row or column, start and end are also reversed.

3.2 (09-24) flex-direction: column;

Help the frogs find their column of lilypads using flex-direction. This CSS property defines the direction items are placed in the container, and accepts the following values:

    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.
	
3.1 (08-24) flex-direction: row-reverse;
What: The flex-direction CSS property defines the direction items are placed in the container.

The frogs need to get in the same order as their lilypads using flex-direction. This CSS property defines the direction items are placed in the container, and accepts the following values:

    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.

2.3 (07-24) justify-content: space-around; align-items: flex-end;

The frogs need to cross the pond again, this time for some lilypads with plenty of space around them. Use a combination of justify-content and align-items.

2.2 (06-24) justify-content: center; align-items: center;
    Lead the frog to the center of the pond using a combination of justify-content and align-items

2.1 (05-24) align-items: flex-end; align-items: center;
What: The align-items CSS property aligns items vertically.

Now use align-items to help the frogs get to the bottom of the pond. This CSS property aligns items vertically and accepts the following values:

    flex-start: Items align to the top of the container.
    flex-end: Items align to the bottom 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.


1.4 (04-24) justify-content: space-between;

Now the lilypads on the edges have drifted to the shore, increasing the space between them. Use justify-content. This time, the lilypads have equal spacing between them.

1.3 (03-24) justify-content: space-around;

Help all three frogs find their lilypads just by using justify-content. This time, the lilypads have lots of space all around them.

If you find yourself forgetting the possible values for a property, you can click on the property name to view them. Try clicking on justify-content.

1.2 (02-24) justify-content: center;

Use justify-content again to help these frogs get to their lilypads. Remember that this CSS property aligns items horizontally and accepts the following values:

    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.

1.1 (01-24) justify-content flex-end;
What: The justify-content CSS property aligns items vertically.

Welcome to Flexbox Froggy, a game where you help Froggy and friends by writing CSS code! Guide this frog to the lilypad on the right by using the justify-content property, which aligns items horizontally and accepts the following values:

    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.

For example, justify-content: flex-end; will move the frog to the right.