Last Updated
Viewed 17 Times

As you can see in the snippet below, the dots part of foo-wrapper do not follow the vertical alignment of the text labels which are part of bar-wrapper. Yet, this is expected, due to the :nth-child(i) rules.

How can I make the dots, which are the children of a different container which is subsequently a child of a horizontal flexbox (the parent-wrapper), follow the vertical alignment of the children from the other container?

Do I have to renounce flexbox altogether and use something like the grid layout?

<!DOCTYPE html>

<head>
  <style>
    .parent-wrapper {
      align-items: stretch;
      display: flex;
      flex-flow: row nowrap;
      height: 256px;
      width: 100%;
    }
    
    .foo-wrapper {
      background-color: orange;
      margin: 1.5rem;
      width: 2px;
    }
    
    .dot {
      background-color: #ebf0ff;
      border-radius: 0.5rem;
      height: 1rem;
      width: 1rem;
    }
    
    .foo-wrapper div:nth-child(1) {
      margin-top: 1rem;
    }
    
    .foo-wrapper div:nth-child(2) {
      margin-top: 1rem;
    }
    
    .foo-wrapper div:nth-child(3) {
      margin-top: 1rem;
    }
    
    .bar-wrapper {
      border: 1px solid green;
      display: flex;
      flex-flow: column nowrap;
      margin: 1.5rem;
      flex-grow: 1;
    }
       
    .bar-wrapper div:nth-child(1) {
      margin-top: 1rem;
    }
    
    .bar-wrapper div:nth-child(2) {
      margin-top: 2rem;
    }
    
    .bar-wrapper div:nth-child(3) {
      margin-top: 4rem;
    }
  </style>
</head>

<body>
  <div class="parent-wrapper">
    <div class="foo-wrapper">
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
    <div class="bar-wrapper">
      <div>Lorem</div>
      <div>ipsum</div>
      <div>dolores</div>
    </div>
  </div>
</body>

I'm trying to center the CONTENTS of a flexbox item while using justify-content:stretch; It appears that the old trick of using display:table-cell;vertical-align:middle; doesn't work in this situation. What does?

.flex-container {
    display:flex;
    align-items:center;
    justify-content:stretch;
}
.flex-item {
    align-self:stretch;
}

<div class="flex-container">
    <div class="flex-item">I want to be vertically centered! But I'm not.</div>
</div>

BEFORE YOU ANSWER: There seems to be a lot confusion about what I'm asking. I'm trying to center the CONTENTS of the flex-item. With justify-content:stretch, the height of the item will stretch to the full height of the container, but the contents of the item floats to the top (at least in Chrome).

"A picture is worth a thousand words." (A) is what I've already got. (B) is what I want. enter image description here

Similar Question 2 : Flexbox reorder items vertically

I have been trying to figure out how to rearrange two items vertically. I remember doing something like this a while ago with flexbox and have looked up ways to do it again, however when I try and implement the flexbox and give the items an order number nothing happens. What I need is for .trail-title to stack below .trail-items.

How do I get them to switch places vertically using flexbox?

Here is a JSFidde I created: https://jsfiddle.net/tb1sv7n8/15/

#flash-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  -webkit-flex-flow: column wrap;
  flex-flow: column wrap;
  flex-direction: column;
}

.trail-items {
  order: 1;
  height: 1em;
}

.trail-title {
  height: 1em;
}

.breadcrumbs,
.breadcrumbs a {
  color: #544f47;
  font-size: .9em;
  font-weight: normal;
}
<nav id="flash-breadcrumbs" class="breadcrumb-trail breadcrumbs">
  <div class="tg-container">
    <h1 class="trail-title">Title of Article: The Love of This</h1>
    <ul class="trail-items">
      <li class="trail-item"><span>This here is the trail: The Love of This</span></li>
    </ul>
  </div>
</nav>

I need to align a list of items that should baseline from a title that varies the length and is bottom aligned. The image should always be on top position.

I've tried setting the list container as display:table and the items as display: table-cell, vertical-align: baseline. I could set the items that are table-cell to have position: relative, and set the image to be position:absolute and top:0 but that will fail as soon as the title is very long.

Basically, this is the code:

<div class="container">
    <div class="item">
    <img src="http://dummyimage.com/100x60/000/fff" alt="ALT">
        <h2>
        title
        </h2>
        <p>Lorem<br>ipsum</p>
    </div>
    <div class="item">
    <img src="http://dummyimage.com/100x60/000/fff" alt="ALT">
        <h2>
        longer title
        </h2>
        <p>Lorem<br>ipsum</p>
    </div>
    <div class="item">
    <img src="http://dummyimage.com/100x60/000/fff" alt="ALT">
        <h2>
        long long long long title
        </h2>
        <p>Lorem<br>ipsum</p>
    </div>
    <div class="item">
    <img src="http://dummyimage.com/100x60/000/fff" alt="ALT">
        <h2>
        not long title
        </h2>
        <p>Lorem<br>ipsum</p>
    </div>
</div>
<style>
.container {
    display: table;
    border: 1px solid grey;
}
.item {
  background: yellow;
    display: table-cell;
    padding: 10px;
    vertical-align: bottom;
    max-width:100px;
}
.item h2 {
    vertical-align: bottom; /* only needed for removing a few pixel gap between image and paragraph */
    border-bottom: 1px solid;
    padding-bottom:10px;
}
.item p {
    margin: 0;
    text-align: left;
}
</style>

http://jsfiddle.net/q0nbp54v/

See image below what I've done so far. image of my progress

Similar Question 6 (2 solutions) : Central vertical align within flexbox

Similar Question 7 (2 solutions) : Vertically centering text inside flexbox item

Similar Question 8 (2 solutions) : Can't get flexbox to vertically justify elements

Similar Question 9 (4 solutions) : vertical-align property not working in flexbox

cc