Почему не работает display flex

Почему не работает display: flex; flex-direction: row;?

Работает. По умолчанию justify-content равен flex-start, вот элемент hi__body и находится с левого края. Для того чтобы действие «flex-direction: row» было заметней, нужно задать другое значение для justify-content (center например) или добавить еще один элемент (или несколько) по соседству с hi__body. Прошу прощения если неправильно понял проблему.

Ответ написан более года назад

Комментировать

Нравится Комментировать

Ответы на вопрос 0

Ваш ответ на вопрос

Войдите, чтобы написать ответ

javascript

JavaScript
+2 ещё

Как реализовать код, чтобы при нажатии на кнопку два блока менялись друг с другом местами, то есть изменять их order?

1 подписчик
5 минут назад
2 просмотра

Как поместить scroll -контейнер во flexbox и не облажаться.

Столкнулись с проблемой: блок со скролом распепячивает flex. Давайте разбираться.

4 месяца назад показалось, что хак найден, о чём мы поспешили рассказать в твиттере, но потом стало ясно что таки поспешили.

Помотрели в спеку и mdn, но ключей к решению не нашли.

MDN: In order for overflow to have an effect, the block-level container must have either a set height (height or max-height) or white-space set to nowrap.

После экспериментов (демки ниже) стало понятно что приводит к растяжению ширины scroll -контейнера: родительские flex-контейнеры без заданной через width ширины, см. сниппет 1.4. Ширина-то необходима как следует из статьи с MDN.

Но очевидно, задание width элементу flex-контейнера ломает flex-поведение, см. сниппеты 1.6. и 2.2.

А коли во flex мы не имеем права задавать width , то и scroll справедливо не работает.

Слава Гридам, был найден ХАК: Если обернуть scroll в грид из одного элемента, то задавать ширину или white-space , как указано в документации не трубуется, см. сниппет 0.0.

Демки в порядке дебага

0. Хак

1. Попытка сломать простой работающий скрол внутри ширины в %

❎ Just overflow
❎ Just overflow in flex wrap
❎ Just overflow with single scrollable
ссылка сломалась �� Minimal reproducing: after extra flex added!
ссылка сломалась Fixed: .flex-wrap.inner
ссылка сломалась But it’s broken at all

2. Попытка починить сломанное решение из проекта

ссылка сломалась �� Reproducing (copied from project)
ссылка сломалась ✴️ Removing div.scroll-wrap fixes it! But width still overflows
�� With Grid hack

Ответы на вопросы

Почему просто не заворачивать всё в гриды

В динамических SPA компонентах содержимое может произвольным образом меняться, часто нельзя задавать в css жёсткую структуры. Хотя гриды и обладают гибкостью к содержимому контейнера (например, можно описать колонки для произвольного количества «строк»), часто это или излишне или всё же недостаточно гибко и требует дублировать знание о структуре динамического контента в css.

Где это нужно

Мы эту проблему решили для скролящихся вкладок внутри 2-х вложенных flex-контейнеров составной шапки. Эта шапка состоит из родительского React-компонента, описывающего компоновку (layout) и встроенного фрагмента, специфичного для этого типа страниц.

Зачем в демках два вложенных флекса

Например .scroll-wrap-2 это прекрасный пример хака «scrollbar-hider»: прячущего скролбар внизу для любой платформы. В других демках вложенные флексы демонструруют реальную структуры вёрстки боевого проекта состоящего из встроенных из вне компонент.

Продолжение

В следующей статье расскажем про хак с display: grid и position: sticky в главных ролях.

Благодарности ��

Эти результаты не стали бы реальностью без классных ребят из моей команды:

СSS не работает display: flex

Но этот CSS не применяется к этому блоку, при чем если указать margn-left: 300px; — то это значение применяется.

Нужно просто центрировать этот блок, margn-left применить можно, но получится не адаптивный элемент…

Stich

Испытатели
Сообщений: 252

#2 11 апреля 2019 в 15:52
А что у вас items? Строки в блоке?

Lora

Псков
Испытатели
На орбите
Сообщений: 2807

#3 11 апреля 2019 в 15:54

А что у вас items? Строки в блоке?

Lora

Не совсем понял вопрос))))
Можно раскрыть немного?

Stich

Испытатели
Сообщений: 252

Сегодня в 13:46

Олег Васильевич я

Черновцы
Разработчики
Сообщений: 3803

#14 11 апреля 2019 в 19:08

но ни чего не работает, кроме margin-left, margin-right, margin-top, margin-bottom)))))

@stich

Олег Васильевич я
Вы правы… Теперь все работает.
Опыт бесценен!))

Флексы для начинающих

Flexbox — инструмент построения крупных сеток и микросеток.

Чтобы превратить блок во флекс-контейнер, ему задают свойство display: flex . Непосредственные потомки такого контейнера — флекс-элементы — становятся гибкими. Они легко сжимаются или растягиваются, меняют порядок, поддаются выравниванию по главной и поперечной осям.

Сайт HTML Academy сделан на флексах

Благодаря таким свойствам мы можем создавать на флексах меню сайта, раздел с карточками товаров, пагинацию или любые другие блоки, в которых нужно предусмотреть переполнение контентом. При правильном использовании Flexbox вы получите отзывчивый сайт, который легко адаптируется к различным размерам экрана и устройствам.

Главная и поперечная оси

Элементы флекс-контейнера выравниваются вдоль двух осей: главной и поперечной.

Главная ось указывает направление потока флекс-элементов. По умолчанию он течёт по горизонтали слева направо, от начала к концу оси:

Направлением главной оси можно управлять, меняя значения свойства flex-direction :

flex-direction: row — ось направлена слева направо, элементы располагаются в ряд. Это значение по умолчанию.
flex-direction: row-reverse — элементы идут в обратном направлении — справа налево.
flex-direction: column — элементы располагаются в столбец сверху вниз.
flex-direction: column-reverse — элементы идут снизу вверх.

Чаще всего используется значение по умолчанию — row , чуть реже — column . x-reverse применяют редко.

Поперечная ось всегда находится под углом 90 градусов к главной. Если главная ось горизонтальна, поперечная идёт сверху вниз, а если главная вертикальна, то поперечная направлена слева направо.

justify-content

Флекс-элементами можно управлять, меняя их положение относительно каждой оси. CSS-свойство justify-content распределяет элементы по главной оси. Оно принимает следующие значения:

flex-start — элементы стоят в начале оси.
flex-end — элементы стоят в конце оси.
center — элементы по центру оси.
space-between — элементы равномерно распределены вдоль главной оси, при этом первый элемент располагается в начале, а последний — в конце. Между крайними элементами и флекс-контейнером отступа нет.
space-around — элементы равномерно распределены вдоль оси. Расстояние между крайними элементами и флекс-контейнером равно половине отступа между соседними флекс-элементами.
space-evenly — элементы равномерно размещены вдоль оси. Отступы между соседними элементами и краями флекс-контейнера равны.

align-items

За выравнивание элементов по поперечной оси отвечает свойство align-items . По умолчанию у него значение stretch , то есть элементы растягиваются вдоль всей оси.

flex-start — элементы идут в начале оси;
flex-end — элементы идут в конце оси;
center — элементы в центре оси;
baseline — элементы размещены по базовой линии.

Базовая линия — невидимая линия, которая проходит по нижней части букв.

Порой в макете отдельные элементы располагаются выше или ниже, правее или левее. На такие случаи во флексах есть свойство align-self . Оно выравнивает отдельный элемент по поперечной оси.

Значения align-self такие же, как у align-items.

align-content

Вдоль поперечной оси можно выравнивать не только элементы, но и ряды флекс-элементов — это делается с помощью свойства align-content .

align-content немного похож на свойства justify-content и align-items . От первого он взял значения:

flex-start
flex-end
center
space-between
space-around
space-evenly

От align-items достались свойства: stretch и baseline .

С align-content мы можем расположить ряды элементов более гибко — например, задав одинаковые расстояния между ними или растянув на всю возможную высоту.

Отличие align-content от align-items

align-items выравнивает элементы внутри флекс-контейнера, а align-content — ряды.

По умолчанию у align-content значение stretch — то есть ряды флекс-элементов растягиваются, и свободное пространство делится между ними пополам. В таких случаях отображение зависит от значения align-items . Если это тоже stretch , то элементы в строке растянутся на всю высоту. Если нет — элементы сожмутся до размеров содержимого и выровняются согласно значению align-items .

Когда align-content задано другое значение (не stretch ), оно перекрывает значения align-items и align-self . Например, здесь ряды элементов окажутся в конце поперечной оси:

flex-wrap

В коде выше есть свойство flex-wrap — оно отвечает за перенос строк во флекс-контейнере. По умолчанию у свойства стоит значение no-wrap , то есть перенос запрещён. При добавлении новых элементов все элементы станут сжиматься до минимально возможной ширины — даже если явно указано значение width . Когда элементы перестанут помещаться в контейнере, то выйдут за его пределы.

Чтобы элементы при заполнении ряда переносились на новый, нужно указать flex-wrap: wrap . Наглядный пример — гифка в начале статьи.

Ещё без переноса рядов не работает свойство align-content . Например, в таком случае элементы выровняются по началу поперечной оси.

Игры и курсы для практики

Флексы — очень гибкий инструмент, с его помощью можно создавать сложные микросетки и даже менять элементы местами. Основу теории вы теперь знаете — дальше дело за закреплением материала и углублением знаний.

Где практиковаться и что изучить:

Flexbox froggy — игра на русском языке, где вы с помощью флексов размещаете лягушат на кувшинках.
Flexbox Defense — англоязычная игра в стиле Tower Defense. Вы на флексах располагаете башни, чтобы защититься от врагов.
Навык «Построение сеток на флексах по макету». Изучаете 50 страниц углублённой теории о flexbox и выполняете задания — строите сетки для сайта. В навыке 10 кейсов разной сложности с макетом в формате Figma и готовым решением.
Курс «HTML и CSS. Профессиональная вёрстка сайтов». Научитесь верстать сайты и писать для них стили. Изучите не только флексы, но и гриды — ещё один современный механизм построения сеток.

Материалы по теме

Примеры использования флексов
Когда использовать флексы, а когда гриды
Как сверстать макет

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Почему не работает display flex