How can I align the last child of a flex element to the bottom?

Question

Current: Desired:

Can this be achieved using the flex —or grid— model? Or I must rewrite the structure using a different approach?

This is the code:

.sections {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0em -1em 2em -1em;
}

.box {
  position: relative;
  display: inline-block;
  flex-grow: 0;
  min-width: 300px;
  max-width: 420px;
  margin: 1em;
  border-radius: 10px;
  padding: 1em;
  vertical-align: top;
}

.elements {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin: 1em 0em 0em 0em;
}

.itm {
  position: relative;
  display: inline-block;
  flex-grow: 0;
  width: 100px;
  margin: 1em;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0px 5px 8px 2px rgb(0 0 0 / 20%);
  padding: 0.5em;
  vertical-align: top;
}

<div class="section">
  <div class="box">
    <p>Long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text </p>
    <div class="elements">
      <div class="itm">
        <p>asdf asdf</p>
      </div>
      <div class="itm">
        <p>asdf asdf</p>
      </div>
      <div class="itm">
        <p>asdf asdf</p>
      </div>
    </div>
  </div>
  <div class="box">
    <p>Medium text medium text medium text medium text medium text medium text medium text medium text medium text medium text medium text </p>
    <div class="elements">
      <div class="itm">
        <p>asdf asdf</p>
      </div>
      <div class="itm">
        <p>asdf asdf</p>
      </div>
      <div class="itm">
        <p>asdf asdf</p>
      </div>
    </div>
  </div>
  <div class="box">
    <p>Short text short text </p>
    <div class="elements">
      <div class="itm">
        <p>asdf asdf</p>
      </div>
      <div class="itm">
        <p>asdf asdf</p>
      </div>
      <div class="itm">
        <p>asdf asdf</p>
      </div>
    </div>
  </div>
</div>

Part of the problem is that `sections =/= section`. You have a misspelling in your class. — isherwood, Jun 14 '22 at 19:56

score 2 · Accepted Answer · answered Jun 14 '22 at 19:56

You could add the following to have your paragraph tag take up space to push the items down by adding:

.box > p {
  flex: 1;
}

.section {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.box {
    display: flex;
    flex-direction: column;
    border: 2px solid lightcoral;
    min-width: 300px;
    max-width: 420px;
    margin: 1em;
    border-radius: 10px;
    padding: 1em;
}

.box > p {
  flex: 1;
}

.elements {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin: 1em 0em 0em 0em;
}

.itm {
    position: relative;
    display: inline-block;
    margin: 1em;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0px 5px 8px 2px rgb(0 0 0 / 20%);
    padding: 0.5em;
}

<div class="section">
    <div class="box">
        <p>Long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text </p>
        <div class="elements">
            <div class="itm"><p>asdf asdf</p></div>
            <div class="itm"><p>asdf asdf</p></div>
            <div class="itm"><p>asdf asdf</p></div>
        </div>
    </div>
    <div class="box">
        <p>Medium text medium text medium text medium text medium text medium text medium text medium text medium text medium text medium text </p>
        <div class="elements">
            <div class="itm"><p>asdf asdf</p></div>
            <div class="itm"><p>asdf asdf</p></div>
            <div class="itm"><p>asdf asdf</p></div>
        </div>
    </div>
    <div class="box">
        <p>Short text short text </p>
        <div class="elements">
            <div class="itm"><p>asdf asdf</p></div>
            <div class="itm"><p>asdf asdf</p></div>
            <div class="itm"><p>asdf asdf</p></div>
        </div>
    </div>
</div>

Good idea, but I'd consider wrapping the paragraph with a div having those styles in case there are multiple. Then it still works. — isherwood, Jun 14 '22 at 20:05

score 1 · Answer 2 · answered Jun 14 '22 at 20:00

Just make the content boxes flex columns and apply justify-content: space-between. That spreads the two child elements. If you happen to have multiple paragraphs, put them in a single div to keep flex children to two.

Also note the removal of vertical-align, position, and display properties. They generally aren't needed with flex layouts.

Some styles hidden for demonstration purposes.

.section {
  display: flex;
  flex-direction: row;
  /* flex-wrap: wrap; */
  justify-content: flex-start;
  margin: 0em -1em 2em -1em;
}

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 0;
  /* min-width: 300px; */
  /* max-width: 420px; */
  margin: 1em;
  border-radius: 10px;
  padding: 1em;
}

.elements {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin: 1em 0em 0em 0em;
}

.itm {
  flex-grow: 0;
  width: 100px;
  margin: 1em;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0px 5px 8px 2px rgb(0 0 0 / 20%);
  padding: 0.5em;
  vertical-align: top;
}

<div class="section">
  <div class="box">
    <p>Long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text </p>
    <div class="elements">
      <div class="itm">
        <p>asdf asdf</p>
      </div>
      <div class="itm">
        <p>asdf asdf</p>
      </div>
      <div class="itm">
        <p>asdf asdf</p>
      </div>
    </div>
  </div>
  <div class="box">
    <p>Medium text medium text medium text medium text medium text medium text medium text medium text medium text medium text medium text </p>
    <div class="elements">
      <div class="itm">
        <p>asdf asdf</p>
      </div>
      <div class="itm">
        <p>asdf asdf</p>
      </div>
      <div class="itm">
        <p>asdf asdf</p>
      </div>
    </div>
  </div>
  <div class="box">
    <p>Short text short text </p>
    <div class="elements">
      <div class="itm">
        <p>asdf asdf</p>
      </div>
      <div class="itm">
        <p>asdf asdf</p>
      </div>
      <div class="itm">
        <p>asdf asdf</p>
      </div>
    </div>
  </div>
</div>

score 0 · Answer 3 · answered Jun 14 '22 at 19:38

0

Try adding margin-top: 5px; , to the "itm" class

.itm {
    margin-top: 5px;
    position: relative;
    display: inline-block;
    flex-grow: 0;
    width: 100px;
    margin: 1em;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0px 5px 8px 2px rgb(0 0 0 / 20%);
    padding: 0.5em;
    vertical-align: top;
}

answered Jun 14 '22 at 19:38

Ryley Keegan

11
4

Padding and margin aren't effective alignment mechanisms. You should copy the snippet down to demonstrate your solution. – isherwood Jun 14 '22 at 20:05

How can I align the last child of a flex element to the bottom?

3 Answers3