Flexbox - Alinear uno mismo

Esta propiedad es similar a align-items, pero aquí se aplica a elementos flexibles individuales.

Usage -

align-self: auto | flex-start | flex-end | center | baseline | stretch;

Esta propiedad acepta los siguientes valores:

  • flex-start - El artículo flexible se alineará verticalmente en la parte superior del contenedor.

  • flex-end - El artículo flexible se alineará verticalmente en la parte inferior del contenedor.

  • flex-center - El artículo flexible se alineará verticalmente en el centro del contenedor.

  • Stretch - El elemento flexible se alineará verticalmente de manera que ocupe todo el espacio vertical del contenedor.

  • baseline - El elemento flexible se alineará en la línea base del eje transversal.

inicio flexible

Al pasar este valor a la propiedad align-self, un elemento flexible particular se alineará verticalmente en la parte superior del contenedor.

El siguiente ejemplo demuestra el resultado de pasar el valor flex-start al align-self propiedad.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta; align-self:start;}
      .box5{background:yellow;}
      .box6{background:pink;}
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         border:3px solid black;
         align-items:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Producirá el siguiente resultado:

extremo flexible

Al pasar este valor a la propiedad align-self, un elemento flexible en particular se alineará verticalmente en la parte inferior del contenedor.

El siguiente ejemplo demuestra el resultado de pasar el valor flex-end al align-self propiedad.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta; align-self:flex-end;}
      .box5{background:yellow;}
      .box6{background:pink;}
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         border:3px solid black;
         align-items:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Producirá el siguiente resultado:

centrar

Al pasar el valor center a la propiedad align-self, un elemento flexible en particular se alineará verticalmente en el centro del contenedor.

El siguiente ejemplo demuestra el resultado de pasar el valor center al align-self propiedad.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta; align-self:center;}
      .box5{background:yellow;}
      .box6{background:pink;}
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         border:3px solid black;
         align-items:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Producirá el siguiente resultado:

tramo

Al pasar este valor a la propiedad align-self, un elemento flexible en particular, se alineará verticalmente de modo que llene todo el espacio vertical del contenedor.

El siguiente ejemplo demuestra el resultado de pasar el valor de estiramiento al align-self propiedad.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta; align-self:stretch;}
      .box5{background:yellow;}
      .box6{background:pink;}
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         border:3px solid black;
         align-items:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Producirá el siguiente resultado: