Flex — все блоки одной высоты, как задать всем блокам одну высоту?

Question

[Антон Вебсайтовский]

Всем привет.
Задача простая, я сделал, но есть проблема, одна высотка если все блоки на одной строке, а есть и вторая строка и там блоки по высоте самого высокого блока, а как сделать чтобы все блоки в строках были по высотке самого высокого блока.

Пример рабочий:
https://jsfiddle.net/3j6mfuwd/1/

Comments

[Антон Вебсайтовский]

Michael McGlyyn, 2 строки, первая строка, блоки ровняются по высоте блока который самый высокий в первой строке, а во второй строке тож самое, блоки во второй строке ровняются по высоте самого высокого блока во второй строке, а мне надо чтобы для всех строках было одинаковое.

[When you dont want to litter on stackoverflow]

Антон Вебсайтовский, С твоих слов нечего не понятно вообще. Там блоки и так одинаковой высоты. Посмотри через код элемента. Просто текст размещён по середине родительского блока.

[Антон Вебсайтовский]

Andriy Kosmenyuk, нет они не одинаковые, 1 строка блоки выше чем во второй, а мне надо одинаково везде сделать.

[Lynn «Кофеман»]

Вам нужен Grid https://stackoverflow.com/a/44490047/1016033

[Ankhena]

Либо grid либо js.
Флексбокс так не умеет.

[Антон Вебсайтовский]

Алексей Тен, а flex так не сможет?

[Антон Вебсайтовский]

Ankhena, думал на флексе и не такое творить можно.

Тогда может как-то по простому можно.

[Ankhena]

Антон Вебсайтовский,

Тогда может как-то по простому можно.

да, можно:

Либо grid либо js.

Можно по сложному: указать размеры шрифта и line-height в em, посчитать максимальное количество строк всех типов и указать высоту блоков в em.

[Антон Вебсайтовский]

Ankhena, вроде можно как-то и проще сделать, чем страдать подсчетом, не через флекс, надо поискать будет. грид не хочу использовать, ну это пока еще.

[Ankhena]

Антон Вебсайтовский,

грид не хочу использовать

остается js.

[Антон Вебсайтовский]

Ankhena, поищу может что найду, вроде задача очень простая если так подумать. но на сколько css не идеален.

[Ankhena]

Антон Вебсайтовский, да, не умеет телепатию, вот уродство. А главное, не умеет сделать желаемое неподходящими инструментами.

А гриды вам чем не угодили?

[Антон Вебсайтовский]

Ankhena, гриды если ставить, не везде в друг будут работать, а потом еще надо адаптацию делать, тож вычитывать что и как там с гридами.

Вообщем бессмысленный разговор, не вижу смысла вести общение, если по делу что-то есть, присылай, а то ты как на форум заходишь просто написать бред какой-то и все.

[Ankhena]

Антон Вебсайтовский, вам написали 2 варианта.

Какие браузеры вы поддерживаете, что там не работают гриды?

При адаптации ничего не мешает поменять грид на флекс или блок.

Что вам прислать?

display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;

Ну так я о вас лучшего мнения и не хочу обижать очевидным.

[Антон Вебсайтовский]

Ankhena, Для проверки сделал и чет разницы не вижу. )))))))))))

[Ankhena]

Антон Вебсайтовский,

Для проверки сделал и чет разницы не вижу. )))))))))))

Боюсь представить

Вариант на базе вашего: https://jsfiddle.net/1us6y8f5/
Внутренности не выравнивала, при такой разметке и стилях возитесь с ними самостоятельно.

Вариант с вменяемой разметкой: https://jsfiddle.net/dk0usbwv/
Если текст не нужно выравнивать по вертикальному центру, то нужно убрать align-self.

Автопрефиксер - самостоятельно.

Answer 1

[archelon]

Уберите это свойство

.fc {
    align-items: center; 
}

и поправьте отступы у внутренних элементов.

Comments

[Антон Вебсайтовский]

а причем тут центрование ), оно тут не поможет.

[archelon]

Антон Вебсайтовский, ну, значит я не понял вопроса, что не удивительно.

[Антон Вебсайтовский]

archelon, )))))))))