Using CSS flex-end on images

Question

I have a container named section-a that has a height of 100vh and it has 3 items and I would like to align my last item to the end of the view port height. I have tried adding the property of align-self:flex-end but I don't see any changes. Anyone able to spot where have I done incorrectly?

.section-a {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.hero {
  height: 250px;
  width: 100%;
  align-self: flex-end;
}

.hero img {
  max-height: 100%;
}

<section id="section-a">
  <div class="nav"> ... </div< <div class="content"> ... </div>
  <div class="hero">
    <img src="hero.svg">
  </div>
</section>

Voting to Close as this question was caused by a problem that can no longer be reproduced or a simple typographical error. While similar questions may be on-topic here, this one was resolved in a manner unlikely to help future readers. — Paulie_D, Jan 08 '19 at 15:04
Possible duplicate of [In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?](https://stackoverflow.com/questions/32551291/in-css-flexbox-why-are-there-no-justify-items-and-justify-self-properties) — Nick is tired, Jan 08 '19 at 15:29

score 0 · Accepted Answer · answered Jan 08 '19 at 14:35

First of all you are adding an id in your HTML (id="section-a") but you are targeting as a class in your CSS(.section-a);

Secondly you can just go with margin-top: auto

.hero{
  // remove align-self;
  margin-top: auto;
}

you are in flex-direction: column align-self: flex-end will move the content to the right, but because you have width:100%; it won't do anything cause it will get the entire screen;

Spitzbueb · Answer 2 · 2019-01-08T15:51:52.843

-1

You cannot position some items at the end and some at the start on the main axis with pure flex-box. However, you can use margin-top: auto to move it to the bottom. As pointed out by here.

#section-a {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.hero{
    height:50px;
    width:100%;
    margin-top: auto;
    background-color: red;
}

.hero img{
    max-height:100%;
}

<section id="section-a">
    <div class="nav"> ... </div>
    <div class="content"> ... </div>
    <div class="hero">
        <img src="hero.svg">
    </div>
</section>

edited Jan 08 '19 at 15:51

answered Jan 08 '19 at 15:24

Spitzbueb

5,233
1
20
38

1

`You cannot position some items at the end and some at the start on the main axis.` this is false, check this:https://stackoverflow.com/q/32551291/8620333 – Temani Afif Jan 08 '19 at 15:28
@TemaniAfif There is no `justify-self` as they discuss in the post you linked. They're discussing a hypothetical use of `justify-self`, so I do not know you think this might solves the problem. Anyway, if you have a solution on how to do it, I'd be delighted to hear it. – Spitzbueb Jan 08 '19 at 15:42
1

don't simply read the title, read all the question/answer ... all the flexbox features are there with all the alignment possibilities – Temani Afif Jan 08 '19 at 15:46
1

You're right. I only read the first 2 answers (they're enough text on their own ;). It's not possible with pure `flex-box` though. I adjusted my answer, thank you. – Spitzbueb Jan 08 '19 at 15:53

Using CSS flex-end on images

2 Answers2