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

Question

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>

score 2 · Answer 1 · answered Nov 22 '22 at 16:50

2

This seems to work nicely

.flexTest div {
    background-color: #EB710F;
    padding: 5px;
    margin: 5px;
    height: 50px;
    border: 1px solid #D2D2D2;
    cursor: pointer;
    display: flex;
    flex-direction: column-reverse;
}

answered Nov 22 '22 at 16:50

Coopero

296
2
10

score 1 · Accepted Answer · answered Nov 22 '22 at 16:53

1

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

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

answered Nov 22 '22 at 16:53

marcos.efrem

757
3
13

It works great too!!! Thanks to both of You! +1 – tatactic Nov 22 '22 at 17:44

score 0 · Answer 3 · answered Nov 22 '22 at 16:52

You can make the flex children flex containers themselves. Note that I've modified the CSS selector to only target children of .flexTest.

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;
  display: flex;
  flex-direction: column;
  justify-content: end;
}

<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>

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

3 Answers3