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

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

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

Элементы flex-wrap: wrap; превращаются в список, при прописывании padding, но необходимо чтобы отзывы шли в строку, а не в список

CSS: .clients { display: flex; flex-wrap: wrap; margin-top: 70px; } .clients__item { width: 50%; padding: 0 20px 0 175px; position: relative; margin-bottom: 60px; } ....
-2 голоса
1 ответ
548 показов

Как сделать у flexbox max-height 100% c прокручиванием?

Есть у меня такой вот код MAIN { background-color: antiquewhite; } .box { display: flex; flex-direction: column; } .text-block-1 { background-color: #43e8e5; } .text-block-2 { ...
0 голосов
1 ответ
40 показов

правильная разметка flexbox

Слева меню, справа же на одном уровне меню верхнее и снизу два раздела. Либо я дурочок и от display flex хочу не возможного. Без помощи "top right left bottom". Так я могу, но сайт хочу ...
0 голосов
3 ответа
61 показ

Позиционирование блоков, сетка

Всем привет, нужно реализовать такое же расположение блоков как я сделал ниже, только с одним условием: неважно сколько блоков у нас будет, 1 или 10, они всегда должны распологаться все на своих ...
0 голосов
2 ответа
295 показов

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

.container { display: flex; width: 200px; height: 300px; border: 1px solid black; } <div class="container"> <div>Hello, world!&...
0 голосов
2 ответа
44 показа

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

Как сверстать такое расположение блоков? Желательно на флексах, чтобы они уходили друг под друга при сжатии окна.
-1 голос
1 ответ
80 показов

Контактная информация в 2 столбца

Нужно сверстать блок с контактной информацией таким образом, чтобы слева распологалось название (Адрес, телефон, email и тп), а справа уже сами контакты, то есть вот так: Пока что моя верстка ...
1 голос
1 ответ
203 показа

Растянуть блок в центре flex контейнера

Необходимо растянуть центральный div элемент во flex контейнере, чтобы он занимал ширину равную x2 окружающих его блоков. Выглядеть должно так: [div][div][div][div] [div][""""&...
0 голосов
1 ответ
53 показа

Адаптивная верстка флекс бокса

Есть две колонки (в одной текст, в другой картинка) и они расположены в одну строчку на экране. На 1920x1080 всё хорошо, но при уменьшении экрана: containerWithiTwoRow { display: flex; ...
0 голосов
1 ответ
92 показа

CSS | Как сделать такой макет, используя FlexBox или media-query?

У меня есть изображение, растянутое на весь экран браузера. Мне надо наложить поверх изображения блок с Текстом 1, а также блок с Тексом 2. В зависимости от размера окна браузера, Текст 1 должен ...
0 голосов
1 ответ
27 показов

Позиционирование элементов на сайте

делая очередной прототип, столкнулся с проблемой позиционирования элементов на экране. Хочу сделать текст по середине, а нижнюю белую полосу с отступом в 25 пикселей от низа элемента с помощью флекс ...
0 голосов
1 ответ
434 показа

Как выровнять заголовок с помощью flex?

Как сделать так, чтобы заголовок был по центру страницы с помощью flex? Вот мой код: .title_conteiner{ margin-top: 100px; display: flex; align-items: center; justify-content: space-between;...
0 голосов
1 ответ
48 показов

Кнопки сдвигаются в низ при увеличении высоты блока через hover?

У меня есть несколько карточек. В карточке есть елемент блок с картинкой обрезаная по краях 318x180 настоящий размер 350х198 заголовок текст и кнопка прижата к низу с помощью флекс. Мне нада при ...
2 голоса
2 ответа
74 показа

При использовании центровки во Flexbox - "съедаются" первые элементы

Появилась задача: выстроить все колонки в 1 ряд без переносов - с расчетом на горизонтальную прокрутку страницы. Использовал флексбокс, и вроде всё хорошо было - пока не решил добавить центрирование ...
1 голос
1 ответ
70 показов

Flexbox - как заризинить флекс во флексе?

Доброе утро коллеги. Подскажите. На рисунке два item'а состоящих из иконки и текста. Как мне сделать так , что бы при уменьшении окна браузера эти элементы уменьшались хотя бы на 40%. Я сделал эти ...
-1 голос
1 ответ
698 показов

обрезать картинку слева при уменьшении секции

Есть секция шириной например 1600. В ней по центру есть контент шириной 1000px. в секции через бекграунд, или просто сразу через img. Должна быть картинка слева, шириной 500px. Важно, чтобы при ...
0 голосов
1 ответ
35 показов

Изменение расположения объекта объектов flexbox

Адаптирую сайт для мобилок и нужно, чтобы элементы могли строится сразу двумя такими способами. Сама проблема в том, что не понимаю как расставить элементы в css flexbox, чтобы потом спокойно ...
0 голосов
2 ответа
70 показов

display flex не корректно выравнивает

Не получается расположить элементы в нужном порядке. Слева иконка - справа текст. структура кода такая <div> <img> <span></span> </div> Диву задаю display: flex; align-...
0 голосов
1 ответ
29 показов

Почему ширина не соответсвует указанной?

Объясните пожалуйста, почему в примере ширина элемента уменьшается при указании flex-basis? https://codepen.io/alyona_fedorenko1/pen/XWXByVd В моем понимании левый блок должен занять 70% ширины ...
0 голосов
2 ответа
754 показа

Чем или как заменить justify-content: space-between?

Даже не заменить.. justify-content распределяет элементы неравномерно. Вот похожий вопрос - Как разместить два последних элемента слева при justify-content: space-between. Сверстал сайт, потерял scss ...
1 голос
2 ответа
67 показов

Как позиционировать ячейки, сохраняя baseline выравнивание

Есть таблица. В таблице применено выравнивание flex baseline. Как в случае 2-х и более строк поднимать контент ячеек выше ?
0 голосов
1 ответ
64 показа

Как спозиционировать элементы в flex-box

Есть заголовок магазина, и надо поисковую строку разместить посередине, корзину/аккаунт справа. Но, justify-self результата не дает, а margin-left: auto; просто не позволяет поставить поиск. строку ...
1 голос
2 ответа
3k показов

CSS: Высота блока, зависящая от ширины

Описанное реализовано тут: https://codepen.io/Coder10000000000/pen/MWvjOpR Есть два блока - левый и правый. У левого фиксированная ширина в пикселях. У правого - всё оставшееся пространство. При этом ...
0 голосов
1 ответ
65 показов

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

Подскажите, пожалуйста, как правильно сверстать flex элементы в 2 колонны при разрешение 250px & 991px. Вот как это должно выглядеть на мобильном устройстве: Мой неудачный код: .item { ...
0 голосов
0 ответов
90 показов

Overflow не работает без указания высоты

Имеется выезжающий блок с уведомлениями. Красными выделены уведомления. Сейчас высота всего блока 100% и при уменьшении экрана\увеличении количества уведомлений появляется скролл. Появилась ...
0 голосов
2 ответа
56 показов

как распределить div с помощью флекс

всем привет есть такой макет. как с помощью флексов задать такое распределение? или какой метод посоветуете? .start { padding: 72px 0; } .start__cards { display: flex; } ....
0 голосов
3 ответа
8k показов

Растягивание элементов flex контейнера на всю ширину, используя justify-content: left

У меня есть flex контейнер Courses. Мне необходимо, чтобы элементы растягивались на всю ширину контейнера и при переходе на новую строку начинались слева. Пробовал justify-content: space-between, но ...
2 голоса
1 ответ
39 показов

Как создать адаптивную вложенную строку SVG относительно других элементов?

У меня есть вложенный SVG с 3 элементами. 2 треугольника, расположенных справа и слева, и одна линия посередине. Я хотел бы получить отзывчивую линию (линия должна иметь ширину только между ...
0 голосов
1 ответ
50 показов

Растянуть правый список до размера левого

.p-layout { display: flex; flex-direction: column; } .p-content { display: flex; flex-...
0 голосов
0 ответов
177 показов

Во flexbox flex-direction:column при переносе элемента в новый столбец ширина контейнера не увеличивается

В подвале есть несколько меню, каждое flexbox flex-direction:column, высота подвала ограничена, если количество итемов больше чем высота меню они должны переноситься на следующий столбец, ...
3 голоса
1 ответ
73 показа

Сложный пропорциональный трехэлементный дизайн индикатора выполнения с использованием только CSS

Я сделал настраиваемый индикатор прогресса, состоящий из трех отдельных частей (однозначно настраиваемая центральная часть, левая часть и правая часть), но мне трудно правильно выровнять центральный ...
3 голоса
1 ответ
157 показов

Как расширять дочерние элементы flex до полной ширины при наведении курсора

В приведенном ниже примере можно ли расширить дочерние элементы flex на всю ширину при наведении курсора только с помощью css, или я должен сделать это с помощью javascript? Примечание. В этом ...
0 голосов
2 ответа
562 показа

Css. Flex(grid) Ширина блоков, в зависимости от контента в независимых блоках

Нужно сделать так, чтобы в первом блоке ширина контента всех трёх первых параграфов была одинаковая, но бралась в зависимости от максимальной ширины самого большего параграфа. Проблема в том, что они ...
0 голосов
0 ответов
25 показов

Наполнение флексовых блоков текстом

Есть флексовая строка шапки сайта Как видно из рисунка телефон, адрес и график работы, оплата и доставка занимают лишь часть объемлющих блоков, выделенных сиреневым пунктиром. Как добиться наполнения ...
0 голосов
1 ответ
1k показов

Не работает justify-content: space-between

есть блок отзыва с фиксированными размерами, нужно чтобы между кнопкой-ссылкой "Подробнее" и текстом было свободное пространство. Я задал элементам флекс-раскладку, направление оси column и ...
0 голосов
1 ответ
33 показа

Как правильно сверстать макет блока на flexbox?

Есть готовый блок, сверстал по макету. Однако я хочу перенести на flexbox, что бы проще было адаптировать. Как это сделать и можно ли не использовать отрицательный margin? Код и изображение ...
0 голосов
1 ответ
95 показов

Неадекватное поведение display: flex

Подскажите, в чем проблема? Каким образом контейнер skills начинает накладываться на предыдущий контейнер team, если выставить второму display flex? При любом другом значении display все нормально, ...
0 голосов
1 ответ
40 показов

Как позиционировать элементы на flex по такому шаблону? [закрыт]

Подскажите, как на flex позиционировать элементы по такому шаблону без дополнительных оберток?
0 голосов
1 ответ
1k показов

При уменьшении экрана контейнер прижимается к левому краю

При обычном экране блоки по центру с равным расстоянием, но при уменьшении жмутся к левому краю #works{ position: absolute; width: 100%; height: 700px; background-color: #fbfaf8; ...
0 голосов
2 ответа
1k показов

Поменять местами блоки flex

Подскажите пожалуйста, как я могу поменять местами синий и зеленый блок. #flex { width: 100%; display: flex; flex-wrap: wrap; } #flex #center { width: 100%; height: 100px; background: ...
0 голосов
2 ответа
75 показов

Не сворачивается форма при уменьшении размеров экрана

Форма HTML <Form action="enternames.php"> <div class="container"> <div class="fields"> <label> <span> Имя героя </span>...
0 голосов
1 ответ
395 показов

Перенос блоков разной высоты на CSS

кто знает, как сделать, чтобы блоки 5,6,7 (из примера №1) переносились выше, к блокам 1,2,3, как в примере №2. Но чтобы без использования двойных колонок-контейнеров. Как это реализовать на флексах и, ...
0 голосов
1 ответ
541 показ

Блок на всю ширину страницы с использованием Flexbox

Хочу узнать как грамотно растянуть блок main на всю высоту экрана. Структура очень простая. Но непонятно, правильно я реализовала все. Нашла решение с помощью флексов, код ниже. Нужно ли что-то ...
-1 голос
1 ответ
70 показов

Как сделать не ровную сетку через flex box?

Имеется 8 блоков, которые должны располагаться как на скрине: У меня получилось вот так: Как это правильно сделать желательно через flex box если это возможно?
0 голосов
1 ответ
52 показа

картинка помещающаяся во флексбокс

Можно ли добиться того же результата не применяя вложенный flex? html, body { margin: 0; padding: 0; height: 100%; width: 100%; } body { /* test */ border: 3px solid orange; box-...
0 голосов
1 ответ
315 показов

Как адаптировать ширину и высоту флексбокса под содержимое

Задача: максимально растянуть картинку, под которой расположены кнопки, при этом не должно оставаться пустых областей в родительских блоках (подразумевается что это модальное окно которое закрывается ...
0 голосов
2 ответа
115 показов

Нижняя граница поля ввода под лупой

Есть следующие элементы интерфейса - поле ввода и лупа. Как видно из скриншота нижняя граница поля ввода расположена под лупой. При этом при вводе текста в поле ввода текст не налезает на лупу, а ...
0 голосов
1 ответ
335 показов

Перестает работать свойство flex-grow по ширине для контейнера после выравнивания родительского блока

элементы с классом .block должны занимать по ширине все свободное пространство. И это работает пока я не выравниваю родительский .container по центру свойством margin: 0 auto; @import "normalize....
1 голос
1 ответ
82 показа

Как стилизовать контент(блоки) один за другим?

Подскажите как стилизовать контент, чтобы боксы шли один за другим /* Container holding the image and the text */ .container { position: relative; text-align: center; color: white; } /* ...
0 голосов
1 ответ
158 показов

Разместить 3 дива. 2 слева вместе, а 3й справа один большой [Решено]

Всем привет! На просторах интернета нашел решение как разместить 3 дива нужным мне образом. Но у меня появилась проблема, что если я хочу добавить еще один блок, то он выходит за рамки сетки из-за ...