Вопросы с тегом «flexbox»

Чтобы установить минимальное расстояние между элементами flexbox, я использую margin: 0 5pxна .itemи margin: 0 -5pxна контейнере. Для меня это похоже на взлом, но я не могу найти лучшего способа сделать это. пример #box { display: flex; width: 100px; margin: 0 -5px; } .item { background: gray; width: 50px; height: …

781 css  flexbox 

Есть ли более гибкий способ для выравнивания «Контакта» по правому краю, чем использовать position: absolute? .main { display: flex; } .a, .b, .c { background: #efefef; border: 1px solid #999; } .b { flex: 1; text-align: center; } .c { position: absolute; right: 0; } <h2>With title</h2> <div class="main"> <div …

682 html  css  flexbox 

Рассмотрим основную ось и поперечную ось гибкого контейнера: Источник: W3C Для выравнивания гибких элементов вдоль главной оси есть одно свойство: justify-content Для выравнивания изгибаемых элементов вдоль поперечной оси есть три свойства: align-content align-items align-self На изображении выше основная ось горизонтальная, а поперечная ось вертикальная. Это направления по умолчанию для гибкого …

678 css  flexbox  language-lawyer  w3c 

Как центрировать div горизонтально и вертикально внутри контейнера, используя flexbox. В приведенном ниже примере я хочу, чтобы каждое число находилось ниже друг друга (в строках), которые расположены по центру по горизонтали. .flex-container { padding: 0; margin: 0; list-style: none; display: flex; align-items: center; justify-content: center; } row { width: 100%; …

672 html  css  flexbox 

Я пытаюсь заполнить вертикальное пространство элемента Flex внутри Flexbox. .container { height: 200px; width: 500px; display: flex; flex-direction: row; } .flex-1 { width: 100px; background-color: blue; } .flex-2 { position: relative; flex: 1; background-color: red; } .flex-2-child { height: 100%; width: 100%; background-color: green; } <div class="container"> <div class="flex-1"></div> <div …

459 css  flexbox 

У меня есть два div рядом. Я бы хотел, чтобы высота их была одинаковой, и оставалась такой же, если один из них изменяет размеры. Я не могу понять это, хотя Идеи? Чтобы прояснить мой запутанный вопрос, я бы хотел, чтобы оба блока всегда были одинакового размера, поэтому, если один из …

443 html  css  html-table  flexbox 

Я хотел бы использовать flexbox для вертикального выравнивания некоторого контента внутри, <li>но без особого успеха. Я проверил онлайн, и многие из учебных пособий фактически используют div-обертку, которая получает align-items:centerиз настроек flex на родительском элементе, но мне интересно, возможно ли вырезать этот дополнительный элемент? В этом случае я решил использовать flexbox, …

425 html  css  flexbox 

Я хочу, чтобы 3 div были выровнены внутри контейнера div, что-то вроде этого: [[LEFT] [CENTER] [RIGHT]] Контейнер div имеет ширину 100% (без заданной ширины), и центр div должен оставаться в центре после изменения размера контейнера. Итак, я установил: #container{width:100%;} #left{float:left;width:100px;} #right{float:right;width:100px;} #center{margin:0 auto;width:100px;} Но это становится: [[LEFT] [CENTER] ] [RIGHT] …

392 html  css  flexbox  alignment  css-float 

У меня есть простая схема flex-box с контейнером, как: .grid { display: flex; flex-flow: row wrap; justify-content: space-between; } Теперь я хочу, чтобы элементы в последнем ряду были выровнены с другим. justify-content: space-between;следует использовать, потому что ширина и высота сетки могут быть скорректированы. В настоящее время это выглядит как Здесь …

380 css  flexbox  grid-layout 

У меня есть 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> и я хочу следующий макет: ------------------- |heading 1 | |heading 2 | |paragraph text | |can have many | |rows | | | | | | | |link-button | …

376 html  css  flexbox 

Попытка навигации flexbox, которая имеет до 5 элементов и всего 3, но это не делит ширину поровну между всеми элементами. скрипка Учебное пособие, которое я моделирую после этого: http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/ SASS * { font-size: 16px; } .tabs { max-width: 1010px; width: 100%; height: 5rem; border-bottom: solid 1px grey; margin: 0 0 …

368 html  css  flexbox 

Кто-нибудь может показать мне разницу между align-itemsи align-content?

366 css  layout  flexbox  alignment 

Как выровнять элемент навигационной панели вправо? Я хочу иметь логин и зарегистрироваться справа. Но все, что я пытаюсь, похоже, не работает. Это то, что я пробовал до сих пор: <div>во всем <ul>с атрибутом:style="float: right" <div>во всем <ul>с атрибутом:style="text-align: right" попробовал эти две вещи на <li>тегах попробовал все эти вещи снова …

341 css  twitter-bootstrap  flexbox  bootstrap-4  navbar 

Я пытаюсь выровнять элементы по вертикали. Я присвоил display:inline-flex;этому идентификатору свойство, так как оболочкой идентификатора является гибкий контейнер. Но нет никакой разницы в представлении. Я ожидал, что все в идентификаторе оболочки будет отображаться inline. Почему не так? #wrapper { display: inline-flex; /*no difference to display:flex; */ } <body> <div id="wrapper"> …

331 css  flexbox 

Я пытаюсь центрировать мой Контейнер в середине страницы, используя Bootstrap 4. Я до сих пор не добился успеха. Любая помощь будет оценена. Я построил его на Codepen.io, чтобы вы, ребята, могли поиграть с ним и дать мне знать, что у меня получается из идей ... Показать фрагмент кода var currentAuthor …

322 html  css  twitter-bootstrap  flexbox  bootstrap-4