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

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

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

Почему не работает order в flex в @media?

$("main").addClass("clear"); * { margin: 0; padding: 0; } .clear { display: block; clear: both; } .clear:after { content: ""; display: block; clear: both; } html, ...
user avatar
3 голоса
2 ответа
2k показов

Почему flex: 1 1 auto не работает с flex-direction: column? [закрыт]

Как только я меняю с row на column flex не применяется
Никита Савельев's user avatar
2 голоса
2 ответа
1k показов

Как сделать одну большую картинку, а справа от неё два ряда маленьких

Пытаюсь флексами расположить картинки таким образом: но ничего не выходит подскажите, как это осуществить?
Arestch's user avatar
  • 139
2 голоса
2 ответа
89 показов

Как так сверстать?

Есть такой макет: На этом макете видим, что есть блок с новостями, и в этом блоке - карточки новостей. Но, если пригледеться, видно, что расположение этих карточек нарушает строки и карточка второй ...
midnightelf18's user avatar
2 голоса
2 ответа
79 показов

Можно ли как то 3 блока оставить flex-start, а один сделать flex-end?

.box { width: 31px; height: 33px; background: red; margin: 1px; } .prostokat { display: flex; align-items: flex-start; width:500px; height: 1000px; } ...
Sinevik's user avatar
  • 569
2 голоса
2 ответа
176 показов

Верстка адаптивных блоков

Необходимо разместить три блока таким образом, как на картинке с помощью flexbox <div class="ask_us"> <div class="items"> <div class="item vk"> ...
Mr.Blonde's user avatar
  • 652
2 голоса
3 ответа
747 показов

Позиционирование flexbox

День добрый! Есть такая html конструкция <div class="special"> <div class="special__block-left"> <a href="#"><img src="img/left.jpg" alt="left"></a> </...
Merkelst's user avatar
  • 193
2 голоса
2 ответа
74 показа

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

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

Разместить li друг под другом вне зависимости от их высоты

Имею следующий код: * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } ol, ul { list-style: none; } nav { position: ...
Дмитрий's user avatar
2 голоса
2 ответа
3k показов

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

Есть flex-контейнер, внутри 2 элемента расположенные по центру и вертикально с фиксированной шириной. Вопрос: как заставить их ужиматься под ширину родителя при уменьшении его ширины. ....
Evgeniy K's user avatar
2 голоса
3 ответа
2k показов

Flex: 3 элемента 1 по центру остальные по краям

Пытаюсь сделать верстку на флексах, есть три контейнера разной ширины. Два должны быть по краям и один по центру. Пока-что поулчается только сделать крайние контейнеры фиксированной ширины и ...
Andrei Karushev's user avatar
2 голоса
2 ответа
39k показов

Как сделать 2 колонки на Flexbox

Как при помощи флекс-технологии построить 2 колонки одинаковой ширины? При этом элементы внутри колонок не должны переносится на следующую строку. .block__section { display: flex; justify-...
Катя Пуховская's user avatar
2 голоса
1 ответ
51 показ

в flexbox контейнере образуется не ясный отступ

В коде codepen под изображением образуется отступ 4px. Можно решить добавив картинке display: block; или родителю картинки margin: -4px; .reason-one { display: -webkit-box; display: -ms-...
Вячеслав's user avatar
2 голоса
3 ответа
101 показ

Flexbox вёрстка. Margin

1) Пытаюсь сверстать navbar на flexbox, на float-ах было бы проще сделать то, что я хочу, но стараюсь всё делать именно на flexbox. Так вот, вопрос: можно ли как-то переместить отдельный элемент в ...
Andrew Yaremchuk's user avatar
2 голоса
2 ответа
2k показов

align-content: space-between не работает, flex

Не могу понять, что не так? Хочу, чтобы "b" прижимался к низу, а "a" оставался наверху. Подскажите .flex { display: flex; flex-direction: column; align-content: space-between; ...
Igor's user avatar
  • 1,211
2 голоса
3 ответа
245 показов

Реализация верстки на флексбоксах

Имеется 3 блока sidebar, navbar и main. Как без дополнительных оберток реализовать то что на картинке? .sidebar .navbar .main Пояснение из комментариев Под обертками я понимаю лишние классы (....
HelpaMnePlz's user avatar
2 голоса
2 ответа
48 показов

помогите получить правильно css код для этого фона

Прошу подсказать или исправить как правильно сделать фон с картинки и самое важное сделать его адаптивным я в своём коде использую clip-path: polygon(6% 0, 94% 0, 100% 25%, 100% 75%, 94% 100%, 6% ...
digitalboot's user avatar
2 голоса
2 ответа
112 показов

Как сверстать такое на флексах

Нужно что бы меню и языки прижимались к правому краю на больших экранах с этим все в порядке. А вот при уменьшении окна, блок с языками всегда своего размера, а меню обрезалось при переполнении. Такое ...
Андрей's user avatar
2 голоса
2 ответа
317 показов

Что задать двум блокам, чтобы они были равны 50% высоты

Я задал двум правым элементам flex: 1, что нужно указать, чтобы высота этих двух блоков всегда была равна 50%? Т.е., чтобы высота каждого блока была 50% от высоты родительского контейнера, а другой ...
Михаил Камахин's user avatar
2 голоса
2 ответа
10k показов

Почему не работает justify-self?

Как последнюю строку с классом .bottom переместить вниз контейнера? Выставляю justify-self: flex-end; Но ничего не происходит. Строка по прежнему прижата к верху(flex-start). https://jsfiddle....
manking's user avatar
  • 6,393
2 голоса
1 ответ
1k показов

Проблема использования FlexBox и Media Queries

body { margin: 0; padding: 0; font-family: Verdana, sans-serif; background-color: #eee; color: #101010; min-width: 480px; } .menu { text-align: center; display: flex; ...
smily_prg's user avatar
  • 303
2 голоса
2 ответа
983 показа

Одинаковые отступы со всех сторон. Flexbox layout

Есть гибкий блок с тремя вложенными блоками. div{ height: 20px; } .container{ display: flex; justify-content: space-around; background: gray; } .d1 {background: red;} .d2 {...
user200141's user avatar
  • 1,037
2 голоса
2 ответа
6k показов

Адаптивная сетка на flex

Здравствуйте! Как сделать адаптивную сетку такого плана? Не прибегая к фреймворкам Пробовал большой блок на float - не то, что нужно Возможно ли на флексах это реализовать? Что бы было адаптивно. ...
Atomrr's user avatar
  • 357
2 голоса
1 ответ
39 показов

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

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

Высота изображения внутри flex по размеру контейнера

Есть блок-обертка wrap, который может быть разной высоты. Внутри него есть три блока - top, middle и bottom. Высота блоков middle и bottom может быть разная, а блок top занимает оставшееся ...
Dima's user avatar
  • 39
2 голоса
1 ответ
169 показов

Flex-box как игнорироваться родительский justify-content?

Здесь flex контейнер центрирует все свои элементы по центру, но скажите пожалуйста, как "2" заставить расположиться в левом краю страницы (контейнер на всю ширину, но элемент в левом краю)? ...
Даниил Устименко's user avatar
2 голоса
1 ответ
93 показа

Почему получается segmentation fault у программы на yacc?

Я пытаюсь запустить пример(4.3. Обрабатываем конфигурационный файл) из этого HOW-TO. Это код, который подан вход как язык L1: zone "." { type hint; file "/etc/bind/db.root"; }; Это ...
Elvin's user avatar
  • 1,802
2 голоса
1 ответ
50 показов

Не выходит выстроить объекты

Я новичок в вебе, возникла такая проблема. Нужно чтобы картинка была справа, а все остальные элементы слева. Чтобы все было на одном уровне по вертикали, но выходит только так помогите пожалуйста ...
Ram Ce's user avatar
  • 304
2 голоса
2 ответа
130 показов

Предотврощение переноса текста. flexbox

Хочу сделать width hr элемента, равную 100% свободного места. Но чтобы название было в одну строчку, без переноса, как на фото. И линия должна быть адаптивной при изменении длины текста .parent-...
dencha's user avatar
  • 35
2 голоса
2 ответа
155 показов

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

Есть блок с flexbox, внутри есть блоки items. Я хочу сделать сетку для расположения блоков. Когда все блоки одинаковой ширины, то проблемы нет. Но у меня блоки 2 видов, поэтому иногда двойной блок ...
Александр Пахомов's user avatar
2 голоса
5 ответов
83 показа

Как построить сетку с одним большим элементом?

Подскажите, как реализовать такую сетку? Использую Flexbox без всяких дополнительных обёрток. Или лучше использовать Float?
Mike's user avatar
  • 21
2 голоса
2 ответа
35 показов

Влияние контена элемента на flex-grow

Как сделать, чтобы при такой верстке, контент (во втором примере) не влиял на ширину элементов и при этом сохранялась "резиновость" .one, .two{ display: flex; } .one__item{ flex-grow: 10; ...
Dmytro's user avatar
  • 6,756
2 голоса
2 ответа
753 показа

Равномерное распределение ширины колонок

У меня есть листинг производителей, и мне необходимо, чтобы отсчет был не слева направо, а сверху вниз, и высота у родительского блока была фиксирована. <div class="col-12 car-list2-col"> ...
Анатолий's user avatar
2 голоса
2 ответа
665 показов

css: взаимное расположение блоков

есть код: <div class = 'content'> <div class = 'block1'></div> <div class = 'block2'></div> <div class = 'block3'></div> </div> block1 ...
Zhihar's user avatar
  • 37.5k
2 голоса
1 ответ
64 показа

Почему флекс себя так ведет?

$lato : 'Lato' $pt : 'PT' $text_color : rgb( 10, 13, 16 ) $text_white_color : #f1f0f0 $red_color : #c61b2b $black_color : #0a0d10 /**/ $xs: 0px $sm: 575px $md: 767px $lg: 991px $xl: ...
uzi_no_uzi's user avatar
  • 2,186
2 голоса
1 ответ
560 показов

Адаптивная верстка flexbox

Как объединить 2 элемента справа в сетке, используя flexbox? При уменьшении экрана сетка должна становиться такой:
Alex Antipov's user avatar
2 голоса
3 ответа
1k показов

Flexbox + z-index

Есть зелёный бокс-родитель с настройками: display: flex; flex-direction: row; justify-content: center; align-items: stretch; В нём находятся 7 зелёных radio с плавающими/летающими размерами, ...
Kostiantyn Salnykov's user avatar
2 голоса
1 ответ
2k показов

Flexbox: выравнивание одного элемента на главной оси по краю контейнера

Как во флексбоксах оторвать один крайний элемент от группы элементов, выровненных justify-content-ом по центру главной оси, и прилепить к правому или левому краю контейнера? К примеру: .wrapper {...
Black Fire's user avatar
2 голоса
2 ответа
73 показа

img сужается в виджете

Верстаю виджет и возникла проблема, когда уменьшаю окно, рисунок виджета уменьшается, дело все в объеме текста, ширина img фиксированна, сделан блок на флексах. .widget{ position: relative; ...
Александр Алексеев's user avatar
2 голоса
1 ответ
365 показов

Не нужный перенос элемента флекс-контейнера в IE 11

Имеется флекс-контейнер. И прекрасно отображается в браузерах, кроме IE 11. Там почему-то последний элемент он выносит на следующую строку. Как с этим справится? Пробовала задавать значения flex ...
Alla's user avatar
  • 541
2 голоса
2 ответа
210 показов

Как правильно растянуть средний элемент? (flex)

Какие параметры и куда нужно вписать, чтобы блок "contant" не превышал высоты блока "wrapper", и идеально вписывался по высоте между "header" и "footer", и на ...
Владимир Кузнецов's user avatar
2 голоса
2 ответа
43 показа

Можно ли flex-блокам задать высотку самого невысокого элемента

Допустим есть 4 блока и в каждом по картинке: в первых 3 маленькой высоты и в 4 побольше. Можно ли задать блокам высоту, равную минимальной среди них? Т.е. чтобы последняя картинка уменьшилась до ...
Danny's user avatar
  • 27
2 голоса
2 ответа
3k показов

Почему Flex-контейнер не растягивается автоматически на всю свободную ширину?

На форумах и в статьях я читал, что разница между flex и inline-flex контейнерами такая же как и между block и inline-block контейнерами, то есть в лишь в том, что block растягивается на всю ...
JustLearn's user avatar
  • 672
2 голоса
2 ответа
3k показов

Верстка горизонтального меню на CSS flex

Делаю горизонтальное меню на css. Нужно добиться эффекта, чтобы пункты меню (элементы li в которых a-ссылки) занимали всё место в блоке меню по горизонтали. Иными словами чтоб когда наводишь мышкой, ...
Ivan Zhukov's user avatar
2 голоса
2 ответа
2k показов

выровнять блоки по высоте flex

Как выровнять 1,3 и 2,4 блоки по высоте, при том что они лежат в разных контейнерах и текста в них может быть разное количество? .wrap{ display: flex; background-color: #000; padding: 5px; } ...
Karalahti's user avatar
  • 1,352
2 голоса
3 ответа
127 показов

Позиционирование элементов с помощью flexbox html/css

Пытаюсь разобраться со свойством flexbox. У меня постоянно проблема в размерах: 1ый блок идет нормально, а остальные как-то кривовато; я хочу, чтобы второй и третий блок были в столбик и по всей ...
O.Yudin's user avatar
  • 322
2 голоса
1 ответ
803 показа

Grid или Flex? Кто лучше?

Пользуюсь активно flex, все задачи с ним решаю при верстке. Но много кто говорит, что grid это наше будущее. Так ли он хорош, и что лучше использовать?
bla bla213213213's user avatar
2 голоса
1 ответ
50 показов

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

Можно ли сделать так, чтобы логотип появлялся также как и пропадает? Либо второй вариант чтобы он плавно переезжал налево и после него шли пункты меню и точно также плавно возвращался. Можно ли ...
Кирилл's user avatar
2 голоса
1 ответ
1k показов

Убрать margin при изменении разрешения окна

У двух полей есть margin-right: 20px, медиа-запросом обнуляем свойство margin-right: 0, но отступы остаются как и были. Подозреваю, что это происходит из-за схлопывания отступов выбирается больший ...
Riccu's user avatar
  • 329
2 голоса
1 ответ
1k показов

Как сделать так, чтобы дочерние элементы flex-box были друг на друге?

Делаю слайдер. Хочу сделать так, как сказано в заголовке. Это нужно, чтобы управлять слайдером только через opacity. Основная проблема в том, что, если дочерним элементам поставить position: absolute, ...
Dmytro's user avatar
  • 6,756