Notas rápidas de Flexbox

🏁 Tabla de contenido 🏁

Idea del post
Lista de etiquetas por defecto en inline y block
Contexto flex y flex direction
Lista de valores de propiedades
Manejo de contenedores
Manejo de item o elemento

Idea del post

Esta es una guía rápida de flexbox y el objetivo es que tengas en mano los pasos u anotaciones para usarlo

Por último. Si te gusto este post déjame un ❤️

Lista de etiquetas por defecto en inline y block

Por defecto, html5 contiene etiquetas que tienen dirección en línea o en bloque sin necesidad de usar la propiedad flex y conocer las etiquetas nos ayudara con más precisión manipular los ítems en nuestros contenedores. A continuación una lista de las etiquetas más usadas

Etiquetas en bloque

Etiquetas en linea

</td>
</tr>
<tr>
<td>
<figure></td>
<td></td>
</tr>
<tr>
<td>
<footer></td>
<td><a></td>
</tr>
<tr>
<td>
<form></td>
<td><sup></td>
</tr>
<tr>
<td>
<h1></td>
<td><sub></td>
</tr>
<tr>
<td>
<header></td>
<td><script></td>
</tr>
<tr>
<td>
<hgroup></td>
<td><q></td>
</tr>
<tr>
<td>
<hr>
</td>
<td><object></td>
</tr>
<tr>
<td>
<li></td>
<td>
<map></td>
</tr>
<tr>
<td><main></td>
<td><i></td>
</tr>
<tr>
<td>
<nav></td>
<td><var></td>
</tr>
<tr>
<td>
<ol></td>
<td><time></td>
</tr>
<tr>
<td><output></td>
<td><strong></td>
</tr>
<tr>
<td>
</td>
<td><em></td>
</tr>
<tr>
<td>
<pre></td>
<td><code></td>
</tr>
<tr>
<td>
<section></td>
<td><cite></td>
</tr>
<tr>
<td>
<table></td>
<td><acronym></td>
</tr>
<tr>
<td>
<tfoot></td>
<td><small></td>
</tr>
<tr>
<td>
<ul></td>
<td><big></td>
</tr>
</tbody>
</table>
</div>
<h2 id="contexto-flex-y-flex-direction">
<p>  Contexto flex y flex direction<br />
</h2>
<ul>
<li>
<p>Básicamente, para usar flexbox necesitamos un elemento contenedor y que su contenedor tenga hijos.</p>
</li>
<li>
<p>Al contenedor se lo conoce <code>flex-container</code> y a los hijos se los conoce como <code>flex-items</code></p>
</li>
<li>
<p><code>display: flex;</code> es la propiedad para activar flexbox</p>
</li>
<li>
<p>Además de activar flexbox con la propiedad <code>display: flex;</code> se necesita darle una dirección a través de la propiedad <code>flex-direction: ;</code>. El valor puede ser <code>row</code> o <code>column</code></p>
<ul>
<li>La dirección que se defina en el <code>flex-direction</code> será la<br />
dirección principal o main axis y la dirección que no sé<br />
escribió será la dirección secundaria o cross axis </li>
<li>Usar la propiedad <code>flex-direction</code> nos da la ventaja de poder<br />
invertir el main axis usando <code>flex-direction: row-reverse</code> o<br />
<code>flex-direccion: column-reverse</code> como lo vemos en las<br />
siguinetes imagenes:</li>
</ul>
</li>
</ul>
<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--wycW4vBH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jut6kiutk8eu55edis2g.png" class="article-body-image-wrapper"><img  decoding="async"  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII="  alt="row direction"  width="516"  height="314"  class=" pk-lazyload"  data-pk-sizes="auto"  data-pk-src="https://res.cloudinary.com/practicaldev/image/fetch/s--wycW4vBH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jut6kiutk8eu55edis2g.png" ></a></p>
<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--nerj6DVu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/01h9xrhxhmdxn9xjvgsl.png" class="article-body-image-wrapper"><img  decoding="async"  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII="  alt="row reverse"  width="532"  height="314"  class=" pk-lazyload"  data-pk-sizes="auto"  data-pk-src="https://res.cloudinary.com/practicaldev/image/fetch/s--nerj6DVu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/01h9xrhxhmdxn9xjvgsl.png" ></a></p>
<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--88-ceT70--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8yu7k9jgpm4ctml53rbz.png" class="article-body-image-wrapper"><img  loading="lazy"  decoding="async"  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII="  alt="direction column"  width="523"  height="316"  class=" pk-lazyload"  data-pk-sizes="auto"  data-pk-src="https://res.cloudinary.com/practicaldev/image/fetch/s--88-ceT70--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8yu7k9jgpm4ctml53rbz.png" ></a></p>
<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--pufoLwod--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2yjo79pav92dnd8vla22.png" class="article-body-image-wrapper"><img  loading="lazy"  decoding="async"  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII="  alt="column reverse"  width="520"  height="311"  class=" pk-lazyload"  data-pk-sizes="auto"  data-pk-src="https://res.cloudinary.com/practicaldev/image/fetch/s--pufoLwod--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2yjo79pav92dnd8vla22.png" ></a></p>
<ul>
<li>
<p>Si deseamos activar flexbox y en el mismo valor darle la dirección, podemos usar <code>display: inline</code> para trabajar en filas, o <code>display: block</code> para trabajar en columnas </p>
</li>
<li>
<p>Cuando se trabaja en fila, los items tienen el alto y ancho de su contenido por defecto y no poseen algunas propiedades que, en cambio, trabajando en bloque o columna si se pueden aprovechar como alto, ancho y margenes. Entonces, para solucionar eso, podemos usar display en fila con las propiedades de bloque, a esto lo llamamos <code>display: inline-block</code></p>
</li>
</ul>
<h2 id="lista-de-valores-de-propiedades">
<p>  Lista de valores de propiedades<br />
</h2>
<p>Primero conoceremos los valores que se pueden usar en las propiedades:</p>
<ul>
<li>
<strong>flex-start</strong> Envia el o los elementos al comienzo del flex-container</li>
<li>
<strong>flex-end</strong> Envia el o los elementos al final del flex-container</li>
<li>
<strong>center</strong> Centra el o los elementos en el flex-container </li>
<li>
<strong>space-between</strong> Distribuye los espacios de los elementos en el flex-container ponendo el primer y el ultimo elemento al raz del container </li>
<li>
<strong>space-around</strong> Distribuye los espacios de los elementos en el flex-container sin poner el primer y el ultimo elemento al raz del container, esta opcion añade unos margenes entre item por defecto en algunos casos no parecieran estar distribuidos equitativamente </li>
<li>
<strong>space-evenly</strong> Distribuye los espacios de los elementos en el flex-container sin poner el primer y el ultimo elemento al raz del container, esta opcion si distribuye equitativamente los espacios </li>
<li>
<strong>baseline</strong> Los flex-items se alinearán en la dirección de su línea base, esta opción se ejecuta en el contenedor, no en el ítem. Ejemplo </li>
</ul>
<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--6wzoh6T3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m15xn19cz7w3esxbv69l.png" class="article-body-image-wrapper"><img  loading="lazy"  decoding="async"  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII="  alt="baseline 1"  width="267"  height="266"  class=" pk-lazyload"  data-pk-sizes="auto"  data-pk-src="https://res.cloudinary.com/practicaldev/image/fetch/s--6wzoh6T3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m15xn19cz7w3esxbv69l.png" ></a></p>
<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--rUlrFR4J--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ainfn7zf6hyw2r5ipgq.png" class="article-body-image-wrapper"><img  loading="lazy"  decoding="async"  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII="  alt="baseline 2"  width="246"  height="265"  class=" pk-lazyload"  data-pk-sizes="auto"  data-pk-src="https://res.cloudinary.com/practicaldev/image/fetch/s--rUlrFR4J--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ainfn7zf6hyw2r5ipgq.png" ></a></p>
<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--KYG-VcGl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z08izr4sarqnoyuuahy8.png" class="article-body-image-wrapper"><img  loading="lazy"  decoding="async"  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII="  alt="baseline 3"  width="255"  height="161"  class=" pk-lazyload"  data-pk-sizes="auto"  data-pk-src="https://res.cloudinary.com/practicaldev/image/fetch/s--KYG-VcGl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z08izr4sarqnoyuuahy8.png" ></a></p>
<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--gOXhkzdZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cn5k453pqbjuzg6zsuq7.png" class="article-body-image-wrapper"><img  loading="lazy"  decoding="async"  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII="  alt="baseline 4"  width="633"  height="649"  class=" pk-lazyload"  data-pk-sizes="auto"  data-pk-src="https://res.cloudinary.com/practicaldev/image/fetch/s--gOXhkzdZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cn5k453pqbjuzg6zsuq7.png" ></a></p>
<ul>
<li>
<strong>nowrap</strong> Permite que el contenido se desborde del flex-container</li>
<li>
<strong>wrap</strong> No permite que el contenido se desborde del flex-container reduciendo el tamaño de los elementos</li>
<li>
<strong>wrap-reverse</strong> No permite que el contenido se desborde del flex-container reduciendo el tamaño de los elementos, además invierte su dirección </li>
</ul>
<h2 id="manejo-de-contenedores">
<p>  Manejo de contenedores<br />
</h2>
<ul>
<li>
<p><strong>Flex-wrap:</strong> Maneja el desbordamiento del flex-container. <br />
Sus propiedades son: </p>
<ul>
<li>nowrap</li>
<li>wrap</li>
<li>wrap-reverse </li>
</ul>
</li>
<li>
<p><strong>Justify-content:</strong> Justifica o maneja la alineación en la dirección principal o main axis del flex-container.<br />
Sus propiedades son:</p>
<ul>
<li>flex-start</li>
<li>flex-end</li>
<li>center</li>
<li>space-between</li>
<li>space-around</li>
<li>space-evenly</li>
</ul>
</li>
<li>
<p><strong>Align-items:</strong> Alinea el contenido en la dirección secundaria o cross axis.<br />
Sus porpiedades son:</p>
<ul>
<li>flex-start </li>
<li>flex-end</li>
<li>center</li>
<li>baseline</li>
</ul>
</li>
<li>
<p><strong>Align-content:</strong> Maneja la alineacion del flex-container siempre y cuando halla más de una fila, en tal caso el flex-direction sea row o halla más de una columna si el flex-direction es column.<br />
Sus propiedades son:</p>
<ul>
<li>flex-start</li>
<li>flex-end</li>
<li>center</li>
<li>space-between</li>
<li>space-around</li>
<li>space-evenly</li>
</ul>
</li>
</ul>
<h2 id="manejo-de-item-o-elemento">
<p>  Manejo de item o elemento<br />
</h2>
<p>Las siguientes propiedades sirven para el manejo individual del item o elemento. <br />
Un contenedor también puede ser un ítem si es hijo de un <code>flex-container</code> padre. </p>
<ul>
<li>
<strong>Order:</strong> Ordena los flex-items en el main axis.<br />
El ítem que tenga el menor número será el primero.<br />
Por defecto, los ítems tiene valor de 0.<br />
En el siguiente ejemplo el main axis es de<br />
izquierda a derecha o row y poniéndole el valor de<br />
1 lo enviamos al final </li>
</ul>
<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--C2n5AtNh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79n5jseazf1ifpn4hgb7.png" class="article-body-image-wrapper"><img  loading="lazy"  decoding="async"  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII="  alt="Imagen order"  width="875"  height="213"  class=" pk-lazyload"  data-pk-sizes="auto"  data-pk-src="https://res.cloudinary.com/practicaldev/image/fetch/s--C2n5AtNh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79n5jseazf1ifpn4hgb7.png" ></a></p>
<ul>
<li>
<strong>Flex-grow:</strong> Es el factor de crecimiento de los flex-items en relacion con otros, es decir, distribuye los espacios sobrantes afectando solo al main axis. Su valor se representa en forma de porciones en números enteros.<br />
En el siguiente ejemplo vemos que exite un espacio sobrante y luego indicamos que los items se distribuyan en porciones iguales de 1</li>
</ul>
<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--XU2bL25p--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9nhl1mhzz6exds1nuz99.png" class="article-body-image-wrapper"><img  loading="lazy"  decoding="async"  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII="  alt="Imagen flex grow1"  width="387"  height="313"  class=" pk-lazyload"  data-pk-sizes="auto"  data-pk-src="https://res.cloudinary.com/practicaldev/image/fetch/s--XU2bL25p--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9nhl1mhzz6exds1nuz99.png" ></a></p>
<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--dJHO0dA7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/98k4hnat8ql0t1hb1ys8.png" class="article-body-image-wrapper"><img  loading="lazy"  decoding="async"  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII="  alt="Imagen flex grow 2"  width="880"  height="414"  class=" pk-lazyload"  data-pk-sizes="auto"  data-pk-src="https://res.cloudinary.com/practicaldev/image/fetch/s--dJHO0dA7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/98k4hnat8ql0t1hb1ys8.png" ></a></p>
<ul>
<li>
<strong>Flex-shrink:</strong> Determina que tanto se encogen los flex-items con respecto al otro, es decir, maneja los espacios faltantes, recordando que display flex no permite que su contenido se desborde, si no más bien los reduce. Siempre que flex-shrink tenga un valor positivo no se desborda el flex-container. Esta propiedad afecta al main axis. Por defecto su valor es 1 y no acepta valores negativos pero sí el 0. Ejemplo<br />
En la siguiente imagen podemos observar que flex-shrink tiene un valor de 0, esto inmediatamente le quita la propiedad flex-shrink y le da el ancho o el alto que este por defecto en el css para el item </li>
</ul>
<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ewARUMqz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ygv671d291wi871suwg.png" class="article-body-image-wrapper"><img  loading="lazy"  decoding="async"  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII="  alt="flex-shrink"  width="849"  height="443"  class=" pk-lazyload"  data-pk-sizes="auto"  data-pk-src="https://res.cloudinary.com/practicaldev/image/fetch/s--ewARUMqz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ygv671d291wi871suwg.png" ></a></p>
<ul>
<li>
<strong>Flex-basis:</strong> Indica el tamaño de un flex-item de forma predominante, inclusive a su width base, flex-grow, o flex-thrink. Si su valor es auto su flex-basis sería su height o width, Afecta al main axis.<br />
Ejemplo: </li>
</ul>
<p>Si ponemos un <br />
flex-direction: row;<br />
flex-basis: 60px;<br />
width: 100 px;</p>
<p>Predominará el <code>flex-basis</code></p>
<p>Ejemplo2:<br />
Que pasa si un ítem tiene contenido y no tiene width suponiendo que es flex y queremos distribuirlos iguales </p>
<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--e33kgIYd--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/khwszuhh2r234lkpf2x2.png" class="article-body-image-wrapper"><img  loading="lazy"  decoding="async"  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII="  alt="basis 1"  width="417"  height="184"  class=" pk-lazyload"  data-pk-sizes="auto"  data-pk-src="https://res.cloudinary.com/practicaldev/image/fetch/s--e33kgIYd--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/khwszuhh2r234lkpf2x2.png" ></a></p>
<p>La solucion </p>
<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--r9jopEz1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9n2y5h6t2fz1mcyhemkh.png" class="article-body-image-wrapper"><img  loading="lazy"  decoding="async"  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII="  alt="Baisis 2 "  width="880"  height="401"  class=" pk-lazyload"  data-pk-sizes="auto"  data-pk-src="https://res.cloudinary.com/practicaldev/image/fetch/s--r9jopEz1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9n2y5h6t2fz1mcyhemkh.png" ></a></p>
<p>Se desborda el contenido, pero se distribuye en partes iguales </p>
<ul>
<li>
<p><strong>Align-self:</strong> Permite alinear solo a un elemento en el cross axis o direccion secundaria. Hace lo mismo que align-items y con los mismo valores</p>
<ul>
<li>flex-start </li>
<li>flex-end</li>
<li>center</li>
<li>baseline</li>
</ul>
</li>
<li>
<p><strong>Flex:</strong> Es el shortcut para ejecutar tres propiedades para ítems al mismo tiempo, las cuales son <code>flex-grow</code>, <code>flex-shrink</code> y <code>flex-basis</code>.</p>
<p>Se la usa de la siguiente manera:</p>
<p><code>flex: valor_grow valor_shrink valor_basis</code></p>
</li>
</ul>
<p>Esta propiedad nos permite distribuir <br />
 equitativamente los ítems de 3 formas </p>
<ol>
<li><code>flex: 1 1 0;</code></li>
<li><code>flex: auto;</code></li>
<li><code>flex: 1;</code></li>
</ol>
			</div>

<div class="cs-entry__tags"><ul><li><a href="https://prodsens.live/tag/beginners/" rel="tag">beginners</a></li><li><a href="https://prodsens.live/tag/css3/" rel="tag">css3</a></li><li><a href="https://prodsens.live/tag/flexbox/" rel="tag">flexbox</a></li><li><a href="https://prodsens.live/tag/spanish/" rel="tag">spanish</a></li></ul></div>			<div class="cs-entry__after-share-buttons">
						<div class="pk-share-buttons-wrap pk-share-buttons-layout-simple pk-share-buttons-scheme-simple-light pk-share-buttons-has-counts pk-share-buttons-has-total-counts pk-share-buttons-after-post pk-share-buttons-mode-php pk-share-buttons-mode-rest" data-post-id="8938" data-share-url="https://prodsens.live/2023/02/23/notas-rapidas-de-flexbox/" >

<div class="pk-share-buttons-total pk-share-buttons-total-no-count">
												<div class="pk-share-buttons-title pk-font-primary">Total</div>
							<div class="pk-share-buttons-count pk-font-heading">0</div>
							<div class="pk-share-buttons-label pk-font-secondary">Shares</div>
										</div>
				
			<div class="pk-share-buttons-items">

<i class="pk-share-buttons-icon pk-icon pk-icon-facebook"></i>
								
								
																	<span class="pk-share-buttons-label pk-font-primary">Share</span>
								
																	<span class="pk-share-buttons-count pk-font-secondary">0</span>
															</a>

</div>
											<div class="pk-share-buttons-item pk-share-buttons-twitter pk-share-buttons-no-count" data-id="twitter">

<i class="pk-share-buttons-icon pk-icon pk-icon-twitter"></i>
								
								
																	<span class="pk-share-buttons-label pk-font-primary">Tweet</span>
								
																	<span class="pk-share-buttons-count pk-font-secondary">0</span>
															</a>

</div>
											<div class="pk-share-buttons-item pk-share-buttons-pinterest pk-share-buttons-no-count" data-id="pinterest">

</div>
								</div>
		</div>
				</div>

<div id="respond" class="comment-respond">
		<h5 class="cs-section-heading cnvs-block-section-heading is-style-cnvs-block-section-heading-default halignleft  "><span class="cnvs-section-title"><span>Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/2023/02/23/notas-rapidas-de-flexbox/#respond" style="display:none;">Cancel reply</a></small></span></span></h5><form action="https://prodsens.live/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> <span class="required-field-message">Required fields are marked <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Comment <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required>

Name *

Email *

Website

Product Management

Why There Are Opportunities in SaaS When There Are Headwinds

February 23, 2023

Software

DNS Server Configuration

February 23, 2023

como-fazer-um-validador-de-cpf-com-python-de-forma-simples-e-refatorada!

4 min

Software

Como Fazer um Validador de CPF com Python de forma simples e refatorada!

CPF ou Cadastro de Pessoa Fisica é um documento com numeração única que pertence a uma pessoa para…

Julia-Carolin Zeng

April 19, 2024

how-to-deal-with-job-rejections-as-a-software-engineer

3 min

Software

How To Deal With Job Rejections As A Software Engineer

Have you ever been rejected from a software engineering role? Maybe not once, twice, but dozens of times?…

Bilal Jafar

September 26, 2022

8 min

Software

Being an ML Google Developer Expert

Technology, Community and Leadership Google Developer Experts (GDEs) are individuals who are recognized by Google for our expertise…

Charles Thuo

August 16, 2023

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.

Necessary

Always Enabled

Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.

Cookie	Duration	Description
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

Functional

Performance

Analytics

Others

Hand-Picked Top-Read Stories

Next.js Deployment: Vercel’s Charm vs. GCP’s Muscle

Quality is Relative

New Rails 7.2: Added Rate Limiting

Trending Tags

Notas rápidas de Flexbox

🏁 Tabla de contenido 🏁

Idea del post

Lista de etiquetas por defecto en inline y block

Previous Post

Why There Are Opportunities in SaaS When There Are Headwinds

Next Post

DNS Server Configuration

Notas rápidas de Flexbox

🏁 Tabla de contenido 🏁

Idea del post

Lista de etiquetas por defecto en inline y block

Previous Post

Next Post

Related Posts