css flex почему не работает flex-basis?
Почти победила я в неравной борьбе с адаптивным меню картинками на flex. Но при проверке адаптивности с шагом 10 px вижу, что одна проблема осталась. На разрешениях от width 1488 до 1840 px и от 1841 до 2193 px смещение происходит некорректно.
Нужный результат — это смещение на 2-ю строку сразу трех блоков меню из шести. То есть, там, где не помещаются все 6 блоков, они должны выстраиваться в 2 строки по 3 блока в каждой. Именно это не получается. Дальше по 2 блока в строке и по 1 уже нормально выстраиваются
Попыталась задать блоку-обертке ширину на проблемных @media screen .
И ничего у меня не получилось. Не работает flex-basis ? Или я его криво задаю?
А вот кусок html, к которому я хочу все это применить:
/** Стили для меню картинками **/ .container < all: initial; >.wrapper < display: flex; justify-content: between; flex-wrap: wrap; >.choice < display: flex; flex-direction: column; background-image: url(Plan.jpg); width: 200px; height: 250px; margin: 5px; border: 1px solid #D3D3D3; text-align: center; align-items: center; >.justify-content-between < justify-content: space-between; >.flex-wrap < flex-wrap: wrap; >.container < width: 80%; margin: 0 auto; inherit: none; >.d-flex < display: flex; >@media screen and (max-width: 1488) < .container < flex-basis: 90%; margin: 0 auto; >> @media screen and (max-width: 1100) < .container < flex-basis: 95%; >> Уже перепробовала очень много всего. И здесь мне помогали решить проблему. Но в общем коде страницы мне не помогли даже весьма дельные советы, которые работали без вставки в мой код.
Вижу решение в задании flex-basis. Ан, не получается. Опять :(( Поправьте, дрУги, где я ошибаюсь? Я флекс только начала изучать 🙁
Ответы (1 шт):
Спасибо, друзья! Общими усилиями (+ перелопатив здесь же другие подобные вопросы) решила вопрос так (БЕЗ ВСЯКИХ flex-basis ):
.wrapper < display: flex; justify-content: center; text-align: center; align-items: center; flex-wrap: wrap; align-self: center; >.container < width: 95%; margin: 0 auto; align-items: center; justify-content: center; >@media screen and (max-width: 1430px) < .container < width: 60%; inherit: none; >> Может, что-то лишнее или неправильное. Но работает именно так, как нужно, на любых разрешениях и в любых браузерах. Даже на IE. ВОПРОС ЗАКРЫТ
CSS flex-base не работает, когда flex-direction это ‘column’
Моя цель — создать двухстолбцовый макет с flexbox, в котором первый столбец имеет две строки, а второй столбец имеет один, например: 
Настройка flex-basis: 100% на третьем элементе дает желаемый эффект, но только тогда, когда контейнер flex-direction равен row : 
Изменение flex-direction на column приводит к следующему, если явно не указано значение height , что невозможно в моем проекте: 
Как я могу получить первое изображение без явной установки контейнера height ? Здесь показан Plunker, иллюстрирующий проблему.
body < display: flex; height: 100px; width: 100px; >.container < display: flex; flex-direction: column; /* Setting this to `row` gives the expected effect,but rotated */ flex-grow: 1; flex-wrap: wrap; /* height: 100%; */ /* Setting this fixes the problem, but is infeasible for my project*/ >.item < flex-grow: 1; >.one < background-color: red; >.two < background-color: blue; >.three
Почему бы не вкладывать прочитанные и синие блоки? Затем установите внешнюю сетку в горизонтальном направлении, а внутреннюю — в вертикальной. Это больше разметка, но будет работать: P
Ориентация столбца требует явной высоты для того, чтобы значение flex-based было соблюдено, как и следовало ожидать с элементами обтекания.
@cimmanon cimmanon Спасибо. Из любопытства, почему это не тот случай, когда сетка является мажорной? Я не могу найти ничего актуального в спецификации.
Я не знаю, почему это так (и да, я бы хотел, чтобы высота не требовалась). Если вы посмотрите на Flexbox на мгновение, все элементы предпочитают расти по вертикали, а не по горизонтали, если содержимое будет вынуждено прокручиваться. В некотором смысле, блочные элементы имеют явную ширину, даже если для нее установлено значение auto (ширина родительского элемента). Высота, с другой стороны, определяется содержанием элемента, когда установлено значение auto.
Спасибо за разъяснения. Здесь должен быть какой-то более глубокий принцип работы CSS, с которым я не знаком; это, безусловно, имеет смысл, большую часть времени, чтобы виджеты предпочитали расти вертикально по горизонтали. Возможно, это как-то связано с ориентацией письма? Я поиграю с некоторыми режимами, разработанными для языков CJK, и посмотрю, как далеко я доберусь.
Интересно, что ваш пример Plunker работает для меня в Firefox 32 (Win 7) «как есть». Может быть, это просто ошибка Chrom (e | ium)?
4 ответа
Почему это не работает:
Обертка Flex происходит только тогда, когда начальный основной размер элементов flex переполняет контейнер flex. В случае flex-direction: row , это когда они гибкие элементы шире, чем контейнер. С помощью flex-direction: column они должны переполнять высоту контейнера.
Но в CSS высота ведет себя принципиально иначе, чем ширина. Высота контейнера в CSS определяется высотой его дочерних элементов. Таким образом, без чего-либо, ограничивающего высоту контейнеров, гибкие элементы никогда не будут переполняться; они просто повышают свой контейнер. Если они не переполняются, они не обернутся.
Возможные решения:
Вы должны ограничить высоту контейнера. Очевидный способ (который вы сказали вне таблицы), устанавливает явные height или max-height .
Спросите себя, почему вам нужно ограничить высоту. Оставаться в пределах окна просмотра? Вы можете использовать viewport-relative единицы и установить что-то вроде max-height: 100vh . Является ли он равным высоте другого столбца вне этого гибкого контейнера? Возможно, вы сможете ограничить его другим flexbox. Сделайте этот гибкий контейнер гибким элементом во внешнем flexbox. Однако что-то еще в этом внешнем flexbox должно было бы установить его высоту.
HTML5, CSS3 flex не работает должным образом
Я узнал, что отображение flex помогает мне сократить время работы для публикации.
Однако у меня проблема, что макет не отображает то, что я хочу.
Все, что я хочу отобразить, как сетка, как показано ниже:
Но, к сожалению, я не могу решить эту проблему самостоятельно.
Не могли бы вы дать мне совет, как я могу исправить эту проблему с помощью flex tag?
Вы также можете увидеть мою проблему, как показано ниже:
.item_wrap < display: flex; justify-content:space-between; flex-flow:row wrap; >.item_0 .item_1 .item_2 .item_3 .item_4 .item_5
Вам нужно будет изменить структуру HTML .
Все блоки с правой стороны должны быть завернуты в .
.item-wrap < justify-content: space-between; display: flex; >.inner-wrap < justify-content: space-between; flex-wrap: wrap; display: flex; >.item_0, .inner-wrap < flex-basis: calc(50% - 5px); >.inner-wrap > div < flex-basis: calc(50% - 5px); >.inner-wrap > .item_1
* body < margin: 0; >.item-wrap < justify-content: space-between; height: 100vh; display: flex; >.inner-wrap < justify-content: space-between; flex-wrap: wrap; display: flex; >.item_0, .inner-wrap < flex-basis: calc(50% - 5px); >.inner-wrap > div < flex-basis: calc(50% - 5px); padding: 10px; >.inner-wrap > div + div < margin-top: 10px; >.inner-wrap > .item_1 < flex-basis: 100%; >.item_0 .item_1 .item_2 .item_3 .item_4 .item_5
Привет! Проверьте этот код
.item_wrap < width: 800px; display: flex; margin: 0 auto; >.item_0 < height: 500px; background: red; flex: 1; margin: 5px; >.item_1 < height: 500px; background: yellow; flex: 1; margin: 5px; >.headbar < >.head_column < height: 200px; background: green; flex: 1; >.headbar2 < display: flex; >.pinkone < background: #000; flex: 1; height: 150px; >.pinktwo < background: pink; flex: 1; height: 150px; >.headbar3 < display: flex; >.grayone < background: gray; flex: 1; height: 150px; >.graytwo
Кроме того, вы можете следить за каналом YouTube – LearnWebCode