Александр Косицын, у него стоит display:flex и он хочет занимать 100% ширины, поскольку flex-wrap: wrap не мешает ему перенестись на новую строку и занять эту самую ширину, он именно так и поступает.
Блочные элементы растягиваются на ширину родителя.
Ладно.
1920 окно
Буквы в ссылках занимают 800 точек и мы предположим, что текст не поменяется клиентом.
Самих ссылок 5 штук.
Для простоты будем задавать им только левые отступы.
Свободного места остается 58.3%
Каждый отступ по 11.6%
Отлично.
Сжимаем окно до 1000.
Сколько места занимают отступы в пикселях?
116×5=580 точек.
А ссылки как были 800 так и остались.
========
Можно использовать calc. Но чтобы его использовать у нас должна быть гарантия, что не поменяются шрифты, размеры, количество букв и слов и самих ссылок.
Вывод: использовать space-between и пусть браузер сам распределяет свободное пространство.
Kilila, при чем тут система? Вы можете?
Ширина блока зависит от ширины экрана, ширину экрана мы не знаем. Предположим все буквы дают в сумме 300 точек. Сколько останется места в процентах?
Kilila, логично, что наезжают, а куда им еще деваться?
Ссылки фиксированной, но неизвестной ширины (определяются шириной слов), margin собираетесь ставить в %. Я вижу путь вычисления корректного значения % только через JS. Только зачем это тут...
Используйтеjustify-content: spase-between
margin либо уберите либо оставьте минимальный либо поставьте padding для a.
k-2, со смартфона не удобно делать примеры jsfiddle
Доберусь до компа сделаю.
Самый лучший способ самостоятельно сделать себе несколько элементарных примеров на calc и как работают проценты, в каких случаях и от чего высчитываются.
k-2 calc имеет смысл, если мы хотим сложить, например, % и пиксели. Потому что не знаем 90% это сколько пикселей на данный момент.
Если мы хотим 90% умножать на 2, то в состоянии сразу написать 180%, а не напрягать браузер излишними пересчетами.
Кроме того, если ширина 90%, а высоте мы зададим 180%, то не получим высоту в 2 раза больше ширины.
А вот вариант задавать высоту через vw может помочь.
Блочные элементы растягиваются на ширину родителя.