Complete the Flex layout in Flexbox Froggy

Recently found a game to learn flex layout, share with everyone => Flexbox Froggy

A total of 24 levels, below the start of the journey to complete the journey ~

Attached with reference answers

```
justify-content: flex-end
Copy the code
```
```
justify-content: center
Copy the code
```

justify-content: space-around
Copy the code

justify-content: space-between
Copy the code

```
align-items: flex-end
Copy the code
```

justify-content: center;
align-items: center
Copy the code

justify-content: space-around;
align-items: flex-end
Copy the code

flex-direction: row-reverse
Copy the code

```
flex-direction: column
Copy the code
```

flex-direction: row-reverse;
justify-content: flex-end
Copy the code

flex-direction: column;
justify-content: flex-end
Copy the code

flex-direction: column-reverse;
justify-content: space-between
Copy the code

flex-direction: row-reverse;
justify-content: center;
align-items: flex-end
Copy the code

```
order: 1
Copy the code
```
```
order: -1
Copy the code
```
```
align-self: flex-end
Copy the code
```

order: 1;
align-self: flex-end
Copy the code

```
flex-wrap: wrap;
Copy the code
```

flex-direction: column;
flex-wrap: wrap
Copy the code

```
flex-flow: column wrap
Copy the code
```
```
align-content: flex-start
Copy the code
```
```
align-content: flex-end
Copy the code
```

flex-direction: column-reverse;
align-content: center
Copy the code

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

conclusion

The principle of Flex layout is to add Flex properties to the parent box to control the placement of the child boxes.

When we set the parent box to flex layout, the float, clear, and vertical-align attributes of the child elements are invalidated.

flex-direction

The default main axis in Flex layout is row, X-axis.

If you want to change the spindle direction, you can change it by setting flex-direction.

flex-direction:column; Let’s change the axis to y and vertical.

flex-direction:row; Let’s change the axis to X-axis, X-axis.

flex-direction:row- reverse; The main axis is the X-axis, and it’s flipped.

flex-direction:column- reverse; The main axis is y, and it’s flipped.

justify-content

Context-content allows you to set the arrangement of the main axis child elements.

With a value of flex-start all child elements are displayed in the spindle header.

All child elements with a value of flex-end are displayed at the end of the main axis.

With a value of flex-center all child elements are aligned with the main axis center.

The value is space-around and all children divide the remaining space equally.

With the value space-between, all children first edge each other and divide the remaining space.

flex-wrap

Flex-wrap controls whether or not a child element wraps.

Default is no line breaks when Flex layout is enabled.

If you want a line break effect set flex-wrap: wrap.

align-items

Align-items Sets the alignment of side axis elements.

Align-items allows you to set the alignment of side axis elements when the child items are single items.

A value of flex-start for align-items indicates the start.

A flex-end value for align-items indicates that the items start from the end.

Align-items with center indicates that the display is centered.

Align-items with a value of stretch stretches the child element.

align-content

Align-content Sets the alignment of side axis child elements.

Align-content is suitable for line feed (multiple lines) (not valid for single line). You can set up, down, center, stretch, and evenly allocate the remaining space.

The difference between Align-item and Align- content single line Align- items multiple lines Align- content

flex-flow

Flex-flow is a combination of flex-direction and flex-wrap.

order

Order is an attribute set in items that can determine the order of its own items.

Child elements can set the order in which they appear on the page by setting the size of the order value, with smaller values first and larger ones second.

align-self

The align-self property defines the alignment of the Flex child items in the lateral (vertical) direction alone and overrides the existing align-items value.

This property accepts the same value as that of the align-items specific item.