CODEWITHSUNDEEP
cssflexboxvertical-alignment
julesbou
julesbou

Reputation: 5780

Align items top and bottom inside same container

I have some items inside a container, there're black and red items:

enter image description here

<div class="container">
  <div class="item black"></div>
  <div class="item black"></div>
  <div class="item red"></div>
  <div class="item red"></div>
  <div class="item black"></div>
  <div class="item red"></div>
</div>

I would like to align black items to the top and red items to the bottom in CSS without modifying the HTML code.

Here's a jsfiddle to experiment https://jsfiddle.net/e72c99c0/.

Upvotes: 1

Views: 364

Answers (1)

JustH
JustH

Reputation: 1402

You can use order to group the items, and a margin-bottom:auto to pin one group to the bottom. 

.container {
  height: 300px;
  width: 40px;
  background: #ddd;
  display: flex;
  flex-direction: column;
}

.item {
  width: 40px;
  height: 20px;
  margin-bottom: 1px;
  border: 1px solid #aaa;
}

.item.black {
  background: #222;
  
}

.black:nth-of-type(5) {
  margin-bottom: auto ;
}

.item.red {
  background: red;
  order:2;
}
<div class="container">
  <div class="item black"></div>
  <div class="item black"></div>
  <div class="item red"></div>
  <div class="item red"></div>
  <div class="item black"></div>
  <div class="item red"></div>
</div>

Upvotes: 3

Related Questions