Обратите внимание на следующее:
Считайте, что это полный экран с разрешением 1920px.Элемент div, обертывающий текст и кнопки, видимые в A , представляет собой flexbox.
Когда я изменяю размер экрана, текст и кнопки сжимаются настолько, насколько это возможно - как видно из B .
В конце концов, когда больше нет места для сжатия, оно сворачивается в C .
Теперь я добавил точку останова, так что C вступает в силу с разрешением 1024 пикселей, что означает, что тексты и кнопки будут иметь отступ между ними, чтобы никогда не склеиваться.Для этого я добавил padding: 0 50px;.
. Мне было интересно, является ли это - добавление отступов - лучшим и наиболее эффективным способом реализации этого свертывания, учитывая, что я работаю с флексбоксами.
Должно ли это быть сделано другим, более подходящим способом?
class {
display: flex;
flex-direction: row;
word-wrap: normal;
text-align: center;
justify-content: space-between;
height: 100%;
}
@include breakpoint-max(1068px) {
padding: 0 50px;
}
}
Спасибо!