NS- Notes

 CSS


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.



1
2
3
4
5
6
7
8
9
10
#pond {
  display: flex;

}
Flexbox Froggy is created by Codepip • GitHub • Twitter •

Another property you can apply to individual items

align-self:flex-end;

 is align-self. This property accepts the same values as align-items and its value for the specific item.

1
2
3
4
5
6
7
8
9
10
#pond {
  display: flex;
  align-items: flex-start;
}

.yellow {

}
Flexbox Froggy is created by Codepip • GitHub • Twitter •

flex-wrap:wrap;

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.

1
2
3
4
5
6
7
8
9
10
#pond {
  display: flex;

}
Flexbox Froggy is created by Codepip • GitHub • Twitter •

flex-flow:column wrap;

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.

1
2
3
4
5
6
7
8
9
10
#pond {
  display: flex;

}
Flexbox Froggy is created by Codepip • GitHub • Twitter •

align-content:flex-start;

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.

1
2
3
4
5
6
7
8
9
10
#pond {
  display: flex;
  flex-wrap: wrap;

}
Flexbox Froggy is created by Codepip • GitHub • Twitter •

flex-flow: column-reverse wrap-reverse;

align-content:space-between;

justify-content:center;

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

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

GRID GARDEN


GRID GARDEN

Level 16 of 28 ▾

If typing out both grid-column and grid-row is too much for you, there's yet another shorthand for that. grid-area accepts four values separated by slashes: grid-row-start, grid-column-start, grid-row-end, followed by grid-column-end.

One example of this would be grid

If typing out both grid-column and grid-row is too much for you, there's yet another shorthand for that. grid-area accepts four values separated by slashes: grid-row-start, grid-column-start, grid-row-end, followed by grid-column-end.

One example of this would be grid-area: 1 / 1 / 3 / 6;.-area: 1 / 1 / 3 / 6;.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {

}

grid-template-columns: repeat(8, 12.5%);

Specifying a bunch of columns with identical widths can get tedious. Luckily there's a repeat function to help with that.

For example, we previously defined five 20% columns with the rule grid-template-columns: 20% 20% 20% 20% 20%;. This can be simplified as grid-template-columns: repeat(5, 20%);

Using grid-template-columns with the repeat function, create eight columns each with 12.5% width. This way you won't overwater your garden.

Specifying a bunch of columns with identical widths can get tedious. Luckily there's a repeat function to help with that.

For example, we previously defined five 20% columns with the rule grid-template-columns: 20% 20% 20% 20% 20%;. This can be simplified as grid-template-columns: repeat(5, 20%);

Using grid-template-columns with the repeat function, create eight columns each with 12.5% width. This way you won't overwater your garden.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#garden {
  display: grid;

  grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {
  grid-column: 1;
  grid-row: 1;
}
Grid Garden is created by Codepip • GitHub • Twitter • English

grid-template-columns doesn't just accept values in percentages, but also length units like pixels and ems. You can even mix different units together.

Here, set three columns to 100px, 3em, and 40% respectively.

#garden {
  display: grid;

  grid-template-rows: 20% 20% 20% 20% 20%;
}

m

Comments

Post a Comment