Allineamento di un singolo elemento nel modello flex in CSS

Le seguenti proprietà, che studieremo, non sono più impostate sul genitore degli elementi flex, ma sugli elementi stessi. Esaminiamo la proprietà align-self, che allinea un singolo blocco lungo l'asse trasversale.

Supponiamo di avere blocchi flex, disposti in una riga. Allineamoli al centro verticalmente, impostando align-items sul valore center, e diamo al secondo elemento una classe aggiuntiva elem e per esso impostiamo un allineamento diverso, ad esempio, attacchiamolo al bordo superiore.

Per fare ciò, per il nostro elemento con classe elem impostiamo la proprietà align-self sul valore flex-start:

html<div class="parent">
  <div class="child">1</div>
  <div class="child elem">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
</div>

css.parent {
  display: flex;
  align-items: center;
  width: 300px;
  height: 200px;
  border: 1px solid red;
}
.child {
  width: 50px;
  height: 50px;
  border: 1px solid green;
}
.elem {
  align-self: flex-start;
}

Результат: