Camandros Camandros - 4 months ago 21
CSS Question

Force item on flexbox to stay on top

The idea here is to have a placeholder with a set of links on the left and an image on the right. As you press the links the image and the description below changes.

So far I have this:



<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
flex-wrap: wrap;
}

.flex-item {
display:flex;
align-items: center;
margin: 3px;
padding: 10px 0 0 10px;
}

.flex-item img{
flex-grow:0;
flex-shrink:0;
}

span {
margin-top: 0px;
padding-right: 1em;
}
</style>
</head>
<body>
<h2>Title</h2>
<div class="flex-container">
<div class="flex-item">
<span>
<a href="#">link text</a></p>
<a href="#">link text</a></p>
<a href="#">link text</a></p>
</span>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Iceberg_with_hole_near_Sandersons_Hope_2007-07-28_2.jpg/800px-Iceberg_with_hole_near_Sandersons_Hope_2007-07-28_2.jpg">
</div>
</div>
<span>Description description description description description description description description description description description description description description description description description description </span>
</body>
</html>





How can I force the links (the
span
element) to align on the top of the parent (same height as the start of the image) instead of centered on the middle?

Answer

Remobe the align-items value

.flex-item {
  display: flex;
   /*align-items: center; */ /* remove this */
  margin: 3px;
  padding: 10px 0 0 10px;
}

.flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  align-items: center;
  flex-wrap: wrap;
}
.flex-item {
  display: flex;
  /*align-items: center; */
  /* remove this */
  margin: 3px;
  padding: 10px 0 0 10px;
}
.flex-item img {
  flex-grow: 0;
  flex-shrink: 0;
}
span {
  margin-top: 0px;
  padding-right: 1em;
}
 <h2>Title</h2>
<div class="flex-container">
  <div class="flex-item">
    <span>
					<a href="#">link text</a>
					<a href="#">link text</a>
					<a href="#">link text</a>
	        	</span>
<img src="http://www.fillmurray.com/g/640/300">>
  </div>
</div>
<p>Description description description description description description description description description description description description description description description description description description</p>