Articles of flexbox

Поведение ширины входного элемента таинственно

У меня два входных элемента в flexbox: ( скрипка ) Я хочу, чтобы те получали ширину 200px равномерно распределенной. Однако они не являются. Вместо этого у них есть таинственный размер по умолчанию. Они также не слушают min-width . Они действительно слушают width , так что это делает желаемую вещь: ( скрипка ) Мой вопрос: почему? […]

Как я выравниваю элемент справа внутри контейнера flex?

Я начинаю использовать гибкую коробку, но не уверен, как установить элемент внутри контейнера flex, который будет расположен с правой стороны? Я пробовал применять align-self: flex-end и justify-content: flex-end без успеха, поэтому я надеюсь, что кто-то может мне помочь? CSS .ctn { background: lightblue; height: 100px; padding: 10px; display: flex; align-items: center; } .btn { outline: […]

Как получить контейнер Flex для соответствия содержимому

Я хочу, чтобы контейнер Flex расширялся до максимального размера внутри родителя и сжимался для соответствия элементам. В этом примере я установил фоновый цвет контейнера Flex для визуализации контейнера. Теперь он заполняет всю ширину родителя, но мне не нужен правильный запас. это то, что я получил до сих пор: Html & css : Obj 1 Obj […]

Как вы помещаете элементы в новую строку, тот же столбец с css-сеткой?

Мое содержимое перекрывается. Я понимаю, что это связано с тем, что я ставлю одно и то же col-start , но как мне получить, что div div контента будет расти, и спуститься по середине моей css-сетки? Должен ли я использовать flexbox с сеткой здесь? (пожалуйста, не загружайте) Вот как это выглядит сейчас: .mygrid { display: grid; […]

Проблема с Flexbox 100% высотой

Я нашел следующие ссылки … но мне это все равно не помогает … как работать вложенные flexboxes Высота 100% на дочернем столбце flexbox Как сделать детей Flexbox 100% высотой своего родителя? Мне нужна полная страница, которая реагирует, как показано на следующем рисунке: С верхним и нижним колонтитулом и средними 5 столбцами, заполняющими высоту одинаково в […]

Вложенные flexbox, элементы выравнивания не сгибаются

Я пытаюсь разместить навигацию внизу с flex-end . Я не уверен, что заставляет его не размещать внизу. Я знаю, что могу поместить его с абсолютной позицией, пытаясь избежать этого. код находится на jsfiddle one two three four header { background: deepskyblue; display: flex; padding: 20px 0; .header__logo { background: aqua; flex: 20%; min-height: 140px; } […]

Почему Firefox не соблюдает высоту сгибаемого div, но Chrome есть?

Это лучше всего иллюстрируется простым примером. У меня есть контейнер с display: flex и flex-direction: column , с одним div внутри с height: 300px и flex: 1 . Chrome отображает вложенный div размером 300px, но Firefox отображает его как одну строку. Это просто нюанс между реализацией flexbox между двумя браузерами или каким-то образом этот плохой […]

CSS Flexbox влияет на компоновку Bootstrap 3

Я пытаюсь создать макет ниже в Bootstrap 3. Я могу достичь макета, показанного в разделе «sm», и с помощью flexbox я хочу поменять местами div 1 и 2 для экранов xs. Проблема в том, что я делаю содержащий div div flexbox, он толкает div 3 на макет sm, так что он находится под div 2. […]

Свойство css с пробелами создает проблемы с flex

Я столкнулся с проблемами с white-space:nowrap когда есть гибкий контейнер. Существует гибкий container с flex-direction:row; в котором есть две sidebar flex:0 0 70px; с определенной шириной, заданной с использованием flex:0 0 70px; и main-content . В main-content с flex-direction:column двух главных div, header и content . Теперь в content есть три blade которые имеют flex-grow:1 […]

Вложенные гибкие контейнеры с внутренней полосой прокрутки и плотным / закрывающим нижним контейнером

У меня есть вложенная структура контейнеров flexbox, где внутренний контейнер должен показывать потенциально большое содержимое в прокручиваемой панели. Однако иногда контент мал. Существует дополнительный контейнер, который должен быть всегда видимым, и что я хотел бы иметь чуть ниже прокручиваемого содержимого, то есть не так далеко внизу, если только содержимое прокручиваемой панели не «подталкивает» его – […]