Elementos hijos
Los elementos secundarios directos de un contenedor flexible se convierten automáticamente en elementos flexibles (flex).
Ejm
<!DOCTYPE html>tain
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: #f1f1f1;
}
.flex-container > div {
background-color: DodgerBlue;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Flexible Items</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<p>All direct children of a flexible container becomes flexible items.</p>
</body>
</html>
Sus propiedades son las siguientes:
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
La propiedad order
Dicha propiedad especifica el orden de los items.
Ejm
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
La propiedad flex-grow
La propiedad flex-grow especifica cuánto crecerá un elemento flexible en relación con el resto de los elementos flexibles. El valor debe ser un número, su valor por defecto es 0.
Ejm
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 8">3</div>
</div>
La propiedad flex-shrink
La propiedad flex-shrink especifica cuánto se encogerá un elemento flexible en relación con el resto de los elementos flexibles. Su valor debe ser un número, y su valor por defecto es 1.
Ejm
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
align-items: stretch;
background-color: #f1f1f1;
}
.flex-container > div {
background-color: DodgerBlue;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-shrink Property</h1>
<p>Do not let the third flex item shrink as much as the other flex items:</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink: 0">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
</body>
</html>
La propiedad flex-basis
La propiedad flex-basis especifica la longitud inicial de un elemento flexible.
Ejm
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 200px">3</div>
<div>4</div>
</div>
La propiedad flex
La propiedad flex es una propiedad abreviada para las propiedades flex-grow, flex-shrink y flex-basis.
Ejm
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
align-items: stretch;
background-color: #f1f1f1;
}
.flex-container > div {
background-color: DodgerBlue;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex Property</h1>
<p>Make the third flex item not growable (0), not shrinkable (0), and with an initial length of 200 pixels:</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex: 0 0 200px">3</div>
<div>4</div>
</div>
</body>
</html>
La propiedad align-self
La propiedad align-self especifica la alineación del elemento seleccionado dentro del contenedor flexible. Dicha propiedad anula la alineación predeterminada establecida por la propiedad align-items del contenedor.
Ejm
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
height: 200px;
background-color: #f1f1f1;
}
.flex-container > div {
background-color: DodgerBlue;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-self Property</h1>
<p>The "align-self: center;" aligns the selected flex item in the middle of the container:</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self: center">3</div>
<div>4</div>
</div>
<p>The align-self property overrides the align-items property of the container.</p>
</body>
</html>
Resumen
| Propiedad |
Descripción |
| align-self |
Especifica la alineación de un elemento flexible (anula la propiedad de elementos de alineación del contenedor flexible) |
| flex |
Una propiedad abreviada para las propiedades flex-grow, flex-shrink y flex-basis |
| flex-basis |
Especifica la longitud inicial de un elemento flexible |
| flex-grow |
Especifica cuánto crecerá un elemento flexible en relación con el resto de elementos flexibles dentro del mismo contenedor |
| flex-shrink |
Especifica cuánto se encogerá un elemento flexible en relación con el resto de elementos flexibles dentro del mismo contenedor |
| order |
Especifica el orden de los elementos flexibles dentro del mismo contenedor |