Flexbox
Flexbox is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces. This article explains all the fundamentals.
<div class="container">
<div>item1</div>
<div>item2</div>
<div>item3</div>
<div>item4</div>
</div>
.container {
display: flex;
flex-wrap: nowrap;
background-color: green;
flex-direction: row;
}
.container div {
background-color: yellow;
width: 170px;
margin: 30px;
text-align: center;
line-height: 50px;
font-size: 18px;
}
The flex-direction property accepts 4 different values:
- row (default): same as text direction
- row-reverse: opposite to text direction
- column: same as row but top to bottom
- column-reverse: same as row-reverse top to bottom