flexbox:align-self

Demo of align-self's relationship with margin

by yangchenyun

HTML

<body>
  <div class="flex-container">
    <div id="item1" class="flex-item">1</div>
    <div id="item2" class="flex-item">2</div>
    <div id="item3" class="flex-item">3</div>
    <div id="item4" class="flex-item">4</div>
    <div id="item5" class="flex-item">5</div>
  </div>
</body>

CSS

.flex-container {
  background-color: #f7f7f7;
  padding: 2px;
  width: 800px;
  height: 200px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: flex-start;
  /* Interesting behavior */
  /* align-content: auto; */
}

.flex-item {
  color: white;
  flex-basis: 150px;
  align-self: stretch;
  min-height: 30px;
  /* styles for inner text */
  display: flex;
  justify-content: center;
  align-items: center;
}

#item1 {
  background-color: hsla(246, 32%, 30%, 1);
}

#item2 {
  background-color: hsla(246, 32%, 35%, 1);
}

#item3 {
  background-color: hsla(246, 32%, 40%, 1);
  margin-top: auto;
  align-self: stretch;
}

#item4 {
  background-color: hsla(246, 32%, 45%, 1);
  margin-bottom: auto;
  align-self: stretch;
}

#item5 {
  background-color: hsla(246, 32%, 50%, 1);
  margin: auto;
  align-self: stretch;
}

#item6 {
  background-color: hsla(246, 32%, 55%, 1);
}

#item7 {
  background-color: hsla(246, 32%, 60%, 1);
}

#item8 {
  background-color: hsla(246, 32%, 65%, 1);
}

#item9 {
  background-color: hsla(246, 32%, 70%, 1);
}

#item10 {
  background-color: hsla(246, 32%, 75%, 1);
}