Flex Layout Example

Flexbox can easily create responsive layouts.

Preview

Code

<style>
.layout{
display:flex;
gap:10px;
}

.sidebar{
width:120px;
background:#111827;
color:white;
padding:20px;
}

.content{
flex:1;
background:#e5e7eb;
padding:20px;
}
</style>

<div class="layout">
<div class="sidebar">Menu</div>
<div class="content">Content</div>
</div>

More Flex Container Examples (8)