Блог

Главная - Вопросы по программированию - CSS — можно ли переносить только тогда, когда доступное пространство меньше некоторого значения?

CSS — можно ли переносить только тогда, когда доступное пространство меньше некоторого значения?

#html #css #layout #flexbox

Вопрос:

Хорошо, у меня возникла следующая проблема: у меня есть <div> файл, содержащий текст. В тексте есть несколько очень длинных строк, например: «Чтобы использовать эту страницу, вы должны сначала зарегистрироваться для учетной записи…» и т. Д.

В правой части этого раздела у меня есть изображение. Когда пользователь находится на маленьких экранах, я хочу обернуть содержимое. Когда его нет, изображение должно оставаться того же размера, а текст на div должен заключать строки (но при этом два элемента должны располагаться бок о бок).

До сих пор мне удавалось переносить текст только в том случае, если я добавлял комбинацию flex: 0 1 400px , например. Но это сочетание делает вещи странными при изменении размера экрана, потому что текст остается завернутым, даже когда на экране есть место (потому что div не растет).

Итак, я, вероятно, ищу способ сказать: «переносить содержимое только в том случае, если родительский размер меньше «. Возможно ли это?

Комментарии:

1. Вы пробовали использовать медиа-запросы ? ( developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/… ). Они помогут вам создать адаптивный пользовательский интерфейс. @media (max-width: 1200px){ .some-class{...} } будут применяться, например, только в том случае, если ширина окна просмотра страницы превышает 1200 пикселей.

Ответ №1:

Вы можете попробовать задать свойство flex для медиа-запроса только для экранов, размер которых превышает родительский размер, чтобы это выглядело примерно так :

 @media only screen and (min-width: *size* px){
     parent{
          flex: 0 1 400px;
     }
}

Используя это, текст больше не сможет помещаться на экране ниже переменной размера

Ответ №2:

Хорошо, я смог заставить его работать @media . В конце концов, я добавил @media with min-width: and set the flex-направление: строка`, чтобы он имитировал перенос.

Я попытался поиграть с гибкой оберткой, но родительский элемент не изменяется при обертывании, поэтому я не мог центрировать другие элементы, так что это решение, которое я получил.

Метки: ,