Theory
Theory
Comments

The justify-content property, alignment along the main axis

Flexbox uses a property to arrange items along the main axis, justify-content, instead of simply assigning “horizontal” alignment. This property is assigned on the flex container.

Its default value is flex-start. When this value is assigned, the elements are located at the start of the main axis.

In order to arrange the items in the center of the main axis, you need to assign the value center for justify-content.

Let’s place the rugs in the center of the container room.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Flex items distribution, justify-content</title> <link href="course.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body class="house"> <div class="room"> <div class="rug rudolf"></div> <div class="rug muffin"></div> </div> </body> </html>

CSS

.room { display: flex; flex-direction: row; }

Goalscompleted

Set flex items to be arranged along the center of the main axis for the .room block.

The justify-content property, alignment along the main axis

Comments

Log in

Sign up

Restore access