FLEXBOX FROGGY is a Flex layout learning game. Send the frog home by writing CSS code: Place the frog on a lotus leaf of the same color as it.

The game has 24 levels. Once completed, you will be able to use Flex layout skillfully

Game address (ladders required): flexboxfroggy.com/ Don’t need a ladder address: www.css88.com/tool/flexbo… . Let’s go through it together.

01 shut

Little frog right aligned. Code:

#pond {
  display: flex;
  /* Add the code start */
  justify-content: flex-end;
  /* Add code end */
}
Copy the code

Context-content defines the alignment of items on the main axis. The spindle is horizontal by default. Illustration-content diagram of the different values:

Historical shut

The little frog is center aligned. Code:

#pond {
  display: flex;
  /* Add the code start */
  justify-content: center;
  /* Add code end */
}
Copy the code

第03 shut

The frogs are evenly spaced on both sides. Code:

#pond {
  display: flex;
  /* Add the code start */
  justify-content: space-around;
  /* Add code end */
}
Copy the code

第04 shut

Align the little frogs. Code:

#pond {
  display: flex;
  /* Add the code start */
  justify-content: space-between;
  /* Add code end */
}
Copy the code

第05 shut

The little frog is on the bottom. Code:

#pond {
  display: flex;
  /* Add the code start */
  align-items: flex-end;
  /* Add code end */
}
Copy the code

Align-items defines the alignment of items on the cross axis. The cross axis defaults to vertical. Schematic diagram of different values of align-items:

We shut

Little frog horizontal, vertical center. Code:

#pond {
  display: flex;
  /* Add the code start */
  justify-content: center;
  align-items: center;
  /* Add code end */
}
Copy the code

We shut

The frog is evenly spaced horizontally and vertically at the bottom. Code:

#pond {
  display: flex;
  /* Add the code start */
  justify-content: space-around;
  align-items: flex-end;
  /* Add code end */
}
Copy the code

第08 shut

The frog starts at the right end. Code:

#pond {
  display: flex;
  /* Add the code start */
  flex-direction:row-reverse;
  /* Add code end */
}
Copy the code

We shut

The frog is displayed as a column (the main axis is a column). Code:

#pond {
  display: flex;
  /* Add the code start */
  flex-direction: column;
  /* Add code end */
}
Copy the code

10 shut

The little frog is inverted horizontally. Code:

#pond {
  display: flex;
  /* Add the code start */
  flex-direction: row-reverse;
  justify-content: flex-end;
  /* Add code end */
}
Copy the code

Among them:

  • flex-direction: row-reverse;Set the starting point to the right end.
  • justify-content: flex-end;Make the frog appear on the left. When flex-direction changes,flex-start 和 flex-endThe corresponding direction has also been reversed.

11 pass

The little frog is at the bottom of the column. Code:

#pond {
  display: flex;
  /* Add the code start */
  flex-direction: column;
  justify-content: flex-end;
  /* Add code end */
}
Copy the code

12 close

The little frogs are aligned at both ends of the column. Code:

#pond {
  display: flex;
  /* Add the code start */
  flex-direction: column-reverse;
  justify-content: space-between;
  /* Add code end */
}
Copy the code

13 clearance

The frog is horizontally centered, starting on the right, and vertically at the bottom. Code:

#pond {
  display: flex;
  /* Add the code start */
  flex-direction: row-reverse;
  justify-content: center;
  align-items: flex-end;
  /* Add code end */
}
Copy the code

14 closing

Put the yellow frog back. Code:

#pond {
  display: flex;
}

.yellow {
  /* Add the code start */
  order: 3;
  /* Add code end */
}
Copy the code

The larger the order value, the farther back the display is in the main axis direction.

15 off

Put the red frog forward. Code:

#pond {
  display: flex;
}

.red {
  /* Add the code start */
  order: -1;
  /* Add code end */
}
Copy the code

The order value supports negative numbers.

16 off

Put the yellow frog on the bottom. Code:

#pond {
  display: flex;
  align-items: flex-start;
}

.yellow {
  /* Add the code start */
  align-self: flex-end;
  /* Add code end */
}
Copy the code

Align-self allows a single item to be aligned differently than other items, overriding the align-items property.

17 closing

Put the yellow frog on the bottom right. Code:

#pond {
  display: flex;
  align-items: flex-start;
}

.yellow {
  /* Add the code start */
  align-self: flex-end;
  order: 3;
  /* Add code end */
}
Copy the code

18 close

Frog multi-line display. Code:

#pond {
  display: flex;
  /* Add the code start */
  flex-wrap: wrap;
  /* Add code end */
}
Copy the code

Flex-wrap defines how to wrap a line if an axis does not fit. By default, items are arranged on an axis.

19 closing

The frog is displayed in multiple columns. Code:

#pond {
  display: flex;
  /* Add the code start */
  flex-direction: column;
  flex-wrap: wrap;
  /* Add code end */
}
Copy the code

20 shut

The exact same goal as level 19. But I’m going to use shorthand. Code:

#pond {
  display: flex;
  /* Add the code start */
  flex-flow: column wrap;
  /* Add code end */
}
Copy the code

21 off

The frog is at the top of many rows. Code:

#pond {
  display: flex;
  flex-wrap: wrap;
  /* Add the code start */
  align-content: flex-start;
  /* Add code end */
}
Copy the code

Align-content defines the alignment of multiple axes. This property has no effect if the project has only one axis.

22 closed

Frogs line up at the bottom. Code:

#pond {
  display: flex;
  flex-wrap: wrap;
  /* Add the code start */
  align-content: flex-end;
  /* Add code end */
}
Copy the code

23 off

The frogs had finished their party and now it was time to go home. Take them back to their respective homes with Flex-Direction and align-content. Code:

#pond {
  display: flex;
  flex-wrap: wrap;
  /* Add the code start */
  flex-direction: column-reverse;
  align-content: center;
  /* Add code end */
}
Copy the code

The 24th off

With Flex, bring the frogs home one last time. Code:

#pond {
  display: flex;
  /* Add the code start */
  flex-direction:column-reverse;
  flex-wrap:wrap-reverse;
  justify-content:center;
  align-content:space-between;
  /* Add code end */
}
Copy the code

The frogs are all sent home by you, I thank you for the frog ~