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

Demo

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;
}

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