Core Code
Core Code Modern Dev Handbook

Flex Column Direction

Use flex-direction:column to stack items vertically.

Preview

Code

<style>
.container{
display:flex;
flex-direction:column;
gap:10px;
}

.item{
background:#9333ea;
color:white;
padding:20px;
}
</style>

<div class="container">
<div class="item">Top</div>
<div class="item">Middle</div>
<div class="item">Bottom</div>
</div>

More Flexbox Intro Examples (8)

example Basic Flex Container open example example Flex Row Direction open example example Center Items with Flexbox open example example Space Between Items open example example Equal Flex Columns open example example Flexbox Navbar open example example Flexbox Card Layout open example example Flexbox Axis Demo open example