Почему не работает display: flex; flex-direction: row;?
Работает. По умолчанию justify-content равен flex-start, вот элемент hi__body и находится с левого края. Для того чтобы действие «flex-direction: row» было заметней, нужно задать другое значение для justify-content (center например) или добавить еще один элемент (или несколько) по соседству с hi__body. Прошу прощения если неправильно понял проблему.
Ответ написан более года назад
Комментировать
Нравится Комментировать
Ответы на вопрос 0
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- HTML
- +1 ещё
Как написать стили для блоков, что прилипают к разным сторонам контейнера?
- 1 подписчик
- 12 часов назад
- 40 просмотров
Как исправить display: flex, если он не работает должным образом?
Делаю навигационное меню, возникла такая проблема: display flex на родительский элемент не распределяет элементы во весь блок. Вот код:
HTML
.shop_slider < .top_title_line < min-height: 81px; background: linear-gradient(#ff6c22, #ff4616); display: flex; align-items: center; color: #fff; .fredoka_font(); .shop_box_title < flex-grow: 1; text-align: center; >.left, .right < display: block; opacity: 50%; >> >.shop_slider .top_title_line < min-height: 81px; background: linear-gradient(#ff6c22, #ff4616); display: flex; align-items: center; color: #fff; font-family: 'Fredoka One', cursive; >.shop_slider .top_title_line .shop_box_title < flex-grow: 1; text-align: center; >.shop_slider .top_title_line .left, .shop_slider .top_title_line .right
Поставить display block дочерним элементам не помогает, как и выставление width 100% на родительский.
Хочу так:
- Вопрос задан более трёх лет назад
- 5390 просмотров
Комментировать
Решения вопроса 1
web-программист (*AMP, Go, JavaScript, вёрстка).
Ну так flex в top_title_line действует только на единственный вложенный тег shop_slider_navigation — никак не влияя на теги внутри shop_slider_navigation.
А чтобы распределить блоки внутри shop_slider_navigation, надо и display: flex; и настройки flex установить для shop_slider_navigation.
P.S. В редакторе вопроса есть кнопка вставки кода — с помощью которой можно нормально вставить и HTML, и CSS. Делать HTML картинкой не имеет смысла и только мешает отвечающим.
Ошибки, которые могут возникать при использовании flexbox, и их решение
Flexbox стремительно набирает популярность благодаря своей гибкости и адаптивности. Использование этого элемента позволяет легко верстать макеты, которые раньше заставляли попотеть. Основная проблема flexbox в том, что этот довольно новый элемент не гарантирует вам стабильную работу во всех используемых браузерах. Довольно часто встречаются случаи, когда стандартные решения не приносят ожидаемого результата. В этой статье мы рассмотрим некоторые ошибки и пути их решения.
1.Искажение вложенных объектов, размер которых больше размера ячейки
Эта ошибка встречается в Chrome, Opera и Safari. Когда элементы имеют слишком большие размеры, чтобы поместиться внутри контейнера, они должны быть трансформированы, чтобы уменьшить их так, как это определяет свойство flex-shrink. При этом объекты уменьшаются не бесконечно, они не могут получить размеры меньшие, чем их минимальная высота и минимальная ширина.
В соответствии с текущей спецификацией flexbox:
По умолчанию, элементы не будут сжиматься меньше их минимального размера (длина самого длинного слова или фиксированного размера элемента). Чтобы изменить это, установите свойства min-width или min-heigh.
Решение
Спецификация Flexbox говорит нам, что свойство flex-shrink имеет значение по умолчанию равное 1, но также указывает, что детали не должны сжиматься меньше их минимального размера по умолчанию. Вы можете использовать значение 0 для flex-shrink, что позволит вам избежать этой ошибки. Если ваши элементы рассчитывают свои размеры, исходя из размеров родителей, и не имеют заданных свойств width, height или flex-basis, в остальном они будут вести себя также.
2. Содержимое flex-элемента, для которого установлено align-items:center, выходит за рамки элемента
Ошибка встречается в Internet Explorer 10-11. При использовании align-items:center для контейнера, его содержимое, если оно имеет достаточно большой размер, будет выходить за рамки объекта.
Решение
В большинстве случаев это может быть исправлено установкой максимальной ширины 100% для контейнера. Если flex-элемент имеет box-sizing:border-box, вы должны убедиться, что указанные размеры учитывают эти свойства. Если вы используете box-sizing, это решение не будет работать, в таком случае вам придется использовать дополнительный контейнер внутри основного.
3. Ошибка с обработкой min-height, указанного для колонок
Для того чтобы элементы могли определять свои размеры и позиционирование, они должны знать о размерах контейнера, в который они помещены. Например, чтобы центрировать объект по вертикали, необходимо знать высоту его родителя. В IE 10-11 объекты ведут себя так, как будто не догадываются о свойствах своих родителей.
Решение
Самым распространенным решением является установка height: 100vh (или 100%). В таком случае, если в контейнер будет помещено слишком много содержимого, появится полоса вертикальной прокрутки. Бывают случаи, когда такое решение не будет работать, тогда используйте определение браузера.
4. Ошибка обработки короткой записи значений свойства flex
Раньше спецификация flexbox требовала использовать полную запись:
Если preferred-size равен 0, это должно быть указано, например, \»0px\», чтобы избежать двусмысленности, в другом случае возникнет синтаксическая ошибка.
Это требование уже неактуально, но IE 10-11 все еще воспринимает его всерьез.
Решение
Всегда явно указывайте preferred-size.
Важно: используя значения вроде 1 0 0px, вы все еще можете столкнуться с проблемой, потому что многие минимизаторы CSS будут конвертировать 0px в 0. Чтобы избежать этого, убедитесь, что используете 0% вместо 0px, так как большинство минимизаторов не убирают процентные значения.
5. Нарушение пропорций некоторых элементов
Спецификация 2014 года описывает определение размера flex-элемента следующим образом:
Размер элемента, переполнения которого не видно, приравнивается к меньшему из значений: а) min-content; б) width/height, если они указаны.
В случае если вы пытаетесь вписать изображение размерами 200×500 пикселей, а ширина контейнера составляет всего 300 пикселей, изображение будет масштабировано для того, чтобы вписаться в контейнер. В итоге высота изображения получит значение 120 пикселей. Из приведенной выше спецификации неясно, какое значение высоты изображения будет использовано для расчета высоты контейнера: 200 или 120.
Последняя спецификация решила эту проблему в пользу размеров, которые не нарушают пропорций вложенного объекта, но IE 10-11 все еще работает по старой спецификации.
Решение
Вы можете избежать этой проблемы путем добавления еще одного элемента контейнера с теми же пропорциями. Тогда внутренний элемент перестанет быть гибким и будет масштабироваться, как обычный.
6. Изменилось значение Flex по умолчанию
Когда IE 10 только разрабатывался, значение flex по умолчанию устанавливалось none, что аналогично (0 0 auto). Недавняя спецификация определила стартовым значением (0 1 auto). Это значит, что IE 10 использует схему масштабирования, отличную от других браузеров.
Решение
Если у вас есть необходимость поддерживать IE 10, лучшим решением будет всегда явно задавать flex-shrink или flex для всех ваших гибких элементов.
7. Flex-basis не учитывает box-sizing:border-box
Ошибка, которая встречается в Internet Explorer 10-11.
Явное указание flex-basis должно действовать так же, как и width или height. Оно определяет размер элемента и все примененные к нему свойства, чтобы увеличить или уменьшить свои размеры соответственно. Но Internet Explorer 10-11 всегда использует box model гибкого элемента, даже если для него установлены box-sizing:border-box.
Решение
Есть два способа обойти эту ошибку. Первый не требует дополнительной разметки, но второй более гибкий:
- Вместо того чтобы установить точное значение flex-basis, используйте auto, а затем явно задайте ширину или высоту.
- Применяйте элемент-оболочку, который не использует границы или отступы.
8. Отсутствие поддержки Calc () при сокращенной записи
Internet Explorer 10-11 игнорирует сокращенную запись значений flex, которая использует calc() при описании flex-basis.
Решение
Эта ошибка проявляется только при короткой записи, так что если вам необходимо использовать Calc (), указывайте каждое свойство индивидуально.
9. Button не становится flex-контейнером
В отличие от input, элементы типа \»button\» или \»submit\» могут содержать дочерние элементы. Это позволяет вставлять что-то кроме текста, не нарушая семантику. Однако Firefox не позволяет использовать этот прием.
Решение
Простое решение этой проблемы заключается в использовании оболочки для Button со свойством display:flex.
СSS не работает display: flex
Но этот CSS не применяется к этому блоку, при чем если указать margn-left: 300px; — то это значение применяется.
Нужно просто центрировать этот блок, margn-left применить можно, но получится не адаптивный элемент…
Stich
- Испытатели
- Сообщений: 252
#2 11 апреля 2019 в 15:52
А что у вас items? Строки в блоке?
Lora
- Псков
- Испытатели
- На орбите
- Сообщений: 2851
#3 11 апреля 2019 в 15:54
А что у вас items? Строки в блоке?
Lora
Не совсем понял вопрос))))
Можно раскрыть немного?Stich
- Испытатели
- Сообщений: 252
Сегодня в 07:51
Реклама
#4 11 апреля 2019 в 15:56
А если margin:0 auto;
t.me/googleindexingapi
- Хьюстон
- Испытатели
- На орбите
- Сообщений: 2477
#5 11 апреля 2019 в 15:56
Почитайте документацию flex контейнеров, для начала). И возможно найдёте ошибку), Просто долго писать.
Lora
- Псков
- Испытатели
- На орбите
- Сообщений: 2851
#6 11 апреля 2019 в 15:57
А если margin:0 auto;
чебурек дохлэй мыш
пробовал, не работает((
Stich
- Испытатели
- Сообщений: 252
#7 11 апреля 2019 в 15:59
Почитайте документацию flex контейнеров, для начала). И возможно найдёте ошибку), Просто долго писать.
Lora
Через поиск не нашел по запросу «flex» «flex контейнер» ни чего нет, ни на форуме ни в документации…
Ткните носом, пожалуйста)Stich
- Испытатели
- Сообщений: 252
#8 11 апреля 2019 в 15:59
margin-left:50%;
transform:translate(-50%, 0);Способов центировать дофига, наугад сложнее.
t.me/googleindexingapi
- Хьюстон
- Испытатели
- На орбите
- Сообщений: 2477
#9 11 апреля 2019 в 16:02
Способов центировать дофига, наугад сложнее.
чебурек дохлэй мыш
Я это понимаю, гуглом пользоваться умею слава богу, но ни чего не работает, кроме margin-left, margin-right, margin-top, margin-bottom)))))
Stich
- Испытатели
- Сообщений: 252
#10 11 апреля 2019 в 16:03
Ширина блока известна?
Если да, тоНу а то, что ничего не работает, похоже на проделки электрического шайтана.
t.me/googleindexingapi
- Хьюстон
- Испытатели
- На орбите
- Сообщений: 2477
#11 11 апреля 2019 в 16:06
Ширина блока известна?
чебурек дохлэй мыш
Нет, ни где width не прописан.
Stich
- Испытатели
- Сообщений: 252
#12 11 апреля 2019 в 16:11
HTML хоть бы показали.
SpideR
- Испытатели
- Сообщений: 919
#13 11 апреля 2019 в 18:33
но ни чего не работает, кроме margin-left, margin-right, margin-top, margin-bottom)))))
@stich
9 из 10, что вы назначаете стили родителю, а хотите чтобы они применялись к потомкам.
Потому оно правильно «не работает»))Украинский для инстант
Олег Васильевич я
- Черновцы
- Разработчики
- Сообщений: 3803
#14 11 апреля 2019 в 19:08
но ни чего не работает, кроме margin-left, margin-right, margin-top, margin-bottom)))))
@stich
9 из 10, что вы назначаете стили родителю, а хотите чтобы они применялись к потомкам.
Потому оно правильно «не работает»))Олег Васильевич я
Вы правы… Теперь все работает.
Опыт бесценен!))