How can I align elements to the top and bottom of my container?

Question

I can align all elements to the bottom of my container using flexbox. But I can't work out how to align one of those elements to the top of the container. For example, I can't get the text to the top of the container in this example.

jQuery(document).ready(function($) {
      $('.slider').slick({
        speed: 500,
        slidesToShow: 3
    });
});

html, body {
  background: #102131;
  color: white;
}

.container {
  position: relative;
  height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}


.slick-slider {
  background: #3a8999;
  font-size: 20px;
  text-align: center;
  width: 90%
}

<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<div class="container">

  <div>
    <h1>This text should go to the top </h1>
  </div>

  <div class="slider" data-slick="{'arrows': true}">
    <div>Slider stays directly above text below</div>
    <div>Slider stays directly above text below</div>
    <div>Slider stays directly above text below</div>
    <div>Slider stays directly above text below</div>
    <div>Slider stays directly above text below</div>
  </div>
 
 <div>
  <h1>This text should stay at the bottom</h1>
 </div>
 
</div>

score 1 · Accepted Answer · answered May 01 '20 at 18:57

When inside a flex container, you can use the margin: auto style to push an item to one side of the container or the other. In this case, if you want the top element to hug the top of the container, use margin-bottom: auto on the top element.

Here's your snippet with that addition:

jQuery(document).ready(function($) {
      $('.slider').slick({
        speed: 500,
        slidesToShow: 3
    });
});

html, body {
  background: #102131;
  color: white;
}

.container {
  position: relative;
  height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.hug-top {
  margin-bottom: auto;
}

.slick-slider {
  background: #3a8999;
  font-size: 20px;
  text-align: center;
  width: 90%
}

<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<div class="container">

  <div class="hug-top">
    <h1>This text should go to the top </h1>
  </div>

  <div class="slider" data-slick="{'arrows': true}">
    <div>Slider stays directly above text below</div>
    <div>Slider stays directly above text below</div>
    <div>Slider stays directly above text below</div>
    <div>Slider stays directly above text below</div>
    <div>Slider stays directly above text below</div>
  </div>
 
 <div>
  <h1>This text should stay at the bottom</h1>
 </div>
 
</div>

How can I align elements to the top and bottom of my container?

1 Answers1