Skip to content

Commit

Permalink
Improve Flexbox marking guide
Browse files Browse the repository at this point in the history
  • Loading branch information
mikoMK committed Sep 19, 2021
1 parent d6ec1f0 commit f229354
Showing 1 changed file with 21 additions and 0 deletions.
21 changes: 21 additions & 0 deletions learn/tasks/flexbox/marking.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,16 @@ li {
}
```

### Additional question

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`):

```
li:first-child {
flex: 2;
}
```

## Flex Layout Three

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.
Expand All @@ -54,3 +64,14 @@ On the parent they should use:
## Flex Layout Four

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;`).

```
ul {
display: flex;
flex-wrap: wrap;
}
li {
flex: auto;
}
```

0 comments on commit f229354

Please sign in to comment.