Розташування елементів за замовчуванням:
Повернемося до прикладу з текстом Буніна. Насамперед додайте таке правило в кінець вашого CSS-коду:
article { flex: 1; }
Це безрозмірне значення — коефіцієнт пропорції, що вказує, скільки вільного простору на головній осі (main axis) кожен flex-елемент може зайняти. У цьому випадку ми надаємо кожному елементу <article> значення 1, що означає: усі вони займатимуть однакову кількість вільного місця в макеті, яке залишилось після застосування властивостей padding і margin.
Тепер додайте наступне правило одразу після попереднього:
article:nth-of-type(3) { flex: 2; }
Після оновлення сторінки ви побачите, що третій елемент <article> займає вдвічі більше доступної ширини, ніж два інших — разом тепер доступно 4 одиниці пропорції. Перші два flex-елементи мають по одній одиниці, тому займають по 1/4 простору. Третій має 2 одиниці — тобто він займає 2/4 простору (або 1/2).
Ви також можете задати мінімальний розмір всередині значення flex.
Спробуйте змінити наявні правила, додавши розміри:
article { flex: 1 200px; }
article:nth-of-type(3) { flex: 2 200px; }
Це просто означає, що кожному flex-елементу спочатку буде надано 200px із вільного простору. Потім залишений простір буде розподілено відповідно до часток пропорцій.
justify-contentCSS-властивість justify-content визначає, як браузер розподіляє простір між елементами та навколо них уздовж головної осі flex-контейнера, або уздовж рядкової осі grid-контейнера.
| justify-content: start; |  |
Елементи розміщуються один за одним і притискаються до початку контейнера по головній осі. |
| justify-content: center; |  |
Елементи розміщуються один за одним по центру контейнера по головній осі. |
| justify-content: space-between; |  |
Елементи рівномірно розподіляються вздовж головної осі контейнера. Відстані між кожною парою сусідніх елементів однакові. Перший елемент притиснутий до початку контейнера, а останній — до кінця. |
| justify-content: space-around; |  |
Елементи рівномірно розподіляються вздовж головної осі контейнера. Відстані між кожною парою сусідніх елементів однакові. Порожній простір перед першим елементом і після останнього — у два рази менший, ніж між елементами. |
| justify-content: space-evenly; |  |
Елементи рівномірно розподіляються вздовж головної осі контейнера. Відстані між усіма елементами, а також між крайніми елементами й краями контейнера — однакові. |
Вирівнювання виконується після застосування фіксованих довжин і автоматичних відступів, що означає: якщо у Flexbox-розмітці хоча б один елемент має flex-grow, відмінний від 0, то ефект не застосову