How do you use align-self?

Question

I’ve used many alignments: center, left etc... but never align-self. How can I use it? I would like to see an application I use align-self.

Answer 1

The estate align-self is used in an item that is descended from an element with display: flex;. As the translated name suggests, it serves for "Auto-alignment", i.e., it will align only the item and not its descendants.

What it will do is ignore the alignment statements in the parent element, aligning only the parent element itself. See the example below:

.parent {
  display: flex;
  width: 400px;
  height: 200px;
  flex-direction: column;
  background: pink;
  align-items: flex-end;
}

.item {
    background: #cde;
    padding: 8px 16px;
    display: inline-block;
    margin: 0 0 16px;
}

.item-self {
  align-self: flex-start;
}

<div class="parent">
  <div class="item">Primeiro</div>
  <div class="item item-self">Segundo</div>
  <div class="item">Terceiro</div>
</div>

As much as I’ve stated in the parent element (.parent) that the alignment will be flex-end (on the right), in the second element I declare, with the property align-self that he be lining up at the beginning (flex-start). This causes him to ignore the statement of the parent element and self-align.

Answer 2

align-self is only used in models that use display: flex.

It is a form applied in the items of a flex container for you to align them within the container, which can be both vertical and horizontal depending on the container flow (whether in columns or rows).

Inline

.container {
  display: flex;
  flex-flow: row wrap; /* Note o row */
  width: 100%;
  height: 100vh;
  background: black;
}

.item {
  display: flex;
  align-self: center;
  height: 100px;
  width: 100px;
  background: blue;
}

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

In Column

.container {
  display: flex;
  flex-flow: column wrap; /* Note o column */
  width: 100%;
  height: 100vh;
  background: black;
}

.item {
  display: flex;
  align-self: center;
  height: 100px;
  width: 100px;
  background: blue;
}

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