Пояснення justify-content: space-between (CSS)
Побудуйте flexbox-макет наочно: flex-direction, justify-content, align-items, flex-wrap і gap для контейнера, а також flex-grow, flex-shrink і flex-basis для кожного дочірнього елемента — усе з живим попереднім переглядом і готовим до копіювання CSS.
Обробляється повністю у вашому браузері — те, що ви тут вводите, ніколи не вивантажується.
Результат
Про цей інструмент
Ця сторінка відкриває генератор зі значенням justify-content: space-between: перший блок прилягає до початкового краю контейнера, останній — до кінцевого, а вільний простір ділиться на однакові проміжки між блоками всередині — і ніколи перед першим чи після останнього.
Саме цю деталь часто плутають. space-around дає кожному блоку однаковий відступ з обох боків, тому проміжки між блоками виходять удвічі ширшими за проміжки біля зовнішніх країв (кожен край отримує відступ лише від одного блоку, а не від двох). space-evenly йде далі й робить усі проміжки однаковими, включно з двома зовнішніми краями — єдине з трьох значень, де відступи виглядають абсолютно рівномірно по всій ширині.
Перемикайте спадний список justify-content між трьома значеннями нижче й дивіться, як одні й ті самі три блоки перебудовуються — це найшвидший спосіб побачити різницю, замість того щоб її запамʼятовувати. Скопіюйте CSS для того значення, яке відповідає потрібним вам відступам.