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

.flex-container
{
  min-height: 180px;
  display: flex;
	flex-flow: row wrap;
  
  justify-content: space-around;
  /* justify-content: flex-start; */
  /* justify-content: flex-end; */
  /* justify-content: center; */
  /* justify-content: space-between; */
  
  
  align-items: stretch;
  /* align-items: baseline; */
  /* align-items: flex-start; */
  /* align-items: flex-end; */
  /* align-items: center; */
  
  align-content: space-around;
  /* align-content: flex-start; */
  /* align-content: flex-end; */
  /* align-content: center; */
  /* align-content: space-between; */
}

.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