Как сделать адаптивные столбцы (div), с автоматической одинаковой высотой всех div, своим цветом бэкграунда?
задача такая:
есть div (width 1000px) высота "резиновая"
в нем еще 4 div с шириной 25% и "резиновой" высотой, и min-width 150px.
Нужно чтоб у всех 4-ех div внутри было выравнивание контента по центру, по вертикали.
Нашел 2 рабочих варианта.
1) div с display table, в нем ul с display table-row и 4 li внутри с display table-cell
вариант этот замечательный, каждый li полностью растягивается по высоте такой же, как и li самый высокий (высота зависит от количества текста внутри), а значит можно задать каждому li отдельный бэкграунд. И если отступами "рулить" padding'ами внутри каждого li то все хорошо.
Но! при уменьшении окна по ширине, когда каждый li остигает ширины 150, т.е. суммарно они стают 600, а окно меньше, то появляется скролл. Друг под друга они не переносятся.
2) все тоже самое, но display везде по умолчанию (т.е. block), а у li дисплей inline-block.
Вариант рабочий, но появляются пробелы между столбцов, которые убираются комментарием либо тэги в одну строку. При уменьшении окна, если столбцы не влазят, то они друг под друга переносятся. vertical-align и text-align работают. Но высота каждого li соответствует контенту. Да по vertical-align они встают посередине по отношению к ul. и все внутри выглядит отлично. Но бэкграунд к каждому отдельному li уже не применить, так как он будет отображаться только там где есть контент.
Как сделать, чтоб было как в 1 варианте, но с переносом столбцов друг под друга, т.е. в 2-3 и т.д. строки. Или же как во втором варианте, но чтоб li принимали высоту полную и отображали бэкграунд.
Варианты указывать height 100% не канает, так как растягивает не по родителю диву, а на всю страницу. Ну и высота не должна быть фиксирована, так как там все должно быть "резиновое".
А быть может родительскому диву можно указать какой то параметр (кроме height) чтоб он оставался резиновым, но внутри него если диву указываешь height 100% то он растягивался по отношению к родителю, не растягивая самого родителя.
Михаил Чирский: спасибо. Нашел вчера еще решение, вложенному div (который на скрине розовый) тоже указать display flex, и ему же указать align-items: center. Тогда он сам будет растянут, так как у родителя стрейч, а все что внутри будет по центру.
почитал по flex-grow, попробую, думаю так будет более правильно. Еще раз спасибо!
Простой
