Вопросы с тегом 'flexbox'

Модуль CSS для гибких макетов, предоставляющий широкий спектр опций для выравнивания элементов, исключая при этом необходимость в плавающих элементах и таблицах.
31

Сделайте div, чтобы заполнить высоту оставшегося экрана.

Я работаю над веб-приложением, в котором я хочу, чтобы контент занимал всю высоту экрана. Страница имеет заголовок, который содержит логотип и информацию об учетной записи. Это может быть произвольная высота. Я хочу, чтобы div содержимого заполнил ...
18 сент. '08 в 5:06
38

Лучший способ установить расстояние между элементами flexbox

Чтобы установить минимальное расстояние между элементами flexbox, я использую margin: 0 5px в .item и margin: 0 -5px в контейнере. Для меня это похоже на хак, но я не могу найти лучшего способа сделать это. Пример #box { display: flex; wi...
17 дек. '13 в 5:35
13

Как правильно выровнять элемент flex?

Есть ли более flexbox -ий способ выравнивания по правому краю "Контакт", чем использовать position: absolute? .main { display: flex; } .a, .b, .c { background: #efefef; border: 1px solid #999; } .b { flex: 1; text-align: center; } .c { position:...
15 мар. '14 в 19:56
11

Flexbox: центр по горизонтали и по вертикали

Как центрировать div горизонтально и вертикально внутри контейнера с помощью flexbox. В приведенном ниже примере я хочу, чтобы каждое число находилось ниже друг друга (в строках), которые расположены по горизонтали. .flex-container { padding: ...
26 сент. '13 в 11:22
6

В CSS Flexbox, почему нет свойств "justify-items" и "justify-self"?

Рассмотрим основную ось и поперечную ось гибкого контейнера:                                                                                                                       Источник: W3C Чтобы выровнять элементы flex вдоль основной оси, с...
13 сент. '15 в 15:30
21

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

У меня есть два divs бок о бок. Я бы хотел, чтобы их высота была одинаковой, и оставайся одинаковой, если один из них изменится. Я не могу понять этого. Идеи? Чтобы прояснить мой запутанный вопрос, я бы хотел, чтобы оба блока всегда были одного разм...
08 июн. '10 в 13:39
11

Как сделать flexbox детей 100% высоты своего родителя?

Я пытаюсь заполнить вертикальное пространство элемента flex внутри flexbox. .container { height: 200px; width: 500px; display: flex; flex-direction: row; } .flex-1 { width: 100px; background-color: blue; } .flex-2 { position: relati...
13 мар. '13 в 9:19
6

Как вертикально выровнять текст внутри flexbox?

Я хотел бы использовать flex box для вертикального выравнивания содержимого внутри <li>, но не имеющего большого успеха. Я проверил онлайн, и многие из учебников фактически используют оболочку div, которая получает align-items:center из наст...
14 авг. '14 в 15:11
18

Как выровнять 3 divs (левый/центральный/правый) внутри другого div?

Я хочу иметь 3 divs, выровненных внутри контейнера div, примерно так: [[LEFT] [CENTER] [RIGHT]] Контейнерный контейнер имеет ширину 100% (без установленной ширины), а центр div должен оставаться в центре после изменения размера контей...
08 апр. '10 в 21:49
26

Flex-box: выровнять последнюю строку с сеткой

У меня есть простая схема flex-box с контейнером, как: .grid { display: flex; flex-flow: row wrap; justify-content: space-between; } Теперь я хочу, чтобы элементы в последнем ряду были выровнены с другим. justify-content: space-between; след...
11 сент. '13 в 14:37
19

Bootstrap 4 выравнивает элементы панели навигации вправо

Как я выравниваю элемент навигации вправо? Я хочу иметь логин и зарегистрироваться вправо. Но все, что я стараюсь, похоже, не работает. Это то, что я пробовал до сих пор: <div> вокруг <ul> с атрибутом: style="float: right" <d...
06 янв. '17 в 20:02
5

Выровняйте элемент снизу с помощью flexbox

У меня есть div с несколькими детьми: <div class="content"> <h1>heading 1</h1> <h2>heading 2</h2> <p>Some more or less text</p> <a href="/" class="button">Click me</a> </div> и ...
23 июн. '15 в 10:56
14

Центр вертикального выравнивания в бутстрапе 4

Я пытаюсь центрировать мой Контейнер в середине страницы, используя Bootstrap 4. Я до сих пор не добился успеха. Любая помощь будет оценена. Я создал его на Codepen.io, чтобы вы, ребята, могли поиграть с ним и дать мне знать, что у меня получается и...
15 февр. '17 в 14:42
3

Как я могу иметь два столбца с фиксированной шириной с одним гибким столбцом в центре?

Я пытаюсь установить макет flexbox с тремя столбцами, где левый и правый столбцы имеют фиксированную ширину, а центральный столбец сгибается, чтобы заполнить доступное пространство. Несмотря на настройку размеров столбцов, они все еще сжимаются, ко...
21 мая '14 в 22:10
6

В чем разница между дисплеем: inline-flex и display: flex?

Я пытаюсь вертикально выровнять элементы в оболочке идентификатора. Я дал свойство display:inline-flex; к этому идентификатору, поскольку оболочкой идентификатора является гибкий контейнер. Но нет никакой разницы в представлении. Я ожидал, что все ...
11 дек. '14 в 8:12