Question

我可以使用flexbox将所有元素对齐到容器的底部。但是我不知道如何将这些元素之一对准容器的顶部。例如，在此示例中，我无法将文本放在容器的顶部。

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>

Answer 1

在flex容器中时，您可以使用margin: auto样式将一个项目推到容器的一侧或另一侧。在这种情况下，如果您希望top元素拥抱容器的顶部，请在top元素上使用margin-bottom: auto。

以下是您的摘录内容：

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>

如何将元素与容器的顶部和底部对齐？

1 个答案: