Примеры использования flexbox в css

1. Удобно менять блоки местами:

➦ О свойстве order.

<div class="flex">
    <div class="itm1">1</div>
    <div class="itm2">2</div>
    <div class="itm3">3</div>
    <div class="itm4">4</div>
</div>
<style>
.flex .itm1 {  order: 4; }
.flex .itm2 {  order: 1; }
.flex .itm3 {  order: 3; }
.flex .itm4 {  order: 2; }
</style>

2. Задавать пропорци блокам относительно один одного:

<div class="cont-var3">   
   <div class="colv-1">..1.</div> <!--  1 блок -->   
   <div class="colv-2">..2.</div> <!--  шире в 2 раза чем первый блок -->   
   <div class="colv-3">..3.</div> <!--  шире в 3 раза чем первый блок -->
</div>

<style>
.cont-var3{display: flex;}
.colv-1{flex: 1; background:#222;}
.colv-2{flex: 2; background:#444;}
.colv-3{flex: 3; background:#666;}
</style>

Пример:

3. Выровнять текст по центру по вертикали:

<div class="center-text">
	Текст по середине
</div>

<style>
.center-text {
  display: flex;
  justify-content: center;  /* Центр по главной оси */
  align-items: center;      /* Центр по вторичной оси */
}
</style>

4. Сделать колонки одинаковыми по высоте:

<div class="container23">
  <div>.1..</div>
  <div>.2..</div>
  <div>.3..<br /> <p>---</p> <br /> <p>---</p> <br /> <p>---</p></div>
</div>

<style>
.container23 {
  display: flex;
  flex-direction: row; /* Элементы внутри контейнера будут позиционироваться горизонтально */
  align-items: stretch; /* Элементы внутри контейнера будут занимать всю его высоту */
}
.container23 > div { flex: 1; background:#222; margin:0 4%;color:#fff;}
</style>

Пример: