Vertically center align last item - Flexbox

Question

I have three elements, first two elements are columns while the last is a row. Tried a couple of different things but I`m not able to get the result I desire

.container {
  display: flex;
  flex-direction: column;
}

.element {
  display: flex;
}

.icon {
  display: flex margin-left: auto;
  align-content: center;
}

<div className="container">
  <div className="element">Name Detail</div>
  <div className="element">Salary Detail</div>
  <div className="icon">(Here is a svg)</div>
</div>

Result I want:

Emanuele Parisio · Answer 1 · 2023-03-22T14:19:57.423

.container {
  display: flex;
  align-content: center;
}
.col {
  display: flex;
  flex-direction: column;
  flex: 1 1 100%;
}
.element {
  display: flex;
  margin: 10px 10px 10px 0;
  border: 1px solid black;
}
.icon {
  display: flex;
  margin-left: auto;
  border: 1px solid black;
  flex: 1 0 auto;
  align-items: center;
  margin: 10px 0 10px 10px;
}

<div class="container">
  <div class="col">
    <div class="element">Name Detail</div>
    <div class="element">Salary Detail</div>
  </div>
  <div class="icon">(Here is a svg)</div>
</div>

with last element dynamic spacing and text centering

score -1 · Answer 2 · answered Mar 22 '23 at 12:42

You should put your .elements in their own container.

Html

  <div class="container">

    <div class="col-container">    
      <div class="element">Name Detail</div>
      <div class="element">Salary Detail</div>
    </div>

    <div class="icon">(Here is a svg)</div>

  </div>

Css

  .container {
    display: flex;
    flex-direction: row;
    align-items:center;
    height:100px;
    width:600px;
  }

  .col-container {
    display: flex;
    flex-direction: column;
    justify-content:space-between;
    height:100%;
  }

  .element{
    display: flex;
    background:cadetblue;
    height: 25px;
  }

score -1 · Answer 3 · answered Mar 22 '23 at 12:43

By looking at your desired result, one way to do it would be something like this.

<div className="container">
  <div className="elementWrapper">
    <div className="element">Name Detail</div>
    <div className="element">Salary Detail</div>
  </div>
  <div className="icon">(Here is a svg)</div>
</div>

Where your container is actually flex-direction: row and the class elementWrapper would be flex-direction: column:

.container {
  display: flex;
}

.elementWrapper {
  display: flex;
  flex-direction: column;
}

score -1 · Answer 4 · answered Mar 22 '23 at 12:46

The following code should help:

.container {
  display: flex;
  padding: 1rem;
  border: 1px solid black;
 }
 
 .element, .icon {
   border: 1px solid black;
 }
  
 .column {
   width: 100%;
 }

<div class="container">
  <div class="column">
    <div class="element">Name Detail</div>
    <div class="element">Salary Detail</div>
   </div>
  <div class="icon">(Here is a svg)</div>
</div>

Hope it helps!

Vertically center align last item - Flexbox

4 Answers4