La propiedad DOM Style alignItems se usa para establecer o devolver la alineación predeterminada de elementos en un contenedor flexible.
Sintaxis:
- Para obtener la propiedad alignItems
object.style.alignItems
- Para establecer la propiedad alignItems
object.style.alignItems = "stretch|center|flex-start|flex-end| baseline|initial|inherit"
Valores de propiedad:
- estirar: Esto se usa para estirar los elementos para que se ajusten al contenedor. Este es el valor predeterminado.
- centro: Esto se utiliza para centrar los artículos en el contenedor.
- flex-start: Esto se utiliza para colocar los artículos al principio del contenedor.
- flex-end: Se utiliza para posicionar los artículos al final del contenedor.
- línea de base: Esto se utiliza para colocar los elementos en la línea de base del contenedor.
- initial: se utiliza para establecer esta propiedad en su valor predeterminado.
- heredar: Esto hereda la propiedad de su padre.
Valores devueltos: Devuelve un valor de string, que representa la propiedad de elementos alineados de un elemento.
Los valores se explican con los siguientes ejemplos:
Ejemplo-1: Usar el valor de estiramiento.
<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM Style alignItems Property</title>
<style>
.main {
width: 200px;
height: 150px;
border: solid;
display: flex;
/* setting align-items to center to observe the
effect of the stretch value */
align-items: center;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>DOM Style alignItems Property</b>
<p>Click on the button to change the
alignItems property to 'stretch'</p>
<div class="main">
<div style="background-color:lightblue;">
Item 1 </div>
<div style="background-color:lightgreen;">
Item 2 </div>
<div style="background-color:lightsalmon;">
Item 3 </div>
<div style="background-color:lightyellow;">
Item 4 </div>
</div>
<button onclick="changePos()">
Change alignItems property
</button>
<script>
function changePos() {
elem = document.querySelector('.main');
// Setting alignItems to stretch
elem.style.alignItems = 'stretch';
}
</script>
</body>
</html>
Producción:
- Antes de pulsar el botón:
- Después de presionar el botón:
Ejemplo-2: Uso del valor central.
<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM Style alignItems Property</title>
<style>
.main {
width: 200px;
height: 150px;
border: solid;
display: flex;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>DOM Style alignItems Property</b>
<p>Click on the button to change the
alignItems property to 'center'</p>
<div class="main">
<div style="background-color:lightblue;">
Item 1 </div>
<div style="background-color:lightgreen;">
Item 2 </div>
<div style="background-color:lightsalmon;">
Item 3 </div>
<div style="background-color:lightyellow;">
Item 4 </div>
</div>
<button onclick="changePos()">
Change alignItems property
</button>
<script>
function changePos() {
elem = document.querySelector('.main');
// Setting alignItems to center
elem.style.alignItems = 'center';
}
</script>
</body>
</html>
Producción:
- Antes de pulsar el botón:
- Después de presionar el botón:
Ejemplo-3: Uso del valor de inicio flexible.
<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM Style alignItems Property</title>
<style>
.main {
width: 200px;
height: 150px;
border: solid;
display: flex;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>DOM Style alignItems Property</b>
<p>Click on the button to change the
alignItems property to 'flex-start'</p>
<div class="main">
<div style="background-color:lightblue;">
Item 1 </div>
<div style="background-color:lightgreen;">
Item 2 </div>
<div style="background-color:lightsalmon;">
Item 3 </div>
<div style="background-color:lightyellow;">
Item 4 </div>
</div>
<button onclick="changePos()">
Change alignItems property
</button>
<script>
function changePos() {
elem = document.querySelector('.main');
// Setting alignItems to flex-start
elem.style.alignItems = 'flex-start';
}
</script>
</body>
</html>
Producción:
- Antes de pulsar el botón:
- Después de presionar el botón:
Ejemplo-4: Uso del valor final flexible.
<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM Style alignItems Property</title>
<style>
.main {
width: 200px;
height: 150px;
border: solid;
display: flex;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>DOM Style alignItems Property</b>
<p>Click on the button to change the
alignItems property to 'flex-end'</p>
<div class="main">
<div style="background-color:lightblue;">
Item 1 </div>
<div style="background-color:lightgreen;">
Item 2 </div>
<div style="background-color:lightsalmon;">
Item 3 </div>
<div style="background-color:lightyellow;">
Item 4 </div>
</div>
<button onclick="changePos()">
Change alignItems property
</button>
<script>
function changePos() {
elem = document.querySelector('.main');
// Setting alignItems to flex-end
elem.style.alignItems = 'flex-end';
}
</script>
</body>
</html>
Producción:
- Antes de pulsar el botón:
- Después de presionar el botón:
Ejemplo-5: Uso del valor de referencia.
<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM Style alignItems Property</title>
<style>
.main {
width: 200px;
height: 150px;
border: solid;
display: flex;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>DOM Style alignItems Property</b>
<p>Click on the button to change the
alignItems property to 'baseline'</p>
<div class="main">
<div style="background-color:lightblue;">
Item 1 </div>
<div style="background-color:lightgreen;">
Item 2 </div>
<div style="background-color:lightsalmon;">
Item 3 </div>
<div style="background-color:lightyellow;">
Item 4 </div>
</div>
<button onclick="changePos()">
Change alignItems property
</button>
<script>
function changePos() {
elem = document.querySelector('.main');
// Setting alignItems to baseline
elem.style.alignItems = 'baseline';
}
</script>
</body>
</html>
Producción:
- Antes de pulsar el botón:
- Después de presionar el botón:
Ejemplo-6: Usando el valor inicial. Esto establece la propiedad en el valor predeterminado.
<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM Style alignItems Property</title>
<style>
.main {
width: 200px;
height: 150px;
border: solid;
display: flex;
/* setting align-items to center
to observe the effect of the
initial value */
align-items: center;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>DOM Style alignItems Property</b>
<p>Click on the button to change the
alignItems property to 'initial'</p>
<div class="main">
<div style="background-color:lightblue;">
Item 1 </div>
<div style="background-color:lightgreen;">
Item 2 </div>
<div style="background-color:lightsalmon;">
Item 3 </div>
<div style="background-color:lightyellow;">
Item 4 </div>
</div>
<button onclick="changePos()">
Change alignItems property
</button>
<script>
function changePos() {
elem = document.querySelector('.main');
// Setting alignItems to initial
elem.style.alignItems = 'initial';
}
</script>
</body>
</html>
Producción:
- Antes de pulsar el botón:
- Después de presionar el botón:
Ejemplo-7: Usar el valor heredado. Esto hereda la posición de su elemento padre.
<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM Style alignItems Property</title>
<style>
.main {
width: 200px;
height: 150px;
border: solid;
display: flex;
}
#parent {
/* Setting the parent div's
align-items to flex-end */
align-items: flex-end;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>DOM Style alignItems Property</b>
<p>Click on the button to change the
alignItems property to 'inherit'</p>
<div id="parent">
<div class="main">
<div style="background-color:lightblue;">
Item 1 </div>
<div style="background-color:lightgreen;">
Item 2 </div>
<div style="background-color:lightsalmon;">
Item 3 </div>
<div style="background-color:lightyellow;">
Item 4 </div>
</div>
</div>
<button onclick="changePos()">
Change alignItems property
</button>
<script>
function changePos() {
elem = document.querySelector('.main');
// Setting alignItems to inherit from parent div
elem.style.alignItems = 'inherit';
}
</script>
</body>
</html>
Producción:
- Antes de pulsar el botón:
- Después de presionar el botón:
Navegadores compatibles: los navegadores compatibles con la propiedad alignItems se enumeran a continuación:
- cromo 21.0
- Internet Explorer 11.0
- Firefox 20.0
- Ópera 12.1
- Safari 7.0
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA