How do you use align-self?

Navigation
1

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

    
asked by anonymous 13.04.2017 / 21:06

2 answers

2

The align-self property is used on an item that is descended from an element with display: flex; . As the translated name suggests, it is for "Auto Alignment", that is, it will align only the item and not its descendants.

What it will do is ignore the alignment declarations in the parent element, aligning only the 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 have stated in the parent element ( .parent ) that the alignment will be flex-end (right), in the second element I declare, with the property align-self that it is aligning at the beginning ( flex-start ). This causes it to ignore the parent element declaration and auto-align.

    
13.04.2017 / 21:44
2

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

This is a form applied to items in a flex container so that you can align them within the container, which can be either vertical or horizontal depending on the container flow (either in columns or in rows).

Online 

.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>
    
13.04.2017 / 21:24
Error: android.database.sqlite.SQLiteException: no such column: Not returning the second parameter