CSS Tutorial : flexbox

Part 1 flex-direction

1.1 without flex

<div class="parent">
  <div>child 1</div>
  <div>child 2</div>
  <div>child 3</div>
  <div>child 4</div>
</div>

.parent{
  Border: 2px solid green;
}

.parent > *{
    Border:2px solid #8888dd;
}
Try It Yourself

Note: Borders are for seeing the size and position of each element easily.

1.2 display: flex;

.parent{
  display: flex;
}
Try It Yourself

Note: default horizontal, all child inline.

1.3 flex-direction: column;

.parent{
  flex-direction: column;
}
Try It Yourself

Note: looks same as no flex, because our child are div which are block.

1.4 flex-direction: row;

.parent{
  flex-direction: row;
}
Try It Yourself

Note: default is row.

Part 2 align-items

2.1 without flex

.parent{
  height: 200px;
}

.parent > *{
  height: 100px;
}
Try It Yourself

Note: Adding heights for seeing the change in position of child.

2.2 vertical center

.parent{
  align-items: center;
}
Try It Yourself

Note: `align-items : center;` is at different angle as flex-direction. For row, vertical middle; For column, horizontal center.

Part 3 justify-content

3.1 there are many values

.center{
  justify-content: center;
}

.flex-end{
  justify-content: flex-end;
}

.space-between{
  justify-content: space-between;
}

.space-around{
  justify-content: space-around;
}
Try It Yourself

Note: justify-content is used for the flex-direction.

3.2 margin

.parent > div:last-child{
  margin-left: auto;
}
Try It Yourself

Note: margin auto of child pushes itself to the end.

Further reading