justify-content: space-between Explained (CSS)
Изградете визуално оформление на CSS flexbox: flex-direction, justify-content, align-items, flex-wrap и gap върху контейнера, плюс flex-grow, flex-shrink и flex-basis за всяко дете, всички с предварителен преглед на живо и копируем CSS.
Резултат
Тази страница отваря генератора с justify-content, настроен на интервал между: първата кутия се изравнява с началния ръб на контейнера, последната кутия се изравнява с крайния му ръб, а остатъчното пространство е разделено на равни празнини между кутиите в средата — никога преди първото или след последното.
Това е детайлът, който хората бъркат. space-around gives every box an equal margin on both of its sides, so the gaps between boxes end up twice as wide as the gaps at the two outer edges (each edge only gets one box's margin, not two). space-evenly goes further and makes every gap the same size, including the two outer edges — the only one of the three where the spacing looks perfectly uniform all the way across.
Превключете падащото меню за оправдаване на съдържанието между трите стойности по-долу и гледайте как същите три полета се пренареждат — това е най-бързият начин да видите разликата, вместо да я запомняте. Копирайте CSS за това, което съответства на разстоянието, което всъщност искате.