<link href='https://fonts.googleapis.com/css?family=Fira+Sans' rel='stylesheet' type='text/css'>

<p>Цей приклад показує як працює властивість <code>align-content</code>. Спробуйте вимкнути/ввімкнути перемикач, щоб змінити метод вирівнювання нащадків у контейнері нижче.</p>

<div class="inputs">
  
  <input id="stretch" checked name="align-content" type="radio"/>
  <label for="stretch">stretch</label>
  <message for="stretch">Рядки розтягуються, щоб заповнити вільний простір. Без задання.</message>
  
  <input id="center" name="align-content" type="radio"/>
  <label for="center">center</label>
  <message for="center">Рядки вирівнюються по центру гумового контейнера.</message>
  
  <input id="flex-start" name="align-content" type="radio"/>
  <label for="flex-start">flex-start</label>
  <message for="flex-start">Рядки розташовуються на початку поперечної вісі.</message>
  
  <input id="flex-end" name="align-content" type="radio"/>
  <label for="flex-end">flex-end</label>
  <message for="flex-end">Рядки розташовуються з кінця поперечної осі.</message>
  
  <input id="space-between" name="align-content" type="radio"/>
  <label for="space-between">space-between</label>
  <message for="space-between">Рядки рівномірно розподіляються в гумовому контейнері. Перший рядок знаходиться на початку контейнера, а останній перебуває в кінці.</message>
  
  <input id="space-around" name="align-content" type="radio"/>
  <label for="space-around">space-around</label>
  <message for="space-around">Рядки рівномірно розподілені з рівними відстанями між ними. Порожній простір перед першим рядком і після останнього рядка дорівнює половині простору між двома сусідніми рядками.</message>
  
</div>

<div class="wm">
  <p id="message">Рядки розтягуються, щоб заповнити вільний простір. Без задання.</p>
</div>

<hr>

<div id="box">
  <div class="child">block</div>
  <div class="child">block</div>
  <div class="child">block</div>
</div>
* {
  box-sizing: border-box;
  padding: 0;
}

body {
  font-family: 'Fira Sans', sans-serif;
}

#box {
  margin-top: 25px;
  line-height: 1.45;
  width: 400px;
  height: 250px;
  display: flex;
  align-content: stretch;
  flex-flow: row wrap;
  background-color: gold;
  padding: 4px;
}

.child {
  background-color: #222;
  color: #999;
  padding: 16px;
  text-align: center;
  width: 100%;
  margin-bottom: 4px;
}

message {
  display: none;
}

.wm {
  min-height: 100px;
}
var $message = $('#message');

$('.inputs').find('input').on('change', function() {
  
  var $messageText = $("message[for='"+$(this).attr('id')+"']")
  $message.text($messageText.text());
  
  $('#box').css('align-content', $(this).attr('id'));
  $('#box .child').html($(this).attr('id'));
  
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js