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 Reference > Intermediate CSS