<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js