flexbox- все статьи тега


Две колонки flex-box макет

Мне нужно создать макет, который будет содержать список элементов в двух столбцах. Как я показал ниже: .container { border: 1px solid red; height: 300px; display: flex; flex-direction: column; justify-content: flex-start; flex-wrap: wrap; } .item { border: 1px dashed blue; height: 50px; } <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="i ...

Safari flex-grow поведение, отличное от Chrome / FF / Edge (css flexbox)

Я получаю различное поведение между Safari и Chrome / FF / Edge с помощью flex-grow. Я пытаюсь получить вертикальный центр, но safari дает больше фиксированного эффекта снизу. Я использую flex-grow с десятичным числом, но Safari, похоже, интерпретирует его как целое значение. HTML <div class="fc"> <div>Align Top</div> <div>Align Center</div> <div>Align Bottom</div> <div class="spacer">Bottom Spacer</div> </div> CSS .fc { ...

Flexbox: заполнить оставшееся пространство, но все еще обернуть

Есть ли способ сказать элементам flexbox, чтобы они заполнили оставшееся пространство, но обернуть, как только они становятся меньше, чем их содержимое. Однако некоторые элементы имеют фиксированную процентную ширину. HTML <div class="grid"> <div class="grid__item">column auto</div> <div class="grid__item one-third">column 33.333%</div> <div class="grid__item one-third">column 33.333%</div> <div class="grid__item">column auto</div&gt ...

Flexbox в Chrome-как ограничить размер вложенных элементов? [дубликат]

На этот вопрос уже есть ответ здесь: Chrome / Safari не заполняет 100% высоту Flex parent 3 ответа В Google Chrome Как заставить элемент, вложенный в элемент flexbox (под" элементом flexbox " я подразумеваю дочерний элемент элемента, стилизованного под display:flex), ограничить его размер размером элемента flexbox, в который он вложен под водой? Например, предположим, что у меня есть следующее: < ...

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

есть ли более flexbox-ish способ выровнять "контакт" справа, чем использовать 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 class="a"><a href="#">Home</a></div> <div class="b"><a href="#">Some title centered</a></div> <div class= ...

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

Я хочу, чтобы 3 дива выровнены внутри контейнера 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] какие-либо советы? ...

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

Я хотел бы использовать flex box для вертикального выравнивания некоторого содержимого внутри <li> но не имея большого успеха. Я проверил онлайн, и многие из учебников на самом деле используют оболочку div, которая получает align-items:center из настроек flex на родителе, но мне интересно, можно ли вырезать этот дополнительный элемент? Я решил использовать flex box в этом случае, поскольку высота элемента списка будет динамическим %. * { padding: 0; margin: 0; } html, bod ...

Разница между дисплеем: inline-flex и дисплеем: flex

мне трудно понять свойство display:inline-flex;. В чем разница между display:inline-flex; и display:flex;? Я пытаюсь вертикально выровнять некоторые элементы в оболочке ID. Вот почему я дал свойство display:inline-flex; к этому идентификатору; потому что оболочка идентификатора-это контейнер flex. но нет никакой разницы в презентации. Я ожидал, что все в идентификаторе обертки будет отображаться inline. #wrapper { display: inline-flex; /*no difference to display:flex; */ } & ...

Каковы различия между гибкой основой и шириной?

были вопросы и статьи об этом, но ничего убедительного, насколько я могу сказать. Лучшее резюме, которое я мог найти, это flex-basis позволяет указать начальный / начальный размер элемента, прежде чем что-либо еще будет вычислено. Это может быть как процентное, так и абсолютное значение. ...что само по себе не говорит о поведении элементов с flex-basis set. С моим текущим знание flexbox я не понимаю, почему это не может описать ширина также. Я хотел бы знать, как именно flex-basis отли ...

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

Как выровнять элемент navbar вправо? я хочу иметь логин и зарегистрировать права. Но все, что я пытаюсь, кажется, не работает. это то, что я пробовал до сих пор: <div> вокруг <ul> С атрибутом: style="float: right" <div> вокруг <ul> С атрибутом: style="text-align: right" попробовал эти две вещи на <li> теги попробовал все эти вещи снова с !important добавить в конец изменить nav-item до nav-right на <li> добавил pull-sm-right класс <li> добав ...

Почему не может быть гибких контейнеров?

я пытался стиль a fieldset элемент display: flex и display: inline-flex. однако, это не работает: flex вели себя как block и inline-flex вели себя как inline-block. это происходит как на Firefox и Chrome, но странно это работает на IE. это баг? Я не мог найти это fieldset должно иметь какое-либо особое поведение, ни в HTML5, ни в CSS гибкий макет коробки характеристики. fieldset, div { display: flex; border: 1px solid; } <fieldset> <p>foo</p> < ...

Текст в контейнере flex не переносится в IE11

рассмотрим следующий фрагмент: .parent { display: flex; flex-direction: column; width: 400px; border: 1px solid red; align-items: center; } .child { border: 1px solid blue; } <div class="parent"> <div class="child"> Lorem Ipsum is simply dummy text of the printing and typesetting industry </div> <div class="child"> Lorem Ipsum is simply dummy text of the printing and typesetting industry </div> </div> в ...

CSS3 Flexbox поддерживает соотношение сторон изображения

используя модель CSS flex box, как я могу заставить изображение поддерживать его соотношение сторон? JS Скрипка http://jsfiddle.net/xLc2Le0k/2/ обратите внимание, что изображения растягиваются или сжимаются, чтобы заполнить ширину контейнера. Это нормально, но можем ли мы также растянуть или сжать высота для сохранения пропорций изображения? HTML <div class="slider"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> <img src="http://www.placebacon.net/400/300" ...

Почему flexbox растягивает мой образ?

Flexbox имеет такое поведение, когда он растягивает изображения до их естественной высоты. Другими (более конкретными) словами, если у меня есть контейнер flexbox с дочерним изображением, и я изменяю ширину этого изображения, высота не изменяется вообще, и изображение растягивается. <div> <img src="https://loremflickr.com/400/300" > <h4>Appify</h4> <p> some text </p> </div> а это таблица стилей div { display: flex; flex-wrap: wrap; } ...

Сделать гибкие элементы принимают ширину содержимого, а не ширину родительского контейнера

у меня есть контейнер <div> С display: flex. У него есть ребенок <a>. как я могу заставить ребенка появляются "рядный"? в частности, как я могу сделать ширину ребенка, определяемую его содержимым, и не расширяться до ширины родителя? что я пробовал: Я поставил ребенка в display: inline-flex, но он все равно занял всю ширину. Я также попробовал все другие свойства отображения, но ничего не повлияло. пример: .container { background: red; height: 200px; flex-dire ...

переполнение-й версии Firefox не работает с вложенными основе

Я разработал макет 100% ширины 100% высоты с css3 flexbox, который работает как на IE11 (и, вероятно, на IE10, если эмуляция IE11 правильна). но Firefox (35.0.1), overflow-y не работает. Как вы можете видеть в этом codepen : http://codepen.io/anon/pen/NPYVga firefox не отображает переполнение правильно. Он показывает одну полосу прокрутки html, body { height: 100%; margin: 0; padding: 0; border: 0; } .level-0-container { height: 100%; display: -webkit-box; di ...

Как установить столбец фиксированной ширины с помощью CSS flexbox

CodePen:http://codepen.io/anon/pen/RPNpaP. Я хочу, чтобы красный прямоугольник был шириной всего 25 ЭМ, когда он находится в бок о бок-я пытаюсь добиться этого, установив css внутри @media all and (min-width: 811px) {...} до .flexbox .red { width: 25em; } но когда я это делаю, это происходит: http://i.imgur.com/niFBrwt.png есть идеи, что я делаю неправильно? Большое спасибо. ...