Как сделать элементы flexbox одинаковой высоты и/или начинать с одной и той же точки
Я создаю карты flexbox для отображения трех элементов. Заголовок, <hr> и абзац. Длина текста заголовка варьируется, что создает разную высоту.
Я бы хотел, чтобы все заголовки имели одинаковую высоту, чтобы каждая карточка была одинаковой. Если это невозможно, я бы хотел, чтобы абзацы были выровнены по горизонтали на каждой карточке.
Я пытался присвоить заголовку свойство flex: 1, чтобы сдвинуть абзац вниз, но это создает слишком много места.
Вот кодовая ручка и демо:
body {
max-width: 1180px;
margin: 0 auto;
}
h2,
p {
margin: 0;
padding: 0;
}
h2 {
font-size: 18px;
}
/*******************************************************/
.cards {
display: flex;
}
.card {
border: 1px solid;
display: flex;
flex-direction: column;
margin: 0 0 25px 0;
width: 50%;
}
.card-title {
text-transform: uppercase;
text-align: center;
margin: 0 0 25px 0;
}
.card-paragraph {
text-align: center;
}
hr {
height: 3px;
width: 100%;
background: #333;
}
/*******************************************************/<body>
<div class = "cards">
<div class = "card">
<div class = "card-title">
Title one IS LONGER THAN TITLE TWO
</div>
<hr>
<div class = "card-paragraph">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text.
</div>
</div>
<div class = "card">
<div class = "card-title">
TITLE TWO
</div>
<hr>
<div class = "card-paragraph">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</div>
</div>
</body>Что я хочу:
Что происходит:
Ответы 3
Я бы предложил CSS Grid для чего-то вроде этого:
body {
max-width: 1180px;
margin: 0 auto;
}
h2,
p {
margin: 0;
padding: 0;
}
h2 {
font-size: 18px;
}
/*******************************************************/
.cards {
display: grid;
grid-auto-columns: auto;
grid-auto-rows: auto;
}
.card {
border: 1px solid;
grid-row: 1;
display: grid;
grid-auto-rows: 1fr;
}
.card-title {
text-transform: uppercase;
text-align: center;
margin: 0 0 25px 0;
}
.card-paragraph {
text-align: center;
}
hr {
height: 3px;
width: 100%;
background: #333;
}
/*******************************************************/<body>
<div class = "cards">
<div class = "card">
<div class = "card-title">
Title one IS LONGER THAN TITLE TWO Title one IS LONGER THAN TITLE TWO Title one IS LONGER THAN TITLE TWO
</div>
<hr>
<div class = "card-paragraph">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text.
</div>
</div>
<div class = "card">
<div class = "card-title">
TITLE TWO
</div>
<hr>
<div class = "card-paragraph">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</div>
</div>
</body>Любая причина, почему столбцы огромны?
Это из-за нижнего поля 25px в .card-title.
Выравнивание контейнеров соседний флексбокс может оказаться невозможным — CSS Grid может быть хорошим выбором:
используйте
display: contentsнаcardили вообще удалите оберткуиспользуйте сетку из двух столбцов и поместите
card-titleв первую строку, используяgrid-row: 1поместите
card-paragraphв третий ряд, используяgrid-row: 3, и поместитеhrмежду ними, используяgrid-row: 2.
См. демо ниже:
body {
max-width: 1180px;
margin: 0 auto;
}
h2,
p {
margin: 0;
padding: 0;
}
h2 {
font-size: 18px;
}
.cards {
/* display: flex; */
display: grid;
grid-template-columns: 1fr 1fr;
}
.card {
/* border: 1px solid;
display: flex;
flex-direction: column;
margin: 0 0 25px 0;
width: 50%;*/
display: contents; /* added */
}
.card-title {
text-transform: uppercase;
text-align: center;
/* margin: 0 0 25px 0;*/
grid-row: 1; /* added */
border: 1px solid; /* added */
}
.card-paragraph {
text-align: center;
grid-row: 3; /* added */
border: 1px solid; /* added */
}
hr {
height: 3px;
/* width: 100%; */
background: #333;
margin: 0; /* added */
grid-row: 2; /* added */
}<div class = "cards">
<div class = "card">
<div class = "card-title">
Title one IS LONGER THAN TITLE TWO
</div>
<hr>
<div class = "card-paragraph">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text.
</div>
</div>
<div class = "card">
<div class = "card-title">
TITLE TWO
</div>
<hr>
<div class = "card-paragraph">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</div>
</div>Насколько поддерживается использование display: grid? Ваш ответ хорошо решает мою проблему, однако HR находится внизу контейнера для карт? Обновлено: я изменил свойство grid-row на 3 вместо 2
@Rich исправил hr... сетка поддерживается в современных браузерах, у вас нет в ней IE... caniuse.com/#search=css-сетка
Ok. Вид необходимого IE, но все же хорошее решение. Нет способа выровнять такой контент, просто используя flex?
и поддержка display: contents - caniuse.com/#search=display%3A%20contents
@ Rich нет, вы не можете выровнять гибкие элементы в соседние флексбоксы .... см. другое обсуждение здесь :)
Это возможно с flexbox только путем установки высоты заголовка:
.card-title {
...
height: 50px;
}
Кодепен
Но тогда, если у меня есть длинный заголовок, превышающий 50 пикселей по высоте, текст выльется из контейнера. Не решение.