#html #css #web
Вопрос:
У меня возникла следующая ситуация: моя страница содержит панель, которая выглядит так же в обычной ситуации.
Text 1 Text text lorem ipsum lorem ipsum lorem ipsum Вот HTML-код:
lt;div class="ui-g"gt; lt;div class="ui-g-6"gt; Text 1 lt;/divgt; lt;div class="ui-g-6"gt; Text text lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lt;/divgt; lt;/divgt; Теперь, при низком разрешении, я хочу, чтобы столбцы были объединены в один, чего я добился с помощью flexbox:
.ui-g { display: flex; flex-wrap: wrap; } .ui-g gt; div { min-width: 180px; max-width: 100%; box-sizing: border-box; margin: 0 auto; } Это означает: обычно оба столбца имеют ширину 50% (из-за ui-g-6 ) и минимальную ширину 180 пикселей -gt; если разрешение панели меньше, чем ~360 пикселей, происходит оплавление.
Моя проблема в следующем:
При уменьшении разрешения страница меняется с
Text 1 Text text lorem ipsum lorem ipsum lorem ipsum Для
Text 1 Text text lorem ipsum lorem ipsum lorem ipsum и после оплавления:
Text 1 Text text lorem ipsum lorem ipsum lorem ipsum Как вы можете видеть, содержание сейчас излишне узкое, я бы предпочел, чтобы оно выглядело так:
Text 1 Text text lorem ipsum lorem ipsum lorem ipsum Я знаю о flex-grow, но это переопределяет любой width атрибут и полностью портит макет моей страницы при обычном разрешении. Кроме того, это все равно не возымело желаемого эффекта.
Любые советы очень ценятся!
Ответ №1:
Использование flex-basis вместо min-width и добавление flex-grow должно привести вас туда:
.ui-g { display: flex; flex-wrap: wrap; outline: #0FF6 solid; outline-offset: 3px; margin: 1em; } .ui-ggt;div { flex-basis: 180px; flex-grow: 1; box-sizing: border-box; margin: 0 auto; outline: #F0F6 solid; outline-offset: 0px; } lt;div class="ui-g"gt; lt;div class="ui-g-6"gt; Text 1 lt;/divgt; lt;div class="ui-g-6"gt; Text text lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lt;/divgt; lt;/divgt; lt;div class="ui-g" style="width: 300px"gt; lt;div class="ui-g-6"gt; Text 1 lt;/divgt; lt;div class="ui-g-6"gt; Text text lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lt;/divgt; lt;/divgt; Комментарии:
1. Я осторожно оптимистичен — я обнаружил две небольшие неровности при использовании этого подхода, но, вероятно, это просто какой-то другой CSS, который необходимо скорректировать. Спасибо!
Ответ №2:
Возможно, я неправильно понял ваш вопрос, но :
.ui-g { display: flex; flex-wrap: wrap; } .ui-g gt; div { min-width: 180px; max-width: 100%; box-sizing: border-box; margin: 0 auto; } @media only screen and (max-width: 360px) { .ui-g { white-space: nowrap; /* text wont go to next line if it refactors */ } } Комментарии:
1. вы просто копируете и вставляете приведенный выше CSS, что вы в нем изменили?
2. пробел: nowrap,
3. пробел: nowrap; не имеет никакого значения, вы должны проверить, работает ваш код или нет, прежде чем ответить, я проверяю его и не могу найти никакой разницы в результате.
4. Я вставил его в codepen, и это имело значение при изменении размера, что, как я понял, он хотел от своего вопроса.
5. Я отредактировал свой ответ, надеюсь, это больше похоже на то, что вы имели в виду, кроме того, я не смог воспроизвести маленький браузер, он не позволит мне зайти так далеко. Но это должно сработать. (Если я снова не неправильно вас понял :D)