La propiedad align-self en CSS se usa para alinear los elementos seleccionados en el contenedor flexible de muchas maneras diferentes, como extremo flexible, centro, inicio flexible, etc.
Sintaxis:
align-self: auto|normal|self-start|self-end|stretch|center
|baseline, first baseline, last baseline|flex-start
|flex-end|baseline|safe|unsafe;
Valores de propiedad: auto: esta propiedad se usa para heredar su propiedad de elementos de alineación del contenedor principal o se extiende si no tiene un contenedor principal. Es un valor predeterminado.
- Sintaxis:
align-self: auto;
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | align-self Property
</title>
<style>
#geeks {
width: 250px;
height: 200px;
border: 4px solid black;
display: -webkit-flex;
-webkit-align-items: flex-start;
display: flex;
align-items: flex-start;
}
#geeks div {
-webkit-flex: 2;
flex: 1;
}
#sudo {
-webkit-align-self: auto;
align-self: auto;
}
</style>
</head>
<body>
<center>
<h2 style="color:green;">
GeeksForGeeks
</h2>
<h3 style="color:green;">
align-self:auto;
</h3>
<div id="geeks">
<div style="background-color:green;color:white;">
Geeks
</div>
<div style="background-color:lightblue;"
id="sudo">
For
</div>
<div style="background-color:coral;">
Geeks
</div>
<div style="background-color:lightblue;">
Sudo
</div>
<div style="background-color:tomato;">
Placement
</div>
</div>
</center>
</body>
</html>
- Producción:
estirar: esta propiedad se utiliza para colocar los elementos para que se ajusten al contenedor.
- Sintaxis:
align-self: stretch;
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | align-self Property
</title>
<style>
#geeks {
width: 250px;
height: 200px;
border: 4px solid black;
display: -webkit-flex;
-webkit-align-items: flex-start;
display: flex;
align-items: flex-start;
}
#geeks div {
-webkit-flex: 2;
flex: 1;
}
#sudo {
-webkit-align-self: stretch;
align-self: stretch;
}
</style>
</head>
<body>
<center>
<h2 style="color:green;">
GeeksForGeeks
</h2>
<h3 style="color:green;">
align-self:stretch;
</h3>
<div id="geeks">
<div style="background-color:green;color:white;">
Geeks</div>
<div style="background-color:lightblue;"
id="sudo">
For
</div>
<div style="background-color:coral;">
Geeks
</div>
<div style="background-color:lightblue;">
Sudo
</div>
<div style="background-color:tomato;">
Placement
</div>
</div>
</center>
</body>
</html>
- Producción:
Centro: esta propiedad se utiliza para colocar el elemento en el centro del contenedor flexible.
- Sintaxis:
align-self: center;
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | align-self Property
</title>
<style>
#geeks {
width: 250px;
height: 200px;
border: 4px solid black;
display: -webkit-flex;
-webkit-align-items: flex-start;
display: flex;
align-items: flex-start;
}
#geeks div {
-webkit-flex: 1;
flex: 1;
}
#sudo {
-webkit-align-self: center;
align-self: center;
}
</style>
</head>
<body>
<center>
<h2 style="color:green;">
GeeksForGeeks
</h2>
<h3 style="color:green;">
align-self:center;
</h3>
<div id="geeks">
<div style="background-color:green;color:white;">
Geeks
</div>
<div style="background-color:lightblue;"
id="sudo">
For
</div>
<div style="background-color:coral;">
Geeks
</div>
<div style="background-color:lightblue;">
Sudo
</div>
<div style="background-color:tomato;">
Placement
</div>
</div>
</center>
</body>
</html>
- Producción:
- Sintaxis:
align-self: flex-start;
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | align-self Property
</title>
<style>
#geeks {
width: 250px;
height: 200px;
border: 4px solid black;
display: -webkit-flex;
-webkit-align-items: flex-start;
display: flex;
align-items: flex-start;
}
#geeks div {
-webkit-flex: 1;
flex: 1;
}
#sudo {
-webkit-align-self: flex-start;
align-self: flex-start;
}
</style>
</head>
<body>
<center>
<h2 style="color:green;">
GeeksForGeeks
</h2>
<h3 style="color:green;">
align-self:flex-start;
</h3>
<div id="geeks">
<div style="background-color:green;color:white;">
Geeks
</div>
<div style="background-color:lightblue;"
id="sudo">
For
</div>
<div style="background-color:coral;">
Geeks
</div>
<div style="background-color:lightblue;">
Sudo
</div>
<div style="background-color:tomato;">
Placement
</div>
</div>
</center>
</body>
</html>
- Producción:
flex-end: esta propiedad se utiliza para colocar el elemento seleccionado al final del contenedor flexible.
- Sintaxis:
align-self: flex-end;
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | align-self Property
</title>
<style>
#geeks {
width: 250px;
height: 200px;
border: 4px solid black;
display: -webkit-flex;
-webkit-align-items: flex-start;
display: flex;
align-items: flex-start;
}
#geeks div {
-webkit-flex: 1;
flex: 1;
}
#sudo {
-webkit-align-self: flex-end;
align-self: flex-end;
}
</style>
</head>
<body>
<center>
<h2 style="color:green;">
GeeksForGeeks
</h2>
<h3 style="color:green;">
align-self:flex-end;
</h3>
<div id="geeks">
<div style="background-color:green;color:white;">
Geeks
</div>
<div style="background-color:lightblue;"
id="sudo">
For
</div>
<div style="background-color:coral;">
Geeks
</div>
<div style="background-color:lightblue;">
Sudo
</div>
<div style="background-color:tomato;">
Placement
</div>
</div>
</center>
</body>
</html>
- Producción:
Línea de base: el elemento se coloca en la línea de base del contenedor flexible.
- Sintaxis:
align-self: baseline;
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | align-self Property
</title>
<style>
#geeks {
width: 250px;
height: 200px;
border: 4px solid black;
display: -webkit-flex;
/* Safari */
-webkit-align-items: center;
/* Safari 7.0+ */
display: flex;
align-items: center;
}
#geeks div {
-webkit-flex: 1;
/* Safari 6.1+ */
flex: 1;
}
#sudo {
-webkit-align-self: baseline;
/* Safari 7.0+ */
align-self: baseline;
}
</style>
</head>
<body>
<center>
<h2 style="color:green;">
GeeksForGeeks
</h2>
<h3 style="color:green;">
align-self:baseline;
</h3>
<div id="geeks">
<div style="background-color:green;color:white;">
Geeks
</div>
<div style="background-color:lightblue;"
id="sudo">
For
</div>
<div style="background-color:coral;">
Geeks
</div>
<div style="background-color:lightblue;">
Sudo
</div>
<div style="background-color:tomato;">
Placement
</div>
</div>
</center>
</body>
</html>
- Producción:
initial: Establece la propiedad en su posición normal. Es el valor predeterminado.
- Sintaxis:
align-self: initial;
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | align-self Property
</title>
<style>
#geeks {
width: 250px;
height: 200px;
border: 4px solid black;
display: -webkit-flex;
/* Safari */
-webkit-align-items: flex-start;
/* Safari 7.0+ */
display: flex;
align-items: flex-start;
}
#geeks div {
-webkit-flex: 1;
/* Safari 6.1+ */
flex: 1;
}
#sudo {
-webkit-align-self: initial;
/* Safari 7.0+ */
align-self: initial;
}
</style>
</head>
<body>
<center>
<h2 style="color:green;">
GeeksForGeeks
</h2>
<h3 style="color:green;">
align-self:initial;
</h3>
<div id="geeks">
<div style="background-color:green;color:white;">
Geeks
</div>
<div style="background-color:lightblue;"
id="sudo">
For
</div>
<div style="background-color:coral;">
Geeks
</div>
<div style="background-color:lightblue;">
Sudo
</div>
<div style="background-color:tomato;">
Placement
</div>
</div>
</center>
</body>
</html>
- Producción:
Navegadores compatibles: El navegador compatible con CSS | Las propiedades align-self se enumeran a continuación:
- Google Chrome 21.0
- Internet Explorer 11.0
- Firefox 28.0
- Ópera 12.1
- Safari 9.0, 7.0 -webkit-
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA