CODEWITHSUNDEEP
htmlcssflexbox
Jacob J
Jacob J

Reputation: 301

Equal Height Columns - Flexbox & flex-wrap: wrap

i'm working on a layout and I can't figure out how to get these columns to be equal height, specifically the green areas when the text wraps. Can you help? sandwich & burgers is wrapping

My html template, with more .category-containers inside...

<div class="flex-container">
  <div class="category-container">
    <a href="#" class="img-gallery-col medium-internal-page-static-image" style="background-image: url('http://placehold.it/800/800');">
    </a>
    <h4 class="text-center">Salads &amp; Sides</h4>
  </div>
</div>

My css for the flex-container is...

.flex-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

Here's a coden link if that helps http://codepen.io/johnsonjpj/pen/evopaV?editors=1100

EDIT: I have updated the pen and added a height to the category-container and also made it display: flex. Then I added flex-grow to the h4. How can I get it vertically center inside that green area?

Upvotes: 1

Views: 2946

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 372029

You have no heights defined anywhere in your code. Therefore, there is no reason for your text blocks to have equal height. Their height is defined by the content, which is a default setting (height: auto).

You need to define a height somewhere in your layout, whether high up on the body element or on a container element closer to the text. You can then establish equal heights and use flex properties for vertical and horizontal alignment.

Upvotes: 1

daniel
daniel

Reputation: 112

As you resize the page, there's points which all of the text boxes are on one line, and points where they're all on two lines (resize browser to wide/narrow).

Since you have this issue in a middle ground of sorts, I would recommend using CSS @media queries to change the height property of .category-container h4 to predetermined values which you know will look okay.

Upvotes: -1

Related Questions