No exemplo abaixo:
<div class="container">
<div class="c1"><p>5 linhas de texto</p></div>
<div class="c2"><p>4 linhas de texto</p></div>
<div class="c3"><p>3 linhas de texto</p></div>
</div>
.container {
display: flex;
min-height: 10em;
}Atualmente, C1, C2 e C3 ficam com a altura de 10em. Gostaria que ficassem com o tamanho do maior elemento (no caso, C1) e um espaço vazio embaixo. É claro que poderia acrescentar uma DIV mas gostaria de preservar a semântica do html.
Olá Renan, beleza? eu não consegui entender muito bem qual era o problema, porém acho que deve ser algo parecido com isso aqui https://liveweave.com/Wrih9u.
Acho que a forma mais simples de alinhar é usando a propriedade align-items: center;, também estou fazendo o mesmo curso e consegui exemplificar no link o código que utilizei.
Espero ter ajudado, caso alguém tenha uma opção melhor estarei aqui pra acompanhar o tópico =)
Quando coloco o min-height no container flex, todos os flex itens são esticados (stretch) para aquele tamanho.
Poderia mudar o align-items para flex-start, mas nesse caso os items ficam cada um de um tamanho diferente.
Fiz um código de exemplo aqui: https://liveweave.com/kRgGQu
Para entender melhor, experimente comentar a linha de "align-items".
Gostaria que todos os flex-items ficassem com a altura do maior item, mas sem ocupar todo o container.
Olá Renan,
Eu acho que a melhor forma de fazer isto é usando
Tables e os conceitos de colspan e rowspan.
Aqui está um exemplo https://liveweave.com/Wrih9u.