Skip to content

Try our new Crash Courses!

Buy one of our new Crash Courses, now hosted on Teachable.

Flexbox – CSS



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;


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


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


Flexbox on MDN

Back to: CSS Reference > Intermediate CSS