Skip to content

Help us create more tutorials! Make a donation using the Donate button or become a member using the button below to hide this banner and track your progress.

Flexbox – CSS

Summary

Flexbox allows you to create different types of layouts. You can use it to put elements in rows or columns.

To enable flexbox, add the display property with a value of flex to the parent element:

.flex-container {
  display: flex;
}

Details

Additional properties

To control the width of each child element, you can use the flex property:

.child {
  flex: 300px;
}

Demo

Flexbox align demo

Flexbox justify demo

Exercises

Recreate the CSS code from the embedded CodePen demo in your CSS file.

References

Flexbox on MDN

Back to: CSS Course > Intermediate CSS