How to align my text to the bottom in my divs in a flexbox?

Issue

I’m not able to align my text to the bottom of the divs in my flex content. I’m new to CSS and any help will be appreciated.

Thank you for your time and kindness.

body,
html {
  background-color: #666666;
  box-sizing: border-box;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
  color: #ffffff;
}

.flexTest {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  border: 1px solid #D2D2D2;
  background-color: #000000;
}

.flexTest div {
  background-color: #EB710F;
  padding: 5px;
  margin: 5px;
  height: 50px;
  border: 1px solid #D2D2D2;
  cursor: pointer;
}
<div id="div1" class="flexTest">
  <div>
    Tatactic - Nicolas 1
  </div>
  <div>
    Tatactic - Nicolas 2
  </div>
  <div>
    Tatactic - Nicolas 3
  </div>
  <div>
    Tatactic - Nicolas 4
  </div>
  <div>
    Tatactic - Nicolas 5
  </div>
  <div>
    Tatactic - Nicolas 6
  </div>
  <div>
    Tatactic - Nicolas 7
  </div>
  <div>
    Tatactic - Nicolas 8
  </div>
</div>

Solution

I think what you want to do is thiis… add thies two properties

.flexTest div { 
    display: flex;
    align-items: flex-end;
}

enter image description here

Answered By – marcos.efrem

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published