Переклад не закінчено. Будь ласка, допоможіть перекласти цю статтю з англійської.

CSS Flexible Box Layout це модуль CSS що реалізує можливість розмітки макета за допомогою оптимізованої коробочної моделі, що використовується для створення дизайну інтерфейса користувача, та проводити вирівнювання елементів в одному із вимірів. В цій моделі (flex layout), потомки flex контейнера можуть бути розміщені відносно будь якої осі, і можуть "гнучко" змінювати свій розмір, можуть рости, щоб зайняти весь відведений простір або зменшуватись щоб не переповнити своїми поточними розмірами контейнер, що їх містить. Наявне і горизонтальне і вертикальне вирівнювання потомків, і до того-ж проводити будь-які маніпуляції дуже легко.

 

 

Простий Приклад

В наступному прикладі у контейнерa встановлено властивість display: flex, що означає - три його вкладені елементи є  flex елементами. Значення justify-content має значення space-between для того щоб порожній простір між елементами рівномірно розподілився по головній осі. Однаковий простір буде виділений між кожним елементом, але при цьому крайні елементи(перший та останній) не будуть мати  справа та зліва відповідно відступів від контейнера. Ви можете бачити що елементи будуть розподілені по поточній направляючій вісі, бо на це впливають виставлені по замовчуванню значення властивості align-items рівний stretch. Елементи розтягуються по висоті flex контейнера, і кожен стане такої висоти як самий вищий елемент.

Reference

 

Reference

CSS Properties

Guides

Using CSS flexible boxes
Step-by-step tutorial about how to build layouts using this feature.
Using flexbox to lay out Web applications
Tutorial explaining how to use flexbox in the specific context of Web applications.

Specifications

Specification Status Comment
CSS Flexible Box Layout Module Candidate Recommendation Initial definition.

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 20.0 (20.0) 21.0-webkit
29.0
10.0-ms
11.0
12.10 6.1-webkit
Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support (Yes) 4.4 11 12.10 7.1-webkit

 

Мітки документа й учасники

Зробили внесок у цю сторінку: jenja-pa, chrisdavidmills
Востаннє оновлена: jenja-pa,