itemtype='https://schema.org/WebPage' itemscope='itemscope' class="page-template-default page page-id-2204 page-child parent-pageid-2148 ast-desktop ast-separate-container ast-right-sidebar astra-4.6.14 ast-single-post ast-inherit-site-logo-transparent ast-hfb-header ast-normal-title-enabled">

24. Flexbox CSS (2)

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
Scroll al inicio