Exercise: Positioning articles

To make the document match the image, it suffices to add to the CSS document. Use a flexible box layout.

gnus articles

Note:

Hints:

  • Use the division element as the container for the layout.

Solution to the exercise

Notice the following:

  • The display property for the division element has the value flex in order to use it as a container for a flexible box layout.
  • The flex-direction property has the value row so that articles appear in order from left to right on the horizontal main axis.
  • The flex-wrap property has the value nowrap so that all articles appear on the same line.
  • The justify-content property has the value space-around.

Note:

Hints:

  • undefined
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
<!DOCTYPE html>
<html lang="en">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
h2 {
    font-size: 1.5em;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX