Flebox one item center, second end

Asked Jan 01 '20 at 20:12

Active Jan 01 '20 at 20:13

Viewed 14 times

I have 2 items with the following structure:

<div class="d-flex align-items-center">
  <div class="container">
    <div class="d-flex flex-column align-items-center">

        <div class="logo">
            Center
        </div>

        <div class="scroll">
            <a href="#about-us">
                End
            </a>
        </div>
    </div>
  </div>
</div>

Now I need Center to be centered horizontally & vertically BUT End should be on bottom of page.
Is it possible to do this with Flex? I'm using Bootstrap 4.

JSFiddle

edited Jan 01 '20 at 20:13

Erik Philips

53,428
11
128
150

asked Jan 01 '20 at 20:12

Damian

Should `End` be centered as well? The problem is that the your root container is; A not the height of the page, and B your flex container isn't set to grow/fill vertically. – Erik Philips Jan 01 '20 at 20:13
@ErikPhilips Yes but only horizontally. – Damian Jan 01 '20 at 20:15
take the time to read the accepted answer and you will find your use case there – Temani Afif Jan 01 '20 at 20:21

Flebox one item center, second end

0 Answers0