Intereting Posts
Событие Fire onchange для TextBox, когда readonly истинно Как форма SO запоминает предыдущие входные значения? Нажмите «Проблема»: динамически сгенерированные ссылки не запускаются Функция щелчка Как реализовать кнопку в jQuery Сортировка заголовка аккордеона Поделиться Json между html-страницами Форсировать цвет фона в Firefox Обработчик события OnChange для переключателя (INPUT type = “radio”) не работает как одно значение Нестандартные атрибуты HTML-тегов. Хорошая вещь? Плохо? Твои мысли? анимировать изображение снизу вверх PHP – пустой $ _POST и $ _FILES – при загрузке больших файлов Эффект ввода для нескольких строк jQuery изменяет страницу – но как / где я могу «получить» изменения? Перетаскивать div на страницу? Элемент Flex с изображением ребенка не корректируется с его исходной ширины Остановить прокрутку в динамической странице с помощью Selenium в Python

Как организовать три flex div бок о бок

дивы

У меня есть три divs в div контента, когда изменение размера браузера

  • синий и красный div должны иметь фиксированную ширину
  • зеленый div должен resize влево

Я также пробовал это в css

.yellow{ height: 100%; width: 100%; } .red{ height: 100%; width:200px; display:inline-block; background-color: red; } .green{ height: 100%; min-width:400px; display:inline-block; background-color:green; } .blue{ height: 100%; width:400px; display:inline-block; background-color: blue; } 

Этот код не изменяет размер зеленого div, в некоторых браузерах красная панель не отображается

Я также попробовал float: left и

  display: -webkit-flex; display: flex; 

но не работает правильно. Как это сделать?

Используйте flex-grow . Установите его на 0 для синего и красного контейнера, и что-то большое для зеленого:

 .red{ height: 100%; width:200px; flex-grow: 0; display:inline-block; background-color: red; } .green{ height: 100%; min-width:400px; flex-grow: 1000; display:inline-block; background-color:green; } .blue{ height: 100%; width:400px; flex-grow: 0; display:inline-block; background-color: blue; } 

Очень хороший чит-лист можно найти здесь: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Кроме того, не забывайте о других свойствах, таких как display: flex; и justify-content: space-between . Это объясняется в приведенной выше ссылке.

Обратите внимание, однако, что вам не нужно использовать flexbox. вы можете добиться того же с помощью float , что делает его совместимым со старыми браузерами (для этого просто используйте display: block; и добавьте float: left к синему div и float: right; к красному).

Вы можете использовать свойство flex shorthand, которое определяет гибкое поведение элемента:

 .yellow { display: flex } /* Magic begins */ .red, .green, .blue { min-width: 0 } /* See http://stackoverflow.com/q/26895349/ */ .red { flex: 0 200px } /* Initial width of 200, won't grow, can shrink if necessary */ .green { flex: 400px } /* Initial width of 400, grows to fill available space, can shrink if necessary */ .blue { flex: 0 400px } /* Initial width of 400, won't grow, can shrink if necessary */ 
 html, body { height: 100%; margin: 0; } .yellow { display: flex; height: 100%; } .red, .green, .blue { min-width: 0; } .red { flex: 0 200px; background-color: red; } .green { flex: 400px; background-color:green; } .blue { flex: 0 400px; background-color: blue; }