Question 45968 in CSS Question posted in
Some basic documentation can be found here.

Vertically center align last item – Flexbox – CSS

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:
enter image description here

Tags:

4

Answers


  1. 0

    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;
  }
    Login or Signup to reply.
  2. 0

    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;
}
    Login or Signup to reply.
  3. 0

    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!

    Login or Signup to reply.
  4. 0 
    .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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search