Align Flex Items with Different Heights in The Same Container

Align flex items with different heights in the same container

You can achieve the layout by nesting flex containers.

HTML

<div class="flex-container">

  <div class="large-flex-item"></div><!-- flex item #1 -->

  <div class="flex-container-inner"><!-- flex item #2 & nested flex container -->
     <div class="small-flex-item"></div><!-- this flex item and sibling will align... -->
     <div class="small-flex-item"></div><!-- ... in column next to .large-flex-item -->
  </div>

</div>

CSS

 .flex-container {
   display: flex;
   width: 500px;
   margin-right: auto;
   margin-left: auto;
 }

 .large-flex-item {
   flex-basis: 66.667%;
   height: 200px;
   background: #333;
 }

.flex-container-inner {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.small-flex-item {
   flex-basis: 100%;
   height: 100px;
   background: #000;
 }

DEMO

Flex Child Items have Different Heights

It's because you have aligned your items to the centre, remove that from your appShopSummaryProductWrap and your height:100% from appShopSummaryInfo and it will work:

.appShopSummaryContainer .appShopSummaryProductWrap {  background: pink;  width: 100%;  display: flex;  flex-wrap:nowrap;}
.appShopSummaryContainer .appShopSummaryImg {  display:block;  width:40%;  padding-bottom: 26.667%;  background: green;  background-size: cover !important;  background-position: center center !important;}
.appShopSummaryContainer .appShopSummaryInfo {  flex-grow:1;  background: orange;  display: flex;  flex-flow: column wrap;  align-items: flex-start;}
.appShopSummaryContainer .appShopSummaryMoreInfoBtn {  cursor: pointer;  background: #214291;  color: #fff;  padding: 10px;  border-radius: 5px;}

<div class="appShopSummaryContainer">  <!-- FOR EACH THING DO THIS -->  <div class="appShopSummaryProductWrap">    <a href="#" class="appShopSummaryImg" style="background:url('https://cml.sad.ukrd.com/image/394545.jpg')"></a>        <div class="appShopSummaryInfo">      <h3>title here...</h3>      <a href="#" class="appShopSummaryMoreInfoBtn">More Information</a>    </div>  </div>  <!-- ENDFOREACH --></div>

How to deal with flex items having varying height?

You can just remove align-items: center and also use calc() for width of columns. So if you want two columns you can use calc(50% - 10px) where 10px is 5px margin * 2 for left and right side, and for padding you can use box-sizing: border-box.

* {  box-sizing: border-box;}.items {  display: flex;  padding: 10px;  flex-flow: row wrap;}.items span {  border: 1px solid #888;  margin: 5px;  padding: 10px;  flex: 0 0 calc(50% - 10px);}

<div class="items">  <span>First</span>  <span>Second</span>  <span>Third</span>  <span>Fourth</span>  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, dolores!</span>  <span>Sixth</span>  <span>Seventh</span>  <span>Eighth</span></div>

Equal height rows in a flex container

The answer is NO.

The reason is provided in the flexbox specification:

6. Flex Lines

In a multi-line flex container, the cross size of each line is the minimum size necessary to contain the flex items on the line.

In other words, when there are multiple lines in a row-based flex container, the height of each line (the "cross size") is the minimum height necessary to contain the flex items on the line.

Equal height rows, however, are possible in CSS Grid Layout:

• Equal height rows in CSS Grid Layout

Otherwise, consider a JavaScript alternative.

CSS FlexBox - child elements with different height?

Yes.

align-items: flex-start; on your .container will work.

.single_tag {  display: flex;  flex-direction: column;  margin-right: 6px;  background-color: #ADD8E6;  margin-bottom: 6px;  padding: 2px;  border-radius: 5px;  border: 2px solid red;}
.container {  display: flex;  align-items: flex-start;  justify-content: center;}
.dropdown-content {  display: none;  flex-direction: column;}
.dropdown-content_second {  display: none;  flex-direction: column;}
.dropdown-content a:hover {  background-color: #f1f1f1}
.single_tag:hover .dropdown-content {  display: flex;}

<div class="container">  <div class="single_tag">First div    <div class="dropdown-content">      <a href="#">Link 1</a>      <a href="#">Link 2</a>      <a href="#">Link 3</a>    </div>  </div>  <div class="single_tag">Second div    <div class="dropdown-content">      <a href="#">Link 1</a>      <a href="#">Link 2</a>      <a href="#">Link 3</a>      <a href="#">Link 1</a>      <a href="#">Link 2</a>      <a href="#">Link 3</a>    </div>  </div>  <div class="single_tag">Third div    <div class="dropdown-content">      <a href="#">Link 1</a>      <a href="#">Link 2</a>      <a href="#">Link 3</a>    </div>  </div>

How to use flex row to elements with different heights

Another solution (but more a hack for this case than a generic solution) is to keep all what you have and adjust margin of last element.

Of course the margin-top value will depend on ther other values

.container {  display: flex;  flex-flow: row wrap;}.box {  width: 50%;  height: 50px;  background-color: lightgreen;}.box2 {  width: 50%;  height: 25px;  background-color: red;}.box2:last-child {  margin-left:auto;  margin-top:-25px;}

<div class="container">  <div class="box"></div>  <div class="box2"></div>  <div class="box2"></div></div>

Give equal height to children of elements within a flex container

The flex properties on the parent container (container in your example) don't pass down to the child elements, even if they are also containers. Therefore you also need to make the col divs display:flex, as follows:

.col  {
    flex: 1;
    display: flex;           /* make this a flex container so it has flex properties */
    justify-content: center; /* to horizontally center them in this flex display */
    /* REST OF YOUR CSS HERE */ 
}

Note that you also need to add flex: 1; to the content itself so it doesn't shrink, e.g.:

.col-item {
    flex: 1;
    /* REST OF YOUR CSS HERE */ 
}

Working Example with your code:

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}

.col {
  flex: 1;
  background: orange;
  margin: 1px;
  display: flex;
  justify-content: center;
}

.col-item {
  flex: 1;
  margin: 15px;
}

<html>

<body>
  <div class="container">
    <div class="col">
      <div class="col-item" style="background: red;">
        <h2>Column 1</h2>
        <p>Hello World</p>

      </div>
    </div>
    <div class="col">
      <div class="col-item" style="background: red;">
        <h2>Column 2</h2>
        <p>Hello World!</p>
        <p>Hello World!</p>
        <p>Hello World!</p>
        <p>Hello World!</p>

      </div>
    </div>
    <div class="col">
      <div class="col-item" style="background: red;">
        <h2>Column 3</h2>
        <p>Some other text..</p>
        <p>Some other text..</p>
      </div>
    </div>
  </div>
</body>

</html>

Vertically center content with different heights using flex-direction: column

The scope of a flex formatting context is the parent-child relationship.

In other words, flex layout exists only between the flex container and its children.

Descendants beyond the children do not participate in flex layout.

The elements you're targeting are children of a flex item (.site-title), so flex properties don't apply.

You will have to make flex items into flex containers to make flex properties work deeper in the HTML structure.

header {  display: flex;  flex-direction: column;  justify-content: space-around;  align-items: center;  text-align: center;  height: 40em;  background-color: #badabf;}
.site-title {  height: 32em;  background-color: #DEA5A4;  display: flex;                 /* NEW */  flex-direction: column;        /* NEW */  align-items: center;           /* NEW */  justify-content: center;       /* NEW */}
.site-navigation {  height: 8em;  background-color: #AEC6CF;}

<header>  <div class="site-title">    <h1> I am a page title </h1>    <img src="http://www.nintendo.com/images/social/fb-400x400.jpg" width="100" height="100">  </div>  <nav class="site-navigation">     <ul>       <li><a href="#">Home</a></li>       <li><a href="#">About</a></li>       <li><a href="#">History</a></li>       <li><a href="#">Events</a></li>       <li><a href="#">Contact</a></li>    </ul>  </nav></header>

---

Related Topics