Как сделать margin в процентах, чтобы не ломался блок?

Question

[Breeze1]

Есть вот такой пример кнопок, кнопки должны быть фикс по высоте и ширине, хоть в px хоть в vw.
Codepen
Ширина родительского блока зависит от количества и размера кнопок.
По сути мне нужен responsive отступ между кнопками. Отступ в vw не подходит, потому что размер отступа между кнопками, должен зависеть не только от ширина браузера, но и от размеров самих кнопок ? Есть какие-то идеи как это сделать не меняя html разметку ?

Сейчас кнопки ломают родительский блок, потому что там стоит flex-shrink: 0. Количество кнопок тоже не известно, может быть 5 может быть 8

Comments

[Kentavr16]

justify-content:center,align-items:center?

[Breeze1]

Kentavr16, это не поможет, кнопки просто ломать родительский блок начнут с двух сторон, а не с одной )

[Kentavr16]

Я не совсем понимаю в чем проблема. Убери флекс-шринк, добавь в контейнер width:max-content. Или поставь шринк в 1, если так хочется.

[Breeze1]

Kentavr16, проблема в том, что если убрать shrink 0, кнопки перестают быть квадратными, они сужаться, и превращаются уже в прямоугольники. Условно если размер 50x50. То при shrink 1 они будет 42x50

max-content тоже не решает эту проблему (

[Lynn «Кофеман»]

[Breeze1]

Lynn «Кофеман», спасибо большое, я уже так делал, это не решает проблему, потому что если кнопки будут маленькие, 24x24 условно, на большом мониторе, отступы будут между ними огромные. Идеально подходит отступ в %, если бы он не ломал мне родительский блок.

[Lynn «Кофеман»]

Breeze1, что-то непонятно какую задачу надо решить. Слишком абстрактно.

Откуда возьмутся маленькие кнопки? Почему В примере они большие.

В общем, нужные какие-то более реальные примеры, а не 4 кнопки с цифрами

[Kentavr16]

Lynn «Кофеман», раньше были кнопки большие, но по 5. А сейчас маленькие, но по 3 )

[Breeze1]

Lynn «Кофеман», это тестовый заказ который я взял на свою тупую голову, от неадекватного заказчика, который мне ломает голову третий день.

Ему нужно, чтобы он через css менял размеры кнопки (высоту, ширину) и все у него масштабировалось пропорционально, в зависимости от размера браузера, и в зависимости от размеров кнопки которые он будет указывать. По-этому оттсуп между кнопками в px/vm мне не подходят. Идеально когда я задаю % соотношение.

[Breeze1]

Kentavr16, прочитай плиз коммент выше, это не то, чтобы я неадекватный и мне делать нечего ))

[Ankhena]

Breeze1,

размер отступа между кнопками, должен зависеть не только от ширина браузера, но и от размеров самих кнопок

По какой формуле он должен зависеть?

[Lynn «Кофеман»]

Breeze1, ну стребуйте с него примеры с картинками

[Breeze1]

Ankhena, да в целом нет никакой формулы, мне идеально подходит, как тут, когда стоит margin: 0 2% codepen

[Kentavr16]

Breeze1, да я и не думал "наезжать") просто не до конца понятна задача

[Ankhena]

Breeze1, так зачем вы пишете, что отступ должен зависеть и от размера кнопок? Определитесь сначала.

margin в процентах считается от ширины родителя. Но вы делаете родителя по контенту. Итого, кнопки всегда будут выпадать из родителя на размер суммы отступов.

Т.е. либо доп обертки либо js.

[Ankhena]

Более или менее альтернатива: заменить margin на gap, а padding на тень/outline

[Breeze1]

Ankhena, если вас не затруднит, покажите пожалуйста реализацию с доп оберткой, но горизонтальным отступом между кнопками в 2% без выпадания из родительского блока

[Breeze1]

Ankhena, gap тоже можно, но в % соотношении он тоже кнопки из родительского блока выталкивает

[Ankhena]

Breeze1, да, действительно, та же круговая зависимость остается (что логично)

Answer 1

[Ankhena]

Breeze1,

если вас не затруднит, покажите пожалуйста реализацию с доп оберткой

Кнопку оборачиваете в div. (Лучше бы внутри span, но кнопка интерактивна, так что снаружи).
Задаете диву псевдо
Задаете диву грид типа 98fr 2fr (это не 2% от кнопки, если что) ну или в каких пропорциях хотите.
Этот псевдо будет заменой отступу.
Последнему элементу грид в одну колонку.

p.s. Можно и без псевдо, только гридом.
https://codepen.io/AnnaSummer/pen/gOqPNWz

Answer 2

[Сергей delphinpro]

размер отступа между кнопками, должен зависеть не только от ширина браузера, но и от размеров самих кнопок

ну если кнопки будут зависеть от ширины окна, то и отступы будут так же зависеть от кнопок, как и от ширины окна

.block {
  --btn-width: 10vw;
  --gap: 1.25vw;
  background: red;
  padding: var(--gap);
  display: inline-flex;
  box-sizing: border-box;
  gap: var(--gap);
}


button {
    width: var(--btn-width);
    height: var(--btn-width);
    margin: 0;
    flex-shrink: 0;
}

Comments

[Breeze1]

Сергей, спасибо, вы совершенно правы. Но кнопки могут быть как в px, так и в vw.

[Сергей delphinpro]

Breeze1, Вы нарисуйте все возможные варианты (их пограничные состояния). И там уже будет видно как решать задачу, или она вообще нерешаемая в такой постановке.
Сейчас я, как и остальные, не вполне понимаю, что именно вам нужно.

[Сергей delphinpro]

Breeze1, о, у меня идея. Вам же кто-то поставил эту задачу? Перепишите сюда формулировку задачи слово в слово, как вам ее поставили.

[Breeze1]

"Все внутренние размеры и отступы в процентах от контейнера" под контейнером имеется ввиду button. Это слово в слово ))

Одним словом кнопки могут быть такие ссылка или такие сслка если использовать для отступа vw, отступ получается слишком большим на маленьких кнопках. По-этому 2% в целом подходят для любых размеров кнопок

[Сергей delphinpro]

Breeze1,
ну ок. попробуйте так (сам не проверял)
задавайте размеры кнопок через кастомное свойство, как в моем примере выше
для промежутков используйте свойство gap
значение gap вычисляйте функцией calc от размера кнопки

.block {
  --btn-size: 100px;
  --gap: calc(var(--btn-size) / 100 * 2) /* 2 процента от ширины кнопки */
}

[Breeze1]

Сергей delphinpro, спасибо, попробую