Core Code
Core Code Modern Dev Handbook

Flex Row Direction

Flexbox arranges items in a row by default.

Preview

Code

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

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

<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>

More Flexbox Intro Examples (8)

example Basic Flex Container open example example Flex Column 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