[FIX] Update index.html - links images (#6864)

files/es/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html

@@ -27,21 +27,21 @@ <h3 id="El_eje_principal">El eje principal</h3>
 
 <p>Si elegimos <code>row</code> o <code>row-reverse</code>, el eje principal correrá a lo largo de la fila según la <strong>dirección de la línea </strong>.</p>
 
-<p><img alt="If flex-direction is set to row the main axis runs along the row in the inline direction." src="https://mdn.mozillademos.org/files/15614/Basics1.png" style="display: block; height: 152px; margin: 0px auto; width: 522px;"></p>
+<p><img alt="If flex-direction is set to row the main axis runs along the row in the inline direction." src="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox/basics1.png" style="display: block; height: 152px; margin: 0px auto; width: 522px;"></p>
 
 <p>Al elegir <code>column</code> o <code>column-reverse</code> el eje principal correrá desde el borde superior de la página hasta el final — según la <strong>dirección del bloque</strong>.</p>
 
-<p><img alt="If flex-direction is set to column the main axis runs in the block direction." src="https://mdn.mozillademos.org/files/15615/Basics2.png" style="display: block; height: 227px; margin: 0px auto; width: 709px;"></p>
+<p><img alt="If flex-direction is set to column the main axis runs in the block direction." src="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox/basics2.png" style="display: block; height: 227px; margin: 0px auto; width: 709px;"></p>
 
 <h3 id="El_eje_cruzado">El eje cruzado</h3>
 
 <p>El eje cruzado va perpendicular al eje principal, y por lo tanto si <code>flex-direction</code> (del eje principal) es <code>row</code> o <code>row-reverse</code> el eje cruzado irá por las columnas.</p>
 
-<p><img alt="If flex-direction is set to row then the cross axis runs in the block direction." src="https://mdn.mozillademos.org/files/15616/Basics3.png" style="display: block; height: 125px; margin: 0px auto; width: 666px;"></p>
+<p><img alt="If flex-direction is set to row then the cross axis runs in the block direction." src="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox/basics3.png" style="display: block; height: 125px; margin: 0px auto; width: 666px;"></p>
 
 <p>Si el eje principal es <code>column</code> o <code>column-reverse</code> entonces el eje cruzado corre a lo largo de las filas.</p>
 
-<p><img alt="If flex-direction is set to column then the cross axis runs in the inline direction." src="https://mdn.mozillademos.org/files/15617/Basics4.png" style="display: block; height: 244px; margin: 0px auto; width: 523px;"></p>
+<p><img alt="If flex-direction is set to column then the cross axis runs in the inline direction." src="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox/basics4.png" style="display: block; height: 244px; margin: 0px auto; width: 523px;"></p>
 
 <p>Entender cuál eje es cuál es importante cuando empezamos a mirar la alineación y justificación flexible de los ítems; flexbox posee propiedades que permiten alinear y justificar el contenido sobre un eje o el otro.</p>
 
@@ -53,11 +53,11 @@ <h2 id="Líneas_de_inicio_y_de_fin">Líneas de inicio y de fin</h2>
 
 <p>Si <code>flex-direction</code> es <code>row</code> y estoy trabajando en español, entonces el margen inicial del eje principal quedará a la izquierda, y el margen final a la derecha.</p>
 
-<p><img alt="Working in English the start edge is on the left." src="https://mdn.mozillademos.org/files/15618/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+<p><img alt="Working in English the start edge is on the left." src="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox/basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
 
 <p>Si fuera a trabajar en árabe, entonces el margen inicial de mi eje principal quedaría a la derecha y el margen final a la izquierda.</p>
 
-<p><img alt="The start edge in a RTL language is on the right." src="https://mdn.mozillademos.org/files/15619/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p>
+<p><img alt="The start edge in a RTL language is on the right." src="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox/basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p>
 
 <p>En ambos casos el margen inicial del eje cruzado estará en el extremo superior del contenedor flex y el margen final en el extremo inferior, ya que ambos idiomas tiene un modo de escritura horizontal.</p>
 
@@ -124,7 +124,7 @@ <h2 id="Propiedades_aplicadas_a_los_ítems_flex">Propiedades aplicadas a los í
 
 <p>Si tenemos tres ítems con un ancho de 100 pixeles en un contenedor de 500 pixeles de ancho, entonces el espacio que se necesita para colocar nuestros ítems es de 300 pixeles. Esto deja 200 pixeles de espacio disponible. Si no cambiamos los valores iniciales entonces flexbox colocará ese espacio después del último ítem.</p>
 
-<p><img alt="This flex container has available space after laying out the items." src="https://mdn.mozillademos.org/files/15620/Basics7.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p>
+<p><img alt="This flex container has available space after laying out the items." src="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox/basics7.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p>
 
 <p>Si en cambio quisiéramos que los ítems crecieran para llenar ese espacio, entonces necesitaremos un método para distribuir el espacio sobrante entre los ítems. Es justo lo que harán las propiedades <code>flex</code> que aplicaremos a dichos ítems.</p>