<div class="flex-container">
<div class="flex-item">یک</div>
<div class="flex-item">دو</div>
<div class="flex-item">سه</div>
<div class="flex-item">چهار</div>
<div class="flex-item">پنج</div>
</div>
html
{
direction: rtl;
/* direction: ltr; */
}
.flex-container
{
display: flex;
flex-direction: row;
flex-wrap: wrap;
/* flex-wrap: nowrap; */
/* flex-wrap: wrap-reverse; */
}
.flex-item
{
width: 200px;
margin: 10px 0;
}
/* خطوط پایین نقش زیبا سازی دارند مهم نیستن */
body
{
background-color: #1b1b1b;
}
.flex-container
{
background-color: #fff;
}
.flex-item
{
background-color: tomato;
text-align: center;
line-height: 2;
color: #fff;
font-weight: bold;
font-size: 3em;
}
.flex-item:nth-child(odd)
{
background-color: #e43;
}
This Pen doesn't use any external CSS resources.