Articles of flexbox

Автополе Flexbox не работают с оправданием-содержимым: центр в IE

У меня есть таблица, где ячейка может содержать несколько значков, а также текст. Если значки присутствуют, они отображаются слева от текста. Существует несколько возможных случаев выравнивания: Присутствует только значок: значок должен быть центрирован Присутствует только текст: текст должен быть выровнен слева Оба значка и текст присутствуют: и значок, и текст должны быть выровнены влево Я […]

Родитель Flexbox для расширения ширины, если дочерний элемент содержит очень длинное слово

Интересно, может ли кто-нибудь помочь мне в этом вопросе, я не могу найти кого-либо еще, кто хочет сделать это с помощью flexbox! Я установил базовый сценарий Flexbox, в котором несколько элементов (li) отображаются в контейнере flexbox (ul). И я также установил его так, чтобы максимальное количество li, которое будет вписываться в строку перед оберткой, равно […]

Браузер говорит, что flex-basis: content – «Недопустимое значение свойства»

Данный: .layout { display: flex; flex-wrap: nowrap; align-items: stretch; } .layout aside, .layout main { min-width: 100px; } .layout aside { flex: 0 0 content; background-color: red; } .layout main { flex: 1 1 content; background-color: green; } Line 1 Line 1 Line 2 Line 3 в Line 1 Line 1 Line 2 Line 3 […]

Flexbox выравнивается к нижней

У меня есть следующий макет http://jsbin.com/joyetaqase/1/edit?html,css,output Lorem Ipsum is simply dummy text of the printing and typesetting industry. my footer Lorem Ipsum. my footer Используя flexbox, я пытаюсь сделать ту же высоту и ту же ширину в .col . Мой вопрос: как я могу положить в нижнюю часть windows? Макет должен выглядеть так: Я знаю, […]

Центрирование нескольких изображений по горизонтали с помощью flexbox

Проблема, с которой я сталкиваюсь, заключается в том, что когда я добавляю четыре изображения в контейнер .images justify-content:center которое я применяю для justify-content:center изображений по горизонтали на странице, не работает. Однако, когда у меня есть только два изображения внутри контейнера .images я получаю изображения по горизонтали. Я смог найти решение для центрирования изображений по горизонтали, […]

Flexbox: высота div зависит от отношения sibling div

У меня есть два div, завернутых внутри обертки, оба имеют динамические высоты: #wrapper { display: flex; } dynamic content, height could be more or less than #right dynamic content, height could be more or less than #left Левый div всегда должен быть ведущим фактором для высоты оберток. Есть ли способ сделать это чистым только css? […]

Угловой материал Flexbox – Как добавить маржу между обернутыми рядами?

Я использую Angular Material и его функциональность flexbox. Я столкнулся с проблемой, которая кажется мне простой, но у меня проблемы с ней. Я создал этот Codepen для демонстрации моей проблемы. Таким образом, у меня есть строка с элементами, которые превышают 100% этой строки и имеют включенную обертку, поэтому я получаю две строки элементов без полей, […]

Эллипсис, не работающий в гибком контейнере

Я пытаюсь создать макет (который будет музыкальным проигрывателем) с flex. У меня есть три кнопки (предыдущая, игра, и следующая, представленные красными квадратами), которые я всегда хочу быть на одной линии. Затем у меня есть информация о песне (текущее время, название песни и общее время), которое я хочу отобразить справа от кнопок. Я почти всегда хочу, […]

Свойство align-self в flexbox не работает?

Я пытаюсь понять flex box: я хочу сделать «первый» блок растянутым, чтобы он соответствовал полной ширине браузера, и «второй» блок фиксированного размера и выровнен налево. Поэтому я использовал align-items: flex-end в родительском ( ) и пытался растянуть первый блок с помощью align-self: stretch в «первом» блоке. Это не работает. Оба они выровнены влево. html { […]

CSS Flexbox – организация гибких элементов на основе размера экрана

У меня есть контейнер с гибкими элементами, которые я пытаюсь организовать в разных макетах с различным количеством элементов гибкости в зависимости от размера экрана. Например, на рабочем столе я хотел бы иметь 4 контейнера, каждый из которых состоит из 2 элементов, расположенных в сетке 2×4, и каждая ячейка 1×2. То, что я, кажется, не могу […]