Вопросы с меткой [flexbox]
Flexbox (Flexible Box Layout Module) - более эффективный способ вёрстки, выравнивания и распределения свободного места между элементами в контейнере, даже когда их размер неизвестен и/или динамический (отсюда слово «гибкий»).
772
вопроса
1
голос
2
ответа
37
показов
Как правильно растянуть средний элемент? (flex)
Какие параметры и куда нужно вписать, чтобы блок "contant" не превышал высоты блока "wrapper", и идеально вписывался по высоте между "header" и "footer", и на ...
2
голоса
1
ответ
19
показов
Как сделать так, чтобы логотип был по центру, но количество букв по краям логотипа разное (из-за этого логотип немного не по центру)
// css - код
.logo-icon {
background-image: url('../images/logo_03.png');
display: inline-block;
width: 53px;
height: 61px;
}
//html-код
<div class="container">
&...
0
голосов
1
ответ
33
показа
Ширину блока по размеру содержимого (блок скролится)
Красный блок ограничен. Мне нужно, чтобы он растягивался от содержимого независимо от того, что он скролящийся.
В примере я бы хотел, чтобы зеленые блоки не вылазили за красный. Нужно, чтобы красный ...
0
голосов
0
ответов
39
показов
Плохо работает флекс wrap
Столкнулся с проблемой , когда добавил flex-wrap: wrap. Теперь из-за этого , мои элементы не уходят друг под друга когда я уменьшаю размер страницы , а просто стоят в непонятном положение , как ...
0
голосов
0
ответов
18
показов
Можно ли растянуть кнопку на всю высоту блока?
У меня есть кастомный блок с кнопкой слева и другим содержимым . Когда я добавляю более двух айтемов, кнопка не растягивается по высоте (подробности можно увидеть в коде и песочнице)
<Button ...
0
голосов
0
ответов
21
показ
justify-content: space-between не работает, если текст не помещается в одну строку
justify-content: space-between не работает, если текст не помещается в одну строку
Подскажите, пожалуйста, как можно решить данную проблему?
1
голос
2
ответа
31
показ
Flexbox, из четырех блоков вряд опустить третий блок под второй
Сейчас есть четыре div стоящих в ряд, сверстано через Flexbox. Можно ли не изменяя HTML, именно не отказываясь от Flexbox разместить третий div под вторым (что бы внешне получилось что то типа буквы &...
0
голосов
2
ответа
111
показов
Как можно сверстать подобный блок последовательных пунктов roadmap на HTML и CSS?
Допустим есть вот такой . Как его можно сверстать адаптивно на чистом HTML и CSS? На флексбоксах такое реализуемо или подобное делается по другому?
0
голосов
0
ответов
43
показа
Как правильно сделать выпадающее меню на flexbox?
Есть вот такое выпадающее меню на flexbox-ах.Но оно не работает как нужно. При наведении на пункт с выпадающими подпунктами, происходит дополнение данного flex контейнера и эти подпункты сдвигаются ...
1
голос
1
ответ
22
показа
Как позиционировать большое количество элементов с помощью flexbox не прибегая к position: absolute?
Делаю лэндинг для отработки технологии flexbox. Столкнулся с проблемой: не могу понять, как позиционировать большое количество элементов не прибегая к костылям вроде того, что я изобразил на втором ...
0
голосов
1
ответ
22
показа
Css flex макет header main footer
У меня никак не выходит сверстать такой макет. Нужно, чтобы:
Шапка была всегда вверху
Main занимал максимум свободного пространства, а если что-то не помещается, то появлялся бы скролл
Footer должен ...
0
голосов
1
ответ
25
показов
Как поднять через вверх элементы как на макете ? Через флекс
body {
padding: 100px 75px 101px;
font-family: Arial, sans-serif;
color:#2d2d2d;
font-style: normal;
letter-spacing: normal;
text-align: left;
}
.header {
margin: 12px ...
-1
голос
1
ответ
39
показов
Обрезается модальное окно при нехватке места
Попытаюсь объяснить, что я имею ввиду.
У нас есть блок .modal, он служит затемнением фона, внутри данного блока находится блок .modal__content, в котором может находится что угодно, любой высоты. ...
0
голосов
0
ответов
23
показа
Как разместить текст ровно под картинкой?
body {
margin: 0;
}
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
overflow: hidden;
}
header {
display: flex;
flex-direction: row;
border-...
0
голосов
0
ответов
22
показа
Перенос блока в адаптиве [дубликат]
Верстаю макет с Фигмы Webovio
Наверстал
/* =================================================================== */
.techno-articles {
margin-top: 104px;
}
.techno-articles__container {
}
....
0
голосов
1
ответ
103
показа
Выравнивание логотипа с помощью css. Позиционирование изображения в % или vw
Верстаю макет с Фигмы Webovio
Есть страница
/* Обнуление */
*,
*::before,
*::after {
padding: 0;
margin: 0;
border: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
}
...
1
голос
2
ответа
33
показа
Почему для div с классом flex не удается установить border?
.flex {
display: flex;
flex-direction: row;
justify-content: center;
border: 10px;
border-color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta ...
0
голосов
1
ответ
72
показа
Адаптивная верстка шапки сайта с помощью flexbox [дубликат]
Искал в интернете -Адаптивная верстка шапки сайта. Но везде, где бы не смотрел - приводятся примеры с justify-content: space-between. Подскажите, как сверстать адаптивную шапку с процентными margin-...
0
голосов
0
ответов
24
показа
RN: не помещается текст в Button при Large Text
Есть 2 кнопки в row. При увеличении шрифта, в настройках телефона, уезжает текст на следующую строку. Чтобы не играться с паддингами текста внутри кнопки (все равно на какой-то точке все поедет), ...
0
голосов
2
ответа
21
показ
Несрабатывающий флекс для изображения последнего клиента в адаптиве
Верстаю макет с Фигмы. Наверстал
/* Обнуление */
*,
*::before,
*::after {
padding: 0;
margin: 0;
border: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
}
ul,
ol,
li {
...
3
голоса
2
ответа
162
показа
Неотображаемый текст в шапке сайта. Свойство object-fit и его влияние на отображение. Позиционирование внутри блока
Верстаю макет с Фигмы. Наверстал
/* Обнуление */
*,
*::before,
*::after {
padding: 0;
margin: 0;
border: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
}
ul,
ol,
li {
...
0
голосов
1
ответ
36
показов
Как сверстать макет используя flex? [закрыт]
как расставить блоки используя flex css
0
голосов
0
ответов
26
показов
Меню с помощью flex
Есть меню в шапке сайта. Каждый элемент меню занимает определенную часть в %. При уменьшении размера экрана меню сжимается, при этом элементы меню сохраняют свой размер в %.
Как это реализовать с ...
0
голосов
0
ответов
20
показов
Выстроить по горизонтали иконки с текстом так, чтобы текст их не обтекал
Подскажите пожалуйста, как сделать, чтобы текст в 2-3 строки находился на одном уровне справа от иконки, не обтекая ее. Проблема в том, что в тексте (li) есть еще span, и если задаю тексту flex, то он ...
-2
голоса
1
ответ
64
показа
Объяснение записи flex: 1 1 100%
Что в комплексе означает запись flex: 1 1 100%?
/* Обнуление */
*,
*::before,
*::after {
padding: 0;
margin: 0;
border: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
}...
0
голосов
2
ответа
36
показов
Как текст разместить по середине кнопки?
Помогите разместить текст по середине изображения. Выглядит вот так -
А хочу чтобы выглядело -
.int_btn {
color: black;
border: 0 none;
background: none;
font-size: 20px;
...
0
голосов
1
ответ
47
показов
Как в кнопке выравнить картинку и текст в одну строку?
Не понимаю куда и что писать чтобы картика и кнопка были по одной линии.
Должно выглядить так -
header button {
color: #56ce4d;
padding: 25px 50px;
text-align: left;
font-size: ...
0
голосов
1
ответ
40
показов
Не понимаю как выравнивать контейнеры в одну строку. HTML CSS
Куда только не пытался вставлять команды не выравнивается в одну строку.(По красной линии)
body {
margin: 0;
font-family: 'Raleway', sans-serif;
font-size: 16px;
color: #b6b6b6;
...
0
голосов
1
ответ
30
показов
Как выравнить контейнеры в одну сторку? Html, css
Хочу чтобы контейнеры выравнились ровно по красной линии. Какая это команда в css?
0
голосов
1
ответ
23
показа
Вёрстка социального блока
Имеется макет в Figma. В макете имеется социальный блок с изображениями. Пытался сверстать его на флексах, гридах, но не особо понимаю, как правильнее это сделать. Нужно, чтобы элементы(изображения) ...
0
голосов
0
ответов
36
показов
Не работает flex-wrap wrap
По теории должно складываться в 2 линии, а переносятся только одно слово
.header__container {
display: flex;
align-items: center;
min-height: 115px;
.header__logo {
padding: 23px 20px ...
0
голосов
2
ответа
47
показов
Как задать стили выпадающему блоку, чтобы он не смещал контент под ним, а накладывался на него?
У меня есть горизонтальное меню.
По нажатию на один из элементов в этом меню - открывается новое выпадающее меню, выполненное как flex-блок.
<!-- на этот пункт надо нажать, чтобы открылось меню --&...
1
голос
2
ответа
36
показов
Позиционирование перевернутых блоков
Всем привет. Есть макет:
Реализовывается методом колонок. Левая колонка, средняя, правая колонка. Фиксированная высота блоков. Весь хедер - 160 px. Позиционирование на флексах везде отрегулировано на ...
1
голос
2
ответа
38
показов
Сложности с версткой линий
Есть макет header
body {
margin: 0;
}
hr {
margin-top: 8px;
border: 1px solid #fff;
width: 217%;
}
.container {
background: #070707;
padding: 5px 0 16px 0;
display: flex;
...
3
голоса
0
ответов
526
показов
Отступы между блоками на flex
Есть следующий макет:
Сверстано так:
.block3_header {
display: flex;
align-items: center;
justify-content: center;
margin-top: 87px;
}
.block3_header span {
font-family: 'Gilroy-Bold';...
0
голосов
1
ответ
42
показа
3 колонны на flexbox
Никак не получается сверстать 3 колонны с иконкой, тайтлом и инфой, выручайте
.container {
width: 1240px;
margin: 0 auto;
}
.thrd-screen {
height: 100%;
display: flex;
}
.fast-delivery {
...
0
голосов
1
ответ
44
показа
Как сделать чтобы кноgки были посередине рамки?
Как мне сделать кнопку посередине (высота) в рамке?
.topnav {
background-size: 100%;
overflow: hidden;
}
.frame {
border: 2px solid white;
padding: 10px;
}
.wrap {
height: 100%;
...
0
голосов
3
ответа
72
показа
Не работает justify-content. Все блоки слипаются
Не очень понимаю, почему все слова все равно у меня слипаются, а свойство не работает.
.header__row {
display: flex;
justify-content: space-between;
}
.header__items {
display: flex;
...
0
голосов
0
ответов
33
показа
Не работает align-items: "baseline"
Помогите справиться, не получается выстроить по базовой линии два компонента текст со стилями (attempts и attemptsText), attemptsText выстраивается по базовой линии а attempts нет, так как шрифт имеет ...
0
голосов
1
ответ
26
показов
css свойство order работает неправильно
У меня есть список элементов, родитель которых с display: flex. Я хочу переназначить порядок одного из элементов, например, беру первый и задаю ему order: 1 или order: 2, но он переносится с первой ...
-1
голос
3
ответа
43
показа
Не отображаеться картинка в боксах flex. Нижние боксы налазят на верхние. Путь к картинке указан верно
.moduls-box {
margin: 87px;
box-sizing: border-box;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.heder-01 {
background-image: url("../layers/jpg/block_1.jpg&...
0
голосов
2
ответа
35
показов
Скрытие сайдбара и заполнение его области
Народ, привет. Есть блок сайдбара и блок контента. Через медиа запрос сайдбар скрывается методом убирания его влево, но основной блок контента остается на своем же месте. Подскажите как сделать, чтобы ...
0
голосов
0
ответов
37
показов
Расстояния между flex элементами при justify-content: center
Нашел статьи про flex - https://tproger.ru/translations/how-css-flexbox-works/ и https://developer.mozilla.org/ru/docs/Web/CSS/justify-content. В них сказано, что при атрибуте justify-content: center
...
1
голос
2
ответа
43
показа
Как разместить текст на html так, чтобы он подстроился при изменении разрешения экрана
Проблема, которую я никак не могу решить - что же нужно изменить в моём коде для того, чтобы при изменении разрешения экрана, текст помещался по центру.
Буду очень рад помощи.
Мой код:
ul {
...
0
голосов
2
ответа
29
показов
Как поставить flex-детей в начало, при уменьшении экрана?
Делаю навигационный бар.
На больших экранах все выглядит так, как мне нужно.
Проблема с маленькими экранами.
При уменьшении экрана, flex-дети должны прижаться к левому краю.
Но этого не происходит. ...
0
голосов
0
ответов
25
показов
Где можно увидеть лучшие работы по современной верстке?
Стоит задача хорошо прокачать CSS-Grid в комплекте с FlexBox.
После пройденных курсов по данному направлению появились некоторые вопросы и недопонимание относительно преимуществ данного подхода.
...
0
голосов
1
ответ
19
показов
Ширина Flexbox по ширине flex-элементов
Народ, есть вопрос. Можно ли сделать так, чтобы flex-коробка не растягивалась на всю ширину родительского элемента, а подстраивалась под ширину дочерних? В примере видно, что несмотря на наличие во ...
0
голосов
1
ответ
65
показов
Как сделать одинаковые flex блоки по ширине и сделать между ними отступы , calc (33.33 - 30px) не работает?
Нужно распределить пространство между блоками добавив туда маржу.. как это сделать с помощью функции calc или как то по другому, чтобы в ручную не высчитывать процентное соотношение margin, не ...
0
голосов
1
ответ
17
показов
Элементы 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
ответ
61
показ
Как сделать у flexbox max-height 100% c прокручиванием?
Есть у меня такой вот код
MAIN {
background-color: antiquewhite;
}
.box {
display: flex;
flex-direction: column;
}
.text-block-1 {
background-color: #43e8e5;
}
.text-block-2 {
...