Skip to content

Commit f2e81f8

Browse files
authored
Merge pull request mdn#52 from mikoMK/improve-flexbox-marking-guide
Improve Flexbox marking guide
2 parents d6ec1f0 + f229354 commit f2e81f8

File tree

1 file changed

+21
-0
lines changed

1 file changed

+21
-0
lines changed

learn/tasks/flexbox/marking.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,16 @@ li {
3737
}
3838
```
3939

40+
### Additional question
41+
42+
The student should add an additional selector that targets the first element and sets `flex: 2;` (or `flex: 2 0 0;` or `flex-grow: 2`):
43+
44+
```
45+
li:first-child {
46+
flex: 2;
47+
}
48+
```
49+
4050
## Flex Layout Three
4151

4252
Here we use Flexbox to center an item horizontally and vertically. The aim of this task is to demonstrate the student has an understanding of how to use the alignment properties to achieve this.
@@ -54,3 +64,14 @@ On the parent they should use:
5464
## Flex Layout Four
5565

5666
This example demonstrates understanding of the `flex-wrap` property to wrap flex lines. In addition, to ensure that they end up with something that looks like the example they need to set `flex: auto` on the child (or `flex: 1 1 auto;`).
67+
68+
```
69+
ul {
70+
display: flex;
71+
flex-wrap: wrap;
72+
}
73+
74+
li {
75+
flex: auto;
76+
}
77+
```

0 commit comments

Comments
 (0)