Flexbox Froggy: изучаем Flexbox играясь

Posted on Edited on Disqus: Word count in article: 2.2k Reading time ≈ 2 mins.

Решил заняться изучением Flexbox и попался на глаза замечательный игровой тренажёр. В этом посте готовые решения для игры Flexbox Froggy. Самым сложным оказался уровень № 24.

Уровень 1

1
2
3
4
#pond {
  display: flex;
+ justify-content: flex-end;
}

Уровень 2

1
2
3
4
#pond {
  display: flex;
+ justify-content: center;
}

Уровень 3

1
2
3
4
#pond {
  display: flex;
+ justify-content: space-around;
}

Уровень 4

1
2
3
4
#pond {
  display: flex;
+ justify-content: space-between;
}

Уровень 5

1
2
3
4
#pond {
  display: flex;
+ align-items: flex-end;
}

Уровень 6

1
2
3
4
5
#pond {
  display: flex;
+ justify-content: center;
+ align-items: center;
}

Уровень 7

1
2
3
4
5
#pond {
  display: flex;
+ justify-content: space-around;
+ align-items: flex-end;
}

Уровень 8

1
2
3
4
#pond {
  display: flex;
+ flex-direction: row-reverse;
}

Уровень 9

1
2
3
4
#pond {
  display: flex;
+ flex-direction: column;
}

Уровень 10

1
2
3
4
5
#pond {
  display: flex;
+ flex-direction: row-reverse;
+ justify-content: flex-end;
}

Уровень 11

1
2
3
4
5
#pond {
  display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
}

Уровень 12

1
2
3
4
5
#pond {
  display: flex;
+ flex-direction: column-reverse;
+ justify-content: space-between;
}

Уровень 13

1
2
3
4
5
6
#pond {
  display: flex;
+ flex-direction: row-reverse;
+ justify-content: center;
+ align-items: flex-end;
}

Уровень 14

1
2
3
4
5
6
7
#pond {
  display: flex;
}

.yellow {
+ order: 3;
}

Уровень 15

1
2
3
4
5
6
7
#pond {
  display: flex;
}

.red {
+ order: -1;
}

Уровень 16

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

.yellow {
+ align-self: flex-end;
}

Уровень 17

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

.yellow {
	order: 1;
+ align-self: flex-end;
}

Уровень 18

1
2
3
4
#pond {
  display: flex;
+ flex-wrap: wrap;
}

Уровень 19

1
2
3
4
5
#pond {
  display: flex;
	flex-wrap: wrap;
+ flex-direction: column;
}

Уровень 20

1
2
3
4
#pond {
  display: flex;
+ flex-flow: column wrap;
}

Уровень 21

1
2
3
4
5
#pond {
  display: flex;
  flex-wrap: wrap;
+ align-content: flex-start;
}

Уровень 22

1
2
3
4
5
#pond {
  display: flex;
  flex-wrap: wrap;
+ align-content: flex-end;
}

Уровень 23

1
2
3
4
5
6
#pond {
  display: flex;
  flex-wrap: wrap;
+ flex-direction: column-reverse;
+ align-content: center;
}

Уровень 24

1
2
3
4
5
6
#pond {
  display: flex;
+ flex-flow: column-reverse wrap-reverse;
+ align-content: space-between;
+ justify-content: center;
}