Dave Dave - 1 month ago 11
CSS Question

Equal width for flex items regardless of content length

I'm new to flexboxes and am interested in how they work.

The flexboxes in my code below look fantastic, but I am confused how the box widths are determined.

For instance, if you delete what is written in the

<p>
or
class="card_title"
elements, the size of the box also changes.

Is there a way to set all the boxes to be the same width regardless of the lengths of the titles or paragraphs?

codepen demo



img {
height: auto;
max-width: 100%;
vertical-align: middle;
}
.btn {
background-color: white;
border: 1px solid #cccccc;
color: #696969;
padding: 0.5rem;
text-transform: uppercase;
}
.btn--block {
display: block;
width: 100%;
}
.cards {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
}
.cards__item {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 1rem;
}
@media (min-width: 40rem) {
.cards__item {
width: 50%;
}
}
@media (min-width: 56rem) {
.cards__item {
width: 33.3333%;
}
}
.card {
background-color: white;
border-radius: 0.25rem;
box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
overflow: hidden;
}
.card:hover .card__image {
-webkit-filter: contrast(100%);
filter: contrast(100%);
}
.card__content {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
padding: 1rem;
}
.card__image {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
-webkit-filter: contrast(70%);
filter: contrast(70%);
overflow: hidden;
position: relative;
-webkit-transition: -webkit-filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
transition: -webkit-filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
transition: filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
transition: filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91), -webkit-filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
}
.card__image::before {
content: "";
display: block;
padding-top: 56.25%;
}
@media (min-width: 40rem) {
.card__image::before {
padding-top: 66.6%;
}
}
.card__image--wedding {
background-image: url(wedding2.png);
}
.card__image--baby {
background-image: url(baby2.png);
}
.card__image--moving {
background-image: url(moving2.png);
}
.card__image--graduation {
background-image: url(graduation2.png);
}
.card__image--retirement {
background-image: url(retirement2.png);
}
.card__image--award {
background-image: url(trophy2.png);
}
.card__title {
color: #696969;
font-size: 1.25rem;
font-weight: 300;
letter-spacing: 2px;
text-transform: uppercase;
}
.card__text {
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
font-size: 0.875rem;
line-height: 1.5;
margin-bottom: 1.25rem;
}

<div class="life_events">
<hr class="section-heading-spacer"></hr>
<div class="clearfix"></div>
<h2 class="section-heading">Moments That Matter</h2>
<ul class="cards">
<li class="cards__item">
<div class="card">
<div class="card__image card__image--wedding"></div>
<div class="card__content">
<div class="card__title">Getting Married</div>
<p class="card__text"></p>
<button class="btn btn--block card__btn">Let's Go</button>
</div>
</div>
</li>
<li class="cards__item">
<div class="card">
<div class="card__image card__image--baby"></div>
<div class="card__content">
<div class="card__title">Growing Your Family</div>
<p class="card__text"></p>
<button class="btn btn--block card__btn">Let's Go</button>
</div>
</div>
</li>
<li class="cards__item">
<div class="card">
<div class="card__image card__image--moving"></div>
<div class="card__content">
<div class="card__title">Moving to a New Home</div>
<p class="card__text"></p>
<button class="btn btn--block card__btn">Let's Go</button>
</div>
</div>
</li>
<li class="cards__item">
<div class="card">
<div class="card__image card__image--graduation"></div>
<div class="card__content">
<div class="card__title">Requesting Tuition Reimbursement</div>
<p class="card__text"></p>
<button class="btn btn--block card__btn">Let's Go</button>
</div>
</div>
</li>
<li class="cards__item">
<div class="card">
<div class="card__image card__image--retirement"></div>
<div class="card__content">
<div class="card__title">Preparing for Retirement/Separation</div>
<p class="card__text"></p>
<button class="btn btn--block card__btn">Let's Go</button>
</div>
</div>
</li>
<li class="cards__item">
<div class="card">
<div class="card__image card__image--award"></div>
<div class="card__content">
<div class="card__title">Awarding an Employee</div>
<p class="card__text"></p>
<button class="btn btn--block card__btn">Let's Go</button>
</div>
</div>
</li>
</ul>
</div>




Answer

Is there a way to set all the boxes to be the same width regardless of the lengths of the titles or paragraphs?

You currently have no defined width on your card elements. This means the width of the element will be set by its content (.card_image, .card_content. .card_title, etc.).

If you want the width of these elements to be uniform and fixed, then give them a width. Try this:

.card { flex: 0 0 100%; } /* don't grow, don't shrink, take full width of parent */

revised codepen

Comments