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



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