Evenly spacing Flexbox items in a column direction

Source Code: (back to article)

Result: Report an issue

<!DOCTYPE html>

<html>

<head>

<title>Evenly spacing Flexbox items in a column direction</title>

<style>

.container {

display: flex;

flex-direction: column;

justify-content: space-between;

align-items: center;

background: yellow;

}

.item {

margin-bottom: 10px;

border: 1px solid red;

}

</style>

</head>

<body>

<div class="container">

<div class="item">Item 1</div>

<div class="item">Item 2</div>

<div class="item">Item 3</div>

</div>

</body>

</html>