Вопросы с меткой [flexbox]

Flexbox (Flexible Box Layout Module) - более эффективный способ вёрстки, выравнивания и распределения свободного места между элементами в контейнере, даже когда их размер неизвестен и/или динамический (отсюда слово «гибкий»).

Фильтрация
Сортировка
Метки
0 голосов
0 ответов
27 показов

Использование gap в 2023 году

На сегодняшний день gap поддерживают 94.85% браузеров, но все же боюсь использовать это прекрасное свойство. Нужно ли дальше мучатся с margin и padding или уже можно использовать gap у flexbox и grid ...
GIONRAIG's user avatar
0 голосов
0 ответов
62 показа

перенос элементов flex

появилась проблема не получается ни как сделать вот такие row и columns, можете помочь? Нужно через flex сделать этот пример показанный на картинке.
Akbaraliev's user avatar
0 голосов
1 ответ
34 показа

Растянуть элементы

У меня есть горизонтальный список (количество элементов может быть разным). Каждый элемент списка состоит из заголовка, длина которого зависит от количества текста в нём, и кнопки фиксированной длины. ...
vvtvvtvvt1's user avatar
0 голосов
0 ответов
32 показа

Помогите разобраться с флексом

Подскажите в чем я ошибаюсь. у меня два меню которые я хочу разместить горизонтально. Они находятся в блоке, которому я дал тоже свойство flex, как и блокам с меню. Как только я начинаю устанавливать ...
Sergei Bobrov's user avatar
0 голосов
0 ответов
31 показ

Странности с расчётом ширины изображения во flex-контейнере

В приведённом ниже примере Firefox ужимает картинку до её ширины, а Chrome не ужимает. Вопрос — почему? Чем обусловлена разница — багами какого-то из браузеров, вольностями в спецификации или моим ...
andreymal's user avatar
  • 12.8k
0 голосов
2 ответа
26 показов

Как размещать новосозданные <div> над другими

Я создаю карточную игру. Вот пример карт в руке противника: <div class="enHend" id="enHand"> <div class="card" id="card62" onclick="putEnCard(62)&...
Vadym Petryshche's user avatar
0 голосов
1 ответ
36 показов

Как сделать несколько контейнеров, находящихся рядом друг с другом?

Я хочу сделать общий контейнер #profile-container, в котором слева будут profile-info, profile-details, profile-ratings контейнеры (и всё, что в них лежит), расположенные друг под другом, а справа от ...
jashdajsd's user avatar
-1 голос
1 ответ
23 показа

Вёрстка контейнера с элементами разной ширины и высоты

Какой самый удобный и простой способ сверстать данный макет? Что лучше использовать grid или flex?
Artem Platonov's user avatar
0 голосов
0 ответов
11 показов

Как задать space-between для пунктов меню Bootstrap?

Беру стандартный код для панели навигации из документации Bootstrap. Выкидываю из него логотип, выпадающий список, формы. Оставляю только кнопку navbar-toggler и собственно список с пунктами меню. ...
Lucille's user avatar
  • 11
0 голосов
0 ответов
18 показов

Отступы у блока с flex-wrar:wrap

.container { display: flex; gap: 10rem; padding: 3rem 0; } .menu { display: inline-flex; gap: 1rem 4rem; list-style-type: none; flex-wrap: wrap; padding: 0; margin: 0; background-...
Work Perets's user avatar
0 голосов
1 ответ
90 показов

CSS - ширина внутреннего div во flex-контейнере при изменении ширины контейнера

Как мне добиться правильного поведения элемента? Использование flex не обязательно, это может быть grid или любой другой HTML код, дающий тот же результат. В коде есть элемент примерно такого вида: ...
Yuriy Tarnavsky's user avatar
0 голосов
1 ответ
36 показов

Почему не работает flex-wrap: wrap? Ячейка не переносится на другую строку при сжимании окна браузера

Ни как не могу понять в чем проблема, почему не переносится ячейка? .why-items { display: flex; flex-wrap: wrap; justify-content: space-around; margin: 46px -15px 0 -15px; } .why-item { ...
Алексей Петров's user avatar
0 голосов
1 ответ
38 показов

Как сделать флекс элементы с разной высотой?

как сверстать блоки так как показано на картинке?
dava002's user avatar
  • 33
0 голосов
1 ответ
25 показов

Как на флексах прижать первую строку к левому краю, вторую к правому?

Есть такой блок, сверстанный на флоатах. .bonuses_block { display: block; margin: 0 auto; padding: 10px; width: 100%; max-width: 300px; border: 1px solid #000; } .bonuses_block:...
FrontEnder007's user avatar
-1 голос
4 ответа
52 показа

Как задать 3м блокам ширину в 1/4, каждому, чтобы оставшаяся 1/4 не занималась и оставалось пустой?

У меня есть div в котором расположены 3 блока. Надо чтобы каждый из них занимал 1/4 ширины, а пустое место не распределялось по остальным блокам, и те не растягивались? Пробовала flex:1;, но ...
дарья мова's user avatar
0 голосов
1 ответ
30 показов

CSS. flex. При наведении чтобы раздвигался один элемент ленты с отображением всего текста

Есть элемент (line-container), который вмещает много дочерних (line-name). При нормальном отображении текст в дочерних элементах сокращается, чтобы все элементы были одинакового размера. Нужно ...
Alexey Melnichuk's user avatar
0 голосов
1 ответ
31 показ

Расположение блоков css как на фото

Всем привет, как мне расположить эту иконку с собачьей лапой поверх фотографии как на этом скриншоте? Спасибо)
Danil Ovchinnikov's user avatar
1 голос
0 ответов
34 показа

как расположить "блоки" как на данной картинке?

Пока мой выглядит вот так: * { margin: 0; padding: 0; } body { display: flex; } .menu { background-color: #008B8B; flex-direction: column; } .zagolovok { background-...
ダーク's user avatar
0 голосов
1 ответ
33 показа

Как правильно сверстать табы на флексах?

Есть такой блок с табами: .tabs__wrapper { display: flex; justify-content: space-between; width: 100%; } .tab { display: flex; justify-content: center; align-items: center; padding: ...
FrontEnder007's user avatar
0 голосов
0 ответов
23 показа

Изменить расположение блоков в адаптивной секции

Необходимо сверстать адаптивную секцию на флексах. Секция состоит из заголовка h2 , блока с копирайтом div class=copy, и блока с основным контентом div class=content. При разрешении 1024 заголовок ...
Андрей's user avatar
0 голосов
0 ответов
32 показа

Как заполнить контентом оставшееся место в блоке

нужно расположить логотипы как на картинке. Не пойму как правильно св-ва раскинуть.. Если юзаю flex и ставлю строчное расположение - заполняется все только вниз, то есть место под кнопкой пустое, а ...
Андрей Васейкин's user avatar
0 голосов
1 ответ
26 показов

Как зафиксировать контейнер для строк в одном положении?

У меня есть контейнер item, в котором на одной строке расположены по порядку название, дата и статус, заданные с помощью .title { display: flex; justify-content: space-between; } Ниже расположено ...
fiorentina.gf's user avatar
0 голосов
0 ответов
33 показа

Респонсивная верстка шапки

Как правильно сделать респонсивную верстку шапки, чтобы работало как надо? Для десктопа, телефона и планшета? Работаю на Vue.js, но тут дело в стилях, буду очень благодарен, если поможете с этим! CSS +...
Floyzen's user avatar
  • 11
0 голосов
0 ответов
13 показов

как выровнять текст с помощью flexbox?

Я решил сделать боковое меню, и применил в нем flexbox, но не могу выровнять текст по центру. https://codepen.io/ArtaDoxoff/pen/zYmbrMx код по ссылке
2SeeD's user avatar
  • 3
0 голосов
1 ответ
89 показов

Карточки одинаковой высоты в Bootstrap

По заданию требуется используя сетку Bootstrap 4 создать секцию с 4 карточками одинаковой высоты с картинкой в верхней части, и кнопкой, прижатой к нижнему краю карточки. Я применил к блокам card и ...
Андрей's user avatar
1 голос
0 ответов
37 показов

css: при использовании двух div блоков в контейнере с column-count = 2 блоки выводятся друг за другом вертикально, а не горизонтально

При использовании двух div блоков в контейнере с column-count = 2 блоки выводятся друг за другом вертикально, а не горизонтально .blocks { width : 100%; column-count : 2; ...
Zhihar's user avatar
  • 37.1k
0 голосов
1 ответ
37 показов

Адаптив во Vue3 использую tailwindcss

<div class="justify-between" :style="[ mainStore.getCollapsed ? 'width: 93vw' : 'width: 83vw']" > <div/> Всем привет,такой вопрос. Необходимо сделать адаптив страницы. В ...
Заур Асадов's user avatar
0 голосов
0 ответов
35 показов

flex-shrink не работает корректно с img в WebKit (движок Safari)

У меня есть страница где должны быть расположены элементы: картинка и тег form с полями. Задана ширина 40% для картинки и 60% для формы и соотвествующий gap для расстояния между ними. При уменьшении ...
Daniil Screpchenko's user avatar
0 голосов
1 ответ
27 показов

Не срабатывает свойство justify-content: space-between

HTML <header class="header"> <div class="left-box"> <div class="logo-box"> <a href="#"> <div ...
vi-kry's user avatar
  • 3
1 голос
3 ответа
132 показа

Как растянуть выпадающие меню на всю ширину экрана?

Всем привет! Подскажите пожалуйста как растянуть выпадающие меню на всю ширину экрана?(чтобы была заполнена область указаная стрелкой) nav ul { list-style-type: none; margin: 0; padding: 0; ...
whoismatvei's user avatar
-1 голос
2 ответа
58 показов

Помогите пожалуйста сверстать Grid/Flex сетку

Как я могу сделать такую грид сетку или через flex?
whoismatvei's user avatar
0 голосов
1 ответ
48 показов

Как правильно расположить элементы внутри флекс-контейнера и задать им размер?

Подскажите, пожалуйста, как правильно, без костылей, расположить элементы внутри флекс=контейнера. Без margin'ов у меня не получается раскидать элементы по их местам... Но ведь же безкостыльное ...
Vasiliy Markov's user avatar
0 голосов
1 ответ
22 показа

Выравнивание по флексбоксу

Существует мобайл-версия шапки следующего вида: <header class="header"> // .header {display: flex} <div class="header__logo"></div> <...
Александр Поселенцев's user avatar
0 голосов
2 ответа
70 показов

Flex сжимает элемент

Мультиселекты "Прайм тайм" не хотят растягиваться (т.к. обернул их в контейнер). Все средства перепробовал, но ничего не помогает (кроме конкретного width:**px). Как их растянуть ? <!...
GRCR13's user avatar
  • 73
0 голосов
0 ответов
59 показов

CSS display: flex прижать блоки к верху по высоте

У меня есть такой код: <div class="content"> <a class="test"> </a> <a class="...
Vadioas's user avatar
  • 23
0 голосов
1 ответ
40 показов

Как сделать блоки одной высоты для десктоп версии и одной ширины для мобильной версии?

Всем привет. Имеется вот такая вёрстка на Bootstrap 4. Есть стилизованные "Radio", и в зависимости от количества текста внутри "label" высота у этих блоков разная, также при ...
Studlara's user avatar
0 голосов
2 ответа
24 показа

Как центрировать flex-контейнер

Хотелось как в гриде. Чтобы сам флех-контейнер было по центру или например если justify-content:space-between был равномерный отступ между блоками, но на следующем ряде все начались вначале как flex-...
Dias's user avatar
  • 59
0 голосов
1 ответ
36 показов

Как сделать такое на grid или flex

Как отступать слева по максимальной ширине текста? Как это сделать без минимальной ширины текста
GRCR13's user avatar
  • 73
0 голосов
0 ответов
37 показов

Не получается адаптивная верстка. Flex не работает так как надо

Не пойму что делаю не так. По идее, на всех устройствах с разрешением до 767 пикселей кнопка должна уезжать вниз, а текст ставиться наверх. Но так не работает. Что делаю не так? <!DOCTYPE html&...
Антон Близнюк's user avatar
0 голосов
1 ответ
35 показов

Почему не работает position fixed и flexbox контейнер?

У меня есть шапка сайта(header__top) с position fixed и justify-content: space-between, но justify-content не работает, и я знаю что при position fixed нужно задавать ширину блоку, но если я задаю ...
user avatar
0 голосов
1 ответ
23 показа

Пункты меню занимали 100% высоты родителя

Как сделать, чтобы пункты меню занимали 100% высоты родителя? *, *::before, *::after { box-sizing: border-box; } * { padding: 0; margin: 0; border: 0; } ul li { list-style-type: none; }...
user avatar
0 голосов
0 ответов
31 показ

Как выровнять в последней строке одиночный флекс элемент по левому краю так, чтобы он выравнивался под элемент над ним?

Нужно выровнять последний элемент под первым на предыдущей строке. display: flex; justify-content: center
RE PAPRIKA's user avatar
0 голосов
1 ответ
131 показ

Последние два блока слева при justify-content space-between

Есть список блоков по 4 в ряд, сделана по ширене родительского с помощью justify-content space-between Последний ряд имеет 2 блока и естественное их раскидывает тоже в разные стороны. Можно ли как-то ...
Игорь Головатый's user avatar
0 голосов
2 ответа
25 показов

Как расстянуть блок на оставшиеся высоту родительского блока?

Как расстянуть блок ".body-block" на всю оставшиеся высоту родительского блока, что-бы блок ".footer" прижался к низу родительского блока? .main-block { width: 600px; ...
Dasderdas's user avatar
0 голосов
0 ответов
35 показов

Проблема flex-wrap блоки не переносятся

нормально (для телефонов) блоки не переносятся Всего блока 3 и каждый по 33.3% дб , проблема из за процентов , чем можно заменить % .block__display-flex { display: flex; flex-direction: row; ...
Kilo Arms's user avatar
0 голосов
1 ответ
21 показ

Можно ли при помощи flexbox сделать так, чтобы колонки занимали всю свободное пространство, если есть такая возможность?

Можно ли при помощи flexbox сделать так, чтобы колонки занимали всю свободное пространство, если есть такая возможность? К примеру, как на картинке - , у третьего элемента малая ширина, она может ...
Barricade2's user avatar
0 голосов
1 ответ
175 показов

Как в flex сделать так, что бы картинки встали справа, а текст слева от них?

Недавно начал изучать верстку в HTML,CSS и познакомился с FlexBox. Float, как мне сказали тема устаревшая, все верстают на flex,grid. Подскажите пожалуйста, как в flex сделать так, что бы картинки ...
Rodion Plotnikov's user avatar
0 голосов
1 ответ
104 показа

Аналог flex-grow:1; для блока без высоты [дубликат]

Есть простой пример: https://codesandbox.io/s/color-c4wos0?file=/src/styles.css В данном примере с flex-grow:1; Блок занимает все свободное для него пространство, то есть от Header до Footer. При ...
Nick's user avatar
  • 196
0 голосов
1 ответ
69 показов

Отступы между элементами flexbox

.text-content { width: 600px; display: flex; justify-content: space-between; align-items: flex-start; } .title { font-weight: 700; font-size: 36px; } .paragraph { font-size: 16px; } &...
Ivan Post's user avatar
0 голосов
1 ответ
33 показа

Почему после добавления блоков текст становится без троеточий?

Применяю для первого span стили, чтобы при уменьшении размер экрана текст сокращался: #SPAN_4 { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } но если я добавлю DIV_2 и DIV_3 ...
fiorentina.gf's user avatar