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 propertyA property that controls how an element is displayed, with values such as inline, block, inline-block, flex, inline-flex, and none. for the division element has the value flex in order to use it as a container for a flexible box layout.
  • The flex-direction propertyA property used to indicate the direction of elements in a flexible box layout, with values such as row, row-reverse, column, and column-reverse. has the value row so that articles appear in order from left to right on the horizontal main axis.
  • The flex-wrap propertyA property used to indicate whether or not elements in a flexible box layout should wrap to the next line, with values such as nowrap, wrap, and wrap-reverse. has the value nowrap so that all articles appear on the same line.
  • The justify-content propertyA property to align elements with respect to the main axis in a flexible box layout, with values such as flex-start, center, space-around, space-between, and flex-end. has the value space-around.

Note:

Hints:

  • undefined
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
<!DOCTYPE html>
<html lang="en">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
h2 {
    font-size1.5em;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX