Не работает отступ к краям,что делать?

Question

[Muxailo]

Ребята,такая проблема.
Есть менюшка...а в ней надо поставить все елементы надо поставить в ряд(по средине между top-bot).Проблема в том,что когда уменьшаеться размер браузера(под размер телефона к примеру), то все то что я зафиксировал с помощью margin-right/left/top движеться так,что оно все криво....посоветуйте что делать,что б при уменьшение екрана,список меню дальше оставался по средине красного фона.

Answer 1

[alvvi]

.uglyredsquare {
  display: flex;
  flex-flow: row wrap; // в ряд ведь поставить?
  justify-content: center; // Центрирует горизонтально
  align-items: center; // Центрирует вертикально
}

Comments

[Muxailo]

спасибо,теперь по центру!а можете еще сказать, как в таком случает правельно ставить margin-left/right, чтоб поставить их как надо теперь?
ПРосто оно теперь их двигает от соседнего елемента.....

[alvvi]

Muxailo: а чего именно вы хотите добиться марджинами? Сделать отступы между элементами? Или как-то по особому разместить их на горизонтальной оси?

[Muxailo]

Илья Ростопка: по особому разместить.
Один вправо,один влево,один по-центре,4й-справа тоже

[alvvi]

Muxailo: используйте flex-basis на элментах или margin-left/margin-right:auto

[Muxailo]

Илья Ростопка: cпасибо за помощь)

Answer 2

[Mary Солнечная]

для менюшки:

display:flex;
justify-content: center;
align-items: center;

Вуаля! А там дальше медиазапросы.

Comments

[Muxailo]

спасибо,теперь по центру!а можете еще сказать, как в таком случает правельно ставить margin-left/right, чтоб поставить их как надо теперь?
ПРосто оно теперь их двигает от соседнего елемента.....

[Mary Солнечная]

а каков должен быть результат? как должно выглядеть? :)

[Mary Солнечная]

Не задавайте отступы, а задавайте размеры самим элементам, ширину например, либо опять же из flexbox - базовую ширину - flex-grow, flex-shrink

[Muxailo]

Mary Солнечная: ширину не получить...в меню ж кнопки)))надо что б ширина была как и размер текста)