Exercise: Positioning articles
To make the document match the image, it suffices to add to the CSS document. Use a flexible box layout.
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-size: 1.5em;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX