Вирівнювання DIV по центру

Робота з Flexbox-версткою

Flexbox вважається складним способом верстки веб-макетів. Але якщо ви освоїте, то зрозумієте, що вона набагато простіше і приємніше, ніж стандартне способи форматування. Специфікація Flexbox — це гнучкий і неймовірно потужний спосіб обробки елементів. З англійської мови назва модуля так і перекладається, як «гнучкий контейнер». Значення ширини, висоти, розташування елементів настроюються автоматично, без обчислення відступів і полів.

У попередніх прикладах ми вже працювали з властивістю display, але ставили йому блочне (block) і рядкове (inline-block) значення. Для створення flex-макетів ми будемо використовувати display: flex. Спочатку нам знадобитися flex-контейнер:

Дивіться також:  Технічне срібло: як його визначити, де міститься? Особливості

<body>
<div class=”flex-container”></div>
</body>

Щоб перетворити його в флекс-контейнер в каскадних таблицях, ми пишемо:

.flex-container{
display: flex;
}

Всі вкладені в нього об’єкти, але тільки прямі нащадки будуть flex-елементами:

<body>
<div class=”flex-container”>
<div class=”flex-element”>Перший</div>
<div class=”flex-element”>Другий</div>
<div class=”flex-element”>Третій</div>
<div class=”flex-element”>Четвертий</div>
</div>
</body>

Якщо всередину flex-контейнера помістити список, то пункти списку li не вважаються flex-елементами. Flexbox-верстка буде діяти тільки на ul:

<div class=”flex-container”>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

Сторінка: 1 2 3 4 5 6 7