Вопросы с меткой [flexbox]
Flexbox (Flexible Box Layout Module) - более эффективный способ вёрстки, выравнивания и распределения свободного места между элементами в контейнере, даже когда их размер неизвестен и/или динамический (отсюда слово «гибкий»).
647
вопросов
0
голосов
1ответ
24 показа
Как присвоить высоту одного элемента к другим элементам на чистом JS?
Как мне через vanilla js получить высоту самого высокого элемента слайдера и присвоить его к остальным, чтобы по итогу была одна высота для всех?
На сайте использовался swiper-слайдер, при добавлении ...
0
голосов
1ответ
13 показов
Не получается разместить блок в нужную позицию CSS , flex/
Ребята помогите! Проблема вот в чем:
не получается правую колонку разместить потому как .blockleft занимает все пространство хотя я маржу убрал.
Подскажите в чем моя ошибка?
@font-face {
font-...
0
голосов
1ответ
10 показов
Почему возникает разрыв в блоках flexbox?
В примере внизу возникает разрыв ввиде черного цвета, назначенного тегу HTML. При этом контейнеру flexbox Body был назначен белый цвет и фон в этом месте должен быть белым. Почему возникает этот ...
0
голосов
2ответа
16 показов
Как перенести Flex на новую строку?
Ребят подскажите как перенести Flex Что бы начинался с новой строки?
Как правильно будет это сделать?введите сюда код
@font-face {
font-family: Geometria;
src: url(../fonts/geometria.ttf) ...
1
голос
1ответ
29 показов
Проблема со стилями css и flex-box
Пробую верстать небольшой лендинг, подключил файл css все работало норм.дошло дело до flexов
я создал контейнер с содержимым. и прописываю в css для него display:flex; не чего не происходит.
захожу в ...
0
голосов
0ответов
24 показа
Расположение блоков css flexbox
Здравствуйте подскажите как сделать такую верстку элементов на flexbox
1
голос
1ответ
45 показов
Сдвинуть элементы от кнопки в углу
Как сделать так, чтобы выделенная красным кнопка всегда была в углу, а остальные элементы при масштабировании передвигались по блоку, "игнорируя" место, над которым находится выделенная ...
0
голосов
1ответ
25 показов
Flexbox: растянуть/сжать div с картинками на высоту экрана
Имеется набор картинок, заключенный в div-блок:
<div class="container">
<img src=""...">
<img src=""...">
<img src=""....
0
голосов
1ответ
38 показов
Как с помощью flexbox разместить блоки?
Скажите, пожалуйста, в чем моя ошибка? Пытаюсь на прямой линии разместить текст и картинку таким образом, чтобы картинка была полностью прижата к правой стороне (без отступов), а текст находится между ...
0
голосов
2ответа
21 показ
flexbox Выравнивание текста
Как выровнять ссылку по центру flex-элемента?
Родитель ссылки:
.footer {
display: flex;
justify-content: space-between;
padding-bottom: 30px; }
Стилизация ссылки:
.paragraph-link {
text-decoration: ...
2
голоса
2ответа
55 показов
Как так сверстать?
Есть такой макет:
На этом макете видим, что есть блок с новостями, и в этом блоке - карточки новостей. Но, если пригледеться, видно, что расположение этих карточек нарушает строки и карточка второй ...
0
голосов
0ответов
16 показов
Как сделать flex container, что бы в нём высота всех дочерних элементов не приравнивалась друг к другу?
Хочу сделать 2 колонки со списками. Каждая по 50% от родителя. Внутри будут элементы li, ни будут разной длины по словам, соответственно, будут переноситься вниз.
Как сделать так, что бы соседний li ...
1
голос
1ответ
37 показов
Css Flexbox. Не могу выровнять группу элементов
Пытаюсь выровнять на флексбоксах элементы, они должны идти сверху вниз, слева направо. Но когда меняется ось флексбоксов на column, то justify-content влияет на всю группу элементов, и получаеться ...
0
голосов
1ответ
19 показов
Нужно установить div = ширине контента, используя flex
возникла проблема, div занимает всю ширину ( 6 класс ) предоставленную родительским div, а мне нужна ширина по контенту
.wrapper1 {
display: flex;
flex-direction: column;
min-width: 300px;
}
...
0
голосов
0ответов
26 показов
Как сделать список с подсписком неизвестного кол. элементов в 2 столбца - Решено
Есть список элементов с подсписком. Из-за разного количества элементов подсписка высота элементов списка разная. Нужно сделать в 2 столбца, чтобы прокручивать вниз до конца.
Если делаю на флексах в ...
0
голосов
0ответов
15 показов
Выравнивание карточек по вертикали bootstrap 4
немогу разобраться с ситуацией: как реализовать одинаковые по высоте карточки, а именно зависимость высоты карточки от объема контента внутри любой карточки. Возможно описал не достаточно понятно - ...
0
голосов
0ответов
23 показа
Почему флекс-элементы не отображаются в ряд?
Чем это может быть обусловлено?
Как отобразить флекс-элементы в ряд?
.container {
max-width: 1180px;
margin: 0px auto;
}
.columns {
background-color: #f5f5f5;
padding: 50px 0 20px 0;
}
....
0
голосов
1ответ
26 показов
css: вывод слов в несколько столбцов
подскажите можно ли лишь с одного css сделать следующее:
есть много записей вида
<div>текст</div>
требуется вывести их в несколько столбцов, причем
записи располагаются так, чтобы занять ...
0
голосов
2ответа
23 показа
Flexbox не понимаю почему блок выстраивается за дрругим блоком , а не нже
Даю диву с айди overiew display:flex; после чего все элементы этого дива выстраиваются за дивом main, а не ниже. почему так происходит?
p.s первый раз задаю вопрос. если задал его не правильно укажи ...
1
голос
2ответа
59 показов
Как правильно реализовать список?
Не могу понять как правильно сделать такой список. Должно быть максимум 3 колонки и расположение элементов сверху вниз, а потом слева направо. Если делаю через css grid, колонок всегда 3, но ...
0
голосов
2ответа
36 показов
Растянуть блоки по ширине Flexbox
Есть ряд блоков, которые должны размещаться по всей ширине родителя по очереди.
Но если этих блоков будет 5шт, то пятый блок будет прижиматься к правой стене(по примеру который добавил ниже).
....
0
голосов
0ответов
28 показов
Прокрутка для KendoGrid при flexbox вёрстке
Есть виджет от Кендо, но вопрос больше про вёрстку: мне надо сделать так, чтобы KendoGrid или KendoTreeList заняли бы всю область дива, в котором они расположены, но не больше экрана и была бы именно ...
0
голосов
1ответ
24 показа
Flex элемент центрируется со смещением при position: absolute или fixed
Блок green выравнивается посередине при помощи Flеxbox. Всё бы хорошо, но почему-то он имеет смещение вниз, равное высоте блока line, хотят последний не располагается внутри Flеxbox'а и никак с ним не ...
0
голосов
0ответов
16 показов
Как задать ширину для блока, чтобы дочерние элименты распологались в два ряда
Пример
Код:
.solutions {
display: flex;
justify-content: space-between;
}
.solutions-blocks {
}
.solutions-blocks__items {
}
<div class="solutions wrapper">
<div ...
0
голосов
1ответ
29 показов
Не могу выровнять элемент. Как исправить?
Пытаюсь сделать иконку для гамбургер-меню и выровнять ее с помощью флексов. Но не выходит: иконка уходит куда-то вправо, появляется непонятный отступ сверху.
Вот код:
* {
margin: 0;
padding: 0;...
1
голос
0ответов
76 показов
Адаптивная таблица с HTML-тегами в ячейках
1. Желаемое поведение
Положим, имеется такая таблица:
Хотелось бы, чтобы на устройствах с небольшой шириной экрана она выглядела следующим образом:
То есть слева — thead, справа — tbody.
я не знаю, ...
0
голосов
2ответа
52 показа
Как flexbox версткой расположить текст справа от картинки
как должно быть в идеале
https://i.stack.imgur.com/a60GP.jpg
как у меня
https://i.stack.imgur.com/ME43m.jpg
1
голос
1ответ
45 показов
Как расположить flex элементы в две строки?
Как расположить flex элементы в 2 строки, чтобы получилось вот так:
Использую свойство flex-wrap, но что-то не получается - последние элементы не прижимаются к экрану и остаётся отступ:
* {
...
4
голоса
1ответ
59 показов
Как и относительно чего считаются отступы, которые возникают при использовании flex-wrap: wrap?
Вот что я имею в виду:
Вот мой код:
* {
margin: 0;
padding: 0;
}
.wrapper-block {
display: flex;
flex-wrap: wrap;
align-items: center;
border: 3px solid black;
height: 500px;
}
....
0
голосов
2ответа
40 показов
Как расположить элементы по бокам header (как на макете)
Задача: расположить эти блоки (адрес и номер телефона) по бокам header'а за краями ограничителя, как показано в макете.
Кроме того, нужно сделать их адаптивными, чтобы они скрывались на маленьких ...
0
голосов
1ответ
27 показов
Почему текст блока с абсолютным позиционированием внутри flex контейнера не растягивается на всю ширину?
Есть flex контейнер в котором блок div с текстом и абсолютным позиционированием.
Не могу понять почему текст в блочном элементе не растягивается на всю ширину, а занимает 2 строки..
Если убираю ...
0
голосов
1ответ
45 показов
Масштабирование заголовка вместе с картинкой
Не могу понять как прикрепить заголовок title к картинке img , чтобы заголовок масштабировался вместе с картинкой.
*{
padding: 0;
margin: 0;
border: 0;
}
*,*:before,*:after{
-moz-...
0
голосов
2ответа
13 показов
Как поставить блоки горизонтально друг под другом
.test_wrapper {
display: flex;
justify-content: space-around;
min-height: 800px;
background-color: rgba(255, 0, 0, 0.349);
}
.test_item {
margin: 20px;
width: 150px;
height: 150px;
...
0
голосов
0ответов
22 показа
интересное выравнивание flex
привет,как сделать такую штуку флексом? я новичок в фронте поетому наверное и не могу понять
как это сделать.
я пробовал многими способами,но не получалось(
вот мой код вроде 'типо работает' но я не ...
0
голосов
0ответов
13 показов
Не работает display: flex [дубликат]
.top__inner {
display: flex;
}
Не работает данная команда для
<section class="top"
<div class="container"
<div class="top__inner">
Помогите разобраться ...
2
голоса
2ответа
145 показов
Разместить 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: ...
0
голосов
1ответ
46 показов
Помогите сделать задание с помощью flex [закрыт]
всего должно быть три колонки одинаковой ширины при
любой ширине браузера;
при изменении ширины браузера ширина колонок тоже
должна изменяться.
0
голосов
1ответ
21 показ
Начал изучать вёрстку. Не могу понять почему не применяются свойства justify-content и align-items к заголовку и навигации
*{
padding: 0;
margin: 0;
border: 0;
}
*,*:before,*:after{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:focus,:active{outline: none;}
...
0
голосов
1ответ
37 показов
Почему не происходит сжатие flex-элементов?
Вот код:
* {
margin: 0;
padding: 0;
}
.parent {
display: flex;
flex-direction: column;
align-items: center;
}
.second_group_block, .first_group_block {
display: flex;
}
....
0
голосов
1ответ
21 показ
(CSS) Как сделать сетку из строки с тремя элементами?
Я только начинаю изучать секреты flexbox, но не выходит сделать отзывчивую вёрстку блока, в котором есть заголовок, текст и кнопка. Искал информацию, пробовал что можно, но всё ещё остался один и тот ...
1
голос
0ответов
26 показов
Как выровнять текст в одном контейнере в сравнению с другими?
Как разместить указанный текст во флекс контейнере так, чтобы он выстраивался ровно по сравнению с другими контейнерами в зависимости от размера заголовка?
<div class="why__wrapper">
...
1
голос
1ответ
20 показов
Не получается растянуть по высоте флекс-элемент внутри контейнера
В данном коде есть чёрная рамка, внутри которой светло-зелёная рамка, внутри которой 2 флекс-элемента. Первый в виде текста стоит там где надо, а второй расположен по центру по горизонтали, а должен ...
0
голосов
1ответ
18 показов
как в css сделать данное задание при использовании свойства display flex Не получается разделить блоки между картинкой сверху и снизу
***
<style>
h2 {
text-align: center;
}
h4 {
text-align: center;
}
p {
text-align: center;
font-...
0
голосов
0ответов
20 показов
Как максимально правильно и гибко разместить flex элементы?
Помогите правильно и гибко разместить флекс элементы. Нужно разместить два нижних блока посредине. Но для родительского контейнера прописано justify-content: space-between;, как это можно реализовать?
...
1
голос
1ответ
52 показа
Адаптация трехколоночного макета на flexbox
Прошу помочь разобраться а адаптацией стандартного трехколоночного макета с основным блоком в центре и двумя сайдбарами по бокам: https://jsfiddle.net/jkps6ugq/, размеры блоков фиксированные.
...
0
голосов
1ответ
30 показов
Почему space-between прижимает к центру?
Я решил сделать шапку сайту, но свойство justify-content:space-between, судя по некоторым источникам, должен прижать элементы к краям, но у меня всё с точностью наоборот - все элементы прижались к ...
0
голосов
0ответов
28 показов
Не выходит отзывчивая верстка
Размер psd макета 1920px, при уменьшении размера экрана к моему (1600px) кнопка ломается.
html
<!-- HEADER -->
<header class="header">
<!-- LOGO -->
<div class=&...
0
голосов
1ответ
23 показа
Как сделать так, чтобы при адаптиве блок вытеснялся?
Подскажите, как можно реализовать эти два блока так, чтобы при уменьшении размера экрана картинка слева уезжала за края, а не теснила блок c текстом. 1 пример - макет.
<div class="content-...
0
голосов
0ответов
17 показов
Как сделать так, чтобы текст обтекал flex элемент и занимал пустое пространство под ним?
как сделать так, чтобы текст обтекал блок .spec и чтобы текст занимал пустое пространство под ним?
html, body {
font-size:16px;
font-family: 'Montserrat', sans-serif;
font-weight: 300;
...
0
голосов
1ответ
22 показа
Не могу выровнять элементы (flexbox) [дубликат]
Ссылка на картинки
Нужно позиционировать картинки как в макете:
Макет + фото на всякий случай как должно быть: как должно быть и как у меня выходит: как выходит
.content {
display: flex;
...