Вопросы с меткой [flexbox]
Flexbox (Flexible Box Layout Module) - более эффективный способ вёрстки, выравнивания и распределения свободного места между элементами в контейнере, даже когда их размер неизвестен и/или динамический (отсюда слово «гибкий»).
870
вопросов
0
голосов
0
ответов
27
показов
Использование gap в 2023 году
На сегодняшний день gap поддерживают 94.85% браузеров, но все же боюсь использовать это прекрасное свойство. Нужно ли дальше мучатся с margin и padding или уже можно использовать gap у flexbox и grid ...
0
голосов
0
ответов
62
показа
перенос элементов flex
появилась проблема не получается ни как сделать вот такие row и columns, можете помочь?
Нужно через flex сделать этот пример показанный на картинке.
0
голосов
1
ответ
34
показа
Растянуть элементы
У меня есть горизонтальный список (количество элементов может быть разным). Каждый элемент списка состоит из заголовка, длина которого зависит от количества текста в нём, и кнопки фиксированной длины. ...
0
голосов
0
ответов
32
показа
Помогите разобраться с флексом
Подскажите в чем я ошибаюсь.
у меня два меню которые я хочу разместить горизонтально. Они находятся в блоке, которому я дал тоже свойство flex, как и блокам с меню.
Как только я начинаю устанавливать ...
0
голосов
0
ответов
31
показ
Странности с расчётом ширины изображения во flex-контейнере
В приведённом ниже примере Firefox ужимает картинку до её ширины, а Chrome не ужимает. Вопрос — почему? Чем обусловлена разница — багами какого-то из браузеров, вольностями в спецификации или моим ...
0
голосов
2
ответа
26
показов
Как размещать новосозданные <div> над другими
Я создаю карточную игру. Вот пример карт в руке противника:
<div class="enHend" id="enHand">
<div class="card" id="card62" onclick="putEnCard(62)&...
0
голосов
1
ответ
36
показов
Как сделать несколько контейнеров, находящихся рядом друг с другом?
Я хочу сделать общий контейнер #profile-container, в котором слева будут profile-info, profile-details, profile-ratings контейнеры (и всё, что в них лежит), расположенные друг под другом, а справа от ...
-1
голос
1
ответ
23
показа
Вёрстка контейнера с элементами разной ширины и высоты
Какой самый удобный и простой способ сверстать данный макет? Что лучше использовать grid или flex?
0
голосов
0
ответов
11
показов
Как задать space-between для пунктов меню Bootstrap?
Беру стандартный код для панели навигации из документации Bootstrap. Выкидываю из него логотип, выпадающий список, формы. Оставляю только кнопку navbar-toggler и собственно список с пунктами меню.
...
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-...
0
голосов
1
ответ
90
показов
CSS - ширина внутреннего div во flex-контейнере при изменении ширины контейнера
Как мне добиться правильного поведения элемента? Использование flex не обязательно, это может быть grid или любой другой HTML код, дающий тот же результат.
В коде есть элемент примерно такого вида:
...
0
голосов
1
ответ
36
показов
Почему не работает flex-wrap: wrap? Ячейка не переносится на другую строку при сжимании окна браузера
Ни как не могу понять в чем проблема, почему не переносится ячейка?
.why-items {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin: 46px -15px 0 -15px;
}
.why-item {
...
0
голосов
1
ответ
38
показов
Как сделать флекс элементы с разной высотой?
как сверстать блоки так как показано на картинке?
0
голосов
1
ответ
25
показов
Как на флексах прижать первую строку к левому краю, вторую к правому?
Есть такой блок, сверстанный на флоатах.
.bonuses_block {
display: block;
margin: 0 auto;
padding: 10px;
width: 100%;
max-width: 300px;
border: 1px solid #000;
}
.bonuses_block:...
-1
голос
4
ответа
52
показа
Как задать 3м блокам ширину в 1/4, каждому, чтобы оставшаяся 1/4 не занималась и оставалось пустой?
У меня есть div в котором расположены 3 блока. Надо чтобы каждый из них занимал 1/4 ширины, а пустое место не распределялось по остальным блокам, и те не растягивались?
Пробовала flex:1;, но ...
0
голосов
1
ответ
30
показов
CSS. flex. При наведении чтобы раздвигался один элемент ленты с отображением всего текста
Есть элемент (line-container), который вмещает много дочерних (line-name).
При нормальном отображении текст в дочерних элементах сокращается, чтобы все элементы были одинакового размера. Нужно ...
0
голосов
1
ответ
31
показ
Расположение блоков css как на фото
Всем привет, как мне расположить эту иконку с собачьей лапой поверх фотографии как на этом скриншоте? Спасибо)
1
голос
0
ответов
34
показа
как расположить "блоки" как на данной картинке?
Пока мой выглядит вот так:
* {
margin: 0;
padding: 0;
}
body {
display: flex;
}
.menu {
background-color: #008B8B;
flex-direction: column;
}
.zagolovok {
background-...
0
голосов
1
ответ
33
показа
Как правильно сверстать табы на флексах?
Есть такой блок с табами:
.tabs__wrapper {
display: flex;
justify-content: space-between;
width: 100%;
}
.tab {
display: flex;
justify-content: center;
align-items: center;
padding: ...
0
голосов
0
ответов
23
показа
Изменить расположение блоков в адаптивной секции
Необходимо сверстать адаптивную секцию на флексах. Секция состоит из заголовка h2 , блока с копирайтом div class=copy, и блока с основным контентом div class=content. При разрешении 1024 заголовок ...
0
голосов
0
ответов
32
показа
Как заполнить контентом оставшееся место в блоке
нужно расположить логотипы как на картинке. Не пойму как правильно св-ва раскинуть.. Если юзаю flex и ставлю строчное расположение - заполняется все только вниз, то есть место под кнопкой пустое, а ...
0
голосов
1
ответ
26
показов
Как зафиксировать контейнер для строк в одном положении?
У меня есть контейнер item, в котором на одной строке расположены по порядку название, дата и статус, заданные с помощью
.title {
display: flex;
justify-content: space-between;
}
Ниже расположено ...
0
голосов
0
ответов
33
показа
Респонсивная верстка шапки
Как правильно сделать респонсивную верстку шапки, чтобы работало как надо? Для десктопа, телефона и планшета? Работаю на Vue.js, но тут дело в стилях, буду очень благодарен, если поможете с этим!
CSS +...
0
голосов
0
ответов
13
показов
как выровнять текст с помощью flexbox?
Я решил сделать боковое меню, и применил в нем flexbox, но не могу выровнять текст по центру.
https://codepen.io/ArtaDoxoff/pen/zYmbrMx
код по ссылке
0
голосов
1
ответ
89
показов
Карточки одинаковой высоты в Bootstrap
По заданию требуется используя сетку Bootstrap 4 создать секцию с 4 карточками одинаковой высоты с картинкой в верхней части, и кнопкой, прижатой к нижнему краю карточки.
Я применил к блокам card и ...
1
голос
0
ответов
37
показов
css: при использовании двух div блоков в контейнере с column-count = 2 блоки выводятся друг за другом вертикально, а не горизонтально
При использовании двух div блоков в контейнере с column-count = 2 блоки выводятся друг за другом вертикально, а не горизонтально
.blocks {
width : 100%;
column-count : 2;
...
0
голосов
1
ответ
37
показов
Адаптив во Vue3 использую tailwindcss
<div
class="justify-between"
:style="[ mainStore.getCollapsed ? 'width: 93vw' : 'width: 83vw']"
>
<div/>
Всем привет,такой вопрос. Необходимо сделать адаптив страницы. В ...
0
голосов
0
ответов
35
показов
flex-shrink не работает корректно с img в WebKit (движок Safari)
У меня есть страница где должны быть расположены элементы: картинка и тег form с полями. Задана ширина 40% для картинки и 60% для формы и соотвествующий gap для расстояния между ними. При уменьшении ...
0
голосов
1
ответ
27
показов
Не срабатывает свойство justify-content: space-between
HTML
<header class="header">
<div class="left-box">
<div class="logo-box">
<a href="#">
<div ...
1
голос
3
ответа
132
показа
Как растянуть выпадающие меню на всю ширину экрана?
Всем привет! Подскажите пожалуйста как растянуть выпадающие меню на всю ширину экрана?(чтобы была заполнена область указаная стрелкой)
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
...
-1
голос
2
ответа
58
показов
Помогите пожалуйста сверстать Grid/Flex сетку
Как я могу сделать такую грид сетку или через flex?
0
голосов
1
ответ
48
показов
Как правильно расположить элементы внутри флекс-контейнера и задать им размер?
Подскажите, пожалуйста, как правильно, без костылей, расположить элементы внутри флекс=контейнера.
Без margin'ов у меня не получается раскидать элементы по их местам... Но ведь же безкостыльное ...
0
голосов
1
ответ
22
показа
Выравнивание по флексбоксу
Существует мобайл-версия шапки следующего вида:
<header class="header"> // .header {display: flex}
<div class="header__logo"></div>
<...
0
голосов
2
ответа
70
показов
Flex сжимает элемент
Мультиселекты "Прайм тайм" не хотят растягиваться (т.к. обернул их в контейнер). Все средства перепробовал, но ничего не помогает (кроме конкретного width:**px). Как их растянуть ?
<!...
0
голосов
0
ответов
59
показов
CSS display: flex прижать блоки к верху по высоте
У меня есть такой код:
<div class="content">
<a class="test">
</a>
<a class="...
0
голосов
1
ответ
40
показов
Как сделать блоки одной высоты для десктоп версии и одной ширины для мобильной версии?
Всем привет. Имеется вот такая вёрстка на Bootstrap 4. Есть стилизованные "Radio", и в зависимости от количества текста внутри "label" высота у этих блоков разная, также при ...
0
голосов
2
ответа
24
показа
Как центрировать flex-контейнер
Хотелось как в гриде. Чтобы сам флех-контейнер было по центру или например если justify-content:space-between был равномерный отступ между блоками, но на следующем ряде все начались вначале как flex-...
0
голосов
1
ответ
36
показов
Как сделать такое на grid или flex
Как отступать слева по максимальной ширине текста? Как это сделать без минимальной ширины текста
0
голосов
0
ответов
37
показов
Не получается адаптивная верстка. Flex не работает так как надо
Не пойму что делаю не так. По идее, на всех устройствах с разрешением до 767 пикселей кнопка должна уезжать вниз, а текст ставиться наверх. Но так не работает. Что делаю не так?
<!DOCTYPE html&...
0
голосов
1
ответ
35
показов
Почему не работает position fixed и flexbox контейнер?
У меня есть шапка сайта(header__top) с position fixed и justify-content: space-between, но justify-content не работает, и я знаю что при position fixed нужно задавать ширину блоку, но если я задаю ...
0
голосов
1
ответ
23
показа
Пункты меню занимали 100% высоты родителя
Как сделать, чтобы пункты меню занимали 100% высоты родителя?
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
padding: 0;
margin: 0;
border: 0;
}
ul li {
list-style-type: none;
}...
0
голосов
0
ответов
31
показ
Как выровнять в последней строке одиночный флекс элемент по левому краю так, чтобы он выравнивался под элемент над ним?
Нужно выровнять последний элемент под первым на предыдущей строке. display: flex; justify-content: center
0
голосов
1
ответ
131
показ
Последние два блока слева при justify-content space-between
Есть список блоков по 4 в ряд, сделана по ширене родительского с помощью justify-content space-between
Последний ряд имеет 2 блока и естественное их раскидывает тоже в разные стороны.
Можно ли как-то ...
0
голосов
2
ответа
25
показов
Как расстянуть блок на оставшиеся высоту родительского блока?
Как расстянуть блок ".body-block" на всю оставшиеся высоту родительского блока, что-бы блок ".footer" прижался к низу родительского блока?
.main-block {
width: 600px;
...
0
голосов
0
ответов
35
показов
Проблема flex-wrap блоки не переносятся
нормально
(для телефонов) блоки не переносятся
Всего блока 3 и каждый по 33.3% дб , проблема из за процентов , чем можно заменить %
.block__display-flex {
display: flex;
flex-direction: row;
...
0
голосов
1
ответ
21
показ
Можно ли при помощи flexbox сделать так, чтобы колонки занимали всю свободное пространство, если есть такая возможность?
Можно ли при помощи flexbox сделать так, чтобы колонки занимали всю свободное пространство, если есть такая возможность? К примеру, как на картинке - , у третьего элемента малая ширина, она может ...
0
голосов
1
ответ
175
показов
Как в flex сделать так, что бы картинки встали справа, а текст слева от них?
Недавно начал изучать верстку в HTML,CSS и познакомился с FlexBox. Float, как мне сказали тема устаревшая, все верстают на flex,grid.
Подскажите пожалуйста, как в flex сделать так, что бы картинки ...
0
голосов
1
ответ
104
показа
Аналог flex-grow:1; для блока без высоты [дубликат]
Есть простой пример: https://codesandbox.io/s/color-c4wos0?file=/src/styles.css
В данном примере с flex-grow:1; Блок занимает все свободное для него пространство, то есть от Header до Footer. При ...
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;
}
&...
0
голосов
1
ответ
33
показа
Почему после добавления блоков текст становится без троеточий?
Применяю для первого span стили, чтобы при уменьшении размер экрана текст сокращался:
#SPAN_4 {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
но если я добавлю DIV_2 и DIV_3 ...