fix(spanish-md): Address some formatting issues for Spanish md
This commit is contained in:
Bouncey
committed by
mrugesh mohapatra
mrugesh mohapatra
parent
ee9f6b2d72
commit
c2a45b58be
@@ -7,18 +7,18 @@ videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
La propiedad <code>align-items</code> es similar a <code>justify-content</code> . Recuerde que la propiedad justify <code>justify-content</code> alineaba elementos flexibles a lo largo del eje principal. Para las filas, el eje principal es una línea horizontal y para las columnas es una línea vertical.
|
||||
Los contenedores Flex también tienen un <strong>eje transversal</strong> que es el opuesto al eje principal. Para las filas, el eje transversal es vertical y para las columnas, el eje transversal es horizontal.
|
||||
CSS ofrece la propiedad <code>align-items</code> para alinear elementos flexibles a lo largo del eje transversal. Para una fila, le dice a CSS cómo empujar los elementos en toda la fila hacia arriba o hacia abajo dentro del contenedor. Y para una columna, cómo empujar todos los elementos a la izquierda o derecha dentro del contenedor.
|
||||
Los diferentes valores disponibles para <code>align-items</code> de <code>align-items</code> incluyen:
|
||||
<ul><li> <code>flex-start</code> : alinea los elementos con el inicio del contenedor flexible. Para las filas, esto alinea los elementos con la parte superior del contenedor. Para las columnas, esto alinea los elementos a la izquierda del contenedor. </li><li> <code>flex-end</code> : alinea los elementos con el extremo del contenedor flexible. Para las filas, esto alinea los elementos con la parte inferior del contenedor. Para las columnas, esto alinea los elementos a la derecha del contenedor. </li><li> <code>center</code> : alinea los elementos al centro. Para las filas, esto alinea los elementos verticalmente (espacio igual por encima y por debajo de los elementos). Para las columnas, esto los alinea horizontalmente (espacio igual a la izquierda y derecha de los elementos). </li><li> <code>stretch</code> : estirar los elementos para llenar el contenedor flexible. Por ejemplo, los elementos de las filas se estiran para llenar el contenedor flexible de arriba a abajo. </li><li> <code>baseline</code> : alinear los elementos a sus líneas de base. La línea de base es un concepto de texto, piénselo como la línea en la que se encuentran las letras. </li></ul>
|
||||
<section id='description'>
|
||||
La propiedad <code>align-items</code> es similar a <code>justify-content</code> . Recuerde que la propiedad justify <code>justify-content</code> alineaba elementos flexibles a lo largo del eje principal. Para las filas, el eje principal es una línea horizontal y para las columnas es una línea vertical.
|
||||
Los contenedores Flex también tienen un <strong>eje transversal</strong> que es el opuesto al eje principal. Para las filas, el eje transversal es vertical y para las columnas, el eje transversal es horizontal.
|
||||
CSS ofrece la propiedad <code>align-items</code> para alinear elementos flexibles a lo largo del eje transversal. Para una fila, le dice a CSS cómo empujar los elementos en toda la fila hacia arriba o hacia abajo dentro del contenedor. Y para una columna, cómo empujar todos los elementos a la izquierda o derecha dentro del contenedor.
|
||||
Los diferentes valores disponibles para <code>align-items</code> de <code>align-items</code> incluyen:
|
||||
<ul><li> <code>flex-start</code> : alinea los elementos con el inicio del contenedor flexible. Para las filas, esto alinea los elementos con la parte superior del contenedor. Para las columnas, esto alinea los elementos a la izquierda del contenedor. </li><li> <code>flex-end</code> : alinea los elementos con el extremo del contenedor flexible. Para las filas, esto alinea los elementos con la parte inferior del contenedor. Para las columnas, esto alinea los elementos a la derecha del contenedor. </li><li> <code>center</code> : alinea los elementos al centro. Para las filas, esto alinea los elementos verticalmente (espacio igual por encima y por debajo de los elementos). Para las columnas, esto los alinea horizontalmente (espacio igual a la izquierda y derecha de los elementos). </li><li> <code>stretch</code> : estirar los elementos para llenar el contenedor flexible. Por ejemplo, los elementos de las filas se estiran para llenar el contenedor flexible de arriba a abajo. </li><li> <code>baseline</code> : alinear los elementos a sus líneas de base. La línea de base es un concepto de texto, piénselo como la línea en la que se encuentran las letras. </li></ul>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Un ejemplo ayuda a mostrar esta propiedad en acción. Agregue la propiedad CSS <code>align-items</code> al <code>align-items</code> <code>#box-container</code> y asígnele un valor de center.
|
||||
<strong>Bonus</strong> <br> Pruebe las otras opciones para la propiedad <code>align-items</code> en el editor de código para ver sus diferencias. Pero tenga en cuenta que un valor de centro es el único que pasará este desafío.
|
||||
<section id='instructions'>
|
||||
Un ejemplo ayuda a mostrar esta propiedad en acción. Agregue la propiedad CSS <code>align-items</code> al <code>align-items</code> <code>#box-container</code> y asígnele un valor de center.
|
||||
<strong>Bonus</strong> <br> Pruebe las otras opciones para la propiedad <code>align-items</code> en el editor de código para ver sus diferencias. Pero tenga en cuenta que un valor de centro es el único que pasará este desafío.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@@ -26,7 +26,7 @@ Un ejemplo ayuda a mostrar esta propiedad en acción. Agregue la propiedad CSS <
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'El elemento <code>#box-container</code> debería tener una propiedad <code>align-items</code> establecida en un valor de center.'
|
||||
- text: 'El elemento <code>#box-container</code> debería tener una propiedad <code>align-items</code> establecida en un valor de center.'
|
||||
testString: 'assert($("#box-container").css("align-items") == "center", "The <code>#box-container</code> element should have an <code>align-items</code> property set to a value of center.");'
|
||||
|
||||
```
|
||||
|
||||
@@ -7,18 +7,18 @@ videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
A veces, los elementos flexibles dentro de un contenedor flexible no llenan todo el espacio en el contenedor. Es común querer decirle a CSS cómo alinear y espaciar los elementos flexibles de una determinada manera. Afortunadamente, la propiedad <code>justify-content</code> tiene varias opciones para hacer esto. Pero primero, hay una terminología importante que entender antes de revisar esas opciones.
|
||||
<a href="https://www.w3.org/TR/css-flexbox-1/images/flex-direction-terms.svg" target="_blank">Aquí hay una imagen útil que muestra una fila para ilustrar los conceptos a continuación.</a>
|
||||
Recuerde que la configuración de un contenedor flexible como una fila coloca los elementos flexibles uno al lado del otro de izquierda a derecha. Un contenedor flexible configurado como una columna coloca los elementos flexibles en una pila vertical de arriba a abajo. Para cada uno, la dirección en la que se disponen los elementos flexibles se denomina <strong>eje principal</strong> . Para una fila, esta es una línea horizontal que corta cada elemento. Y para una columna, el eje principal es una línea vertical a través de los elementos.
|
||||
Hay varias opciones sobre cómo espaciar los elementos flexibles a lo largo de la línea que es el eje principal. Uno de los más utilizados es <code>justify-content: center;</code> , que alinea todos los elementos flexibles con el centro dentro del contenedor flexible. Otras opciones incluyen:
|
||||
<ul><li> <code>flex-start</code> : alinea los elementos con el inicio del contenedor flexible. Para una fila, esto empuja los artículos a la izquierda del contenedor. Para una columna, esto empuja los elementos a la parte superior del contenedor. </li><li> <code>flex-end</code> : alinea los elementos con el extremo del contenedor flexible. Para una fila, esto empuja los artículos a la derecha del contenedor. Para una columna, esto empuja los artículos a la parte inferior del contenedor. </li><li> <code>space-between</code> : alinea elementos al centro del eje principal, con espacio adicional colocado entre los elementos. Los primeros y últimos elementos se empujan hasta el borde del contenedor flexible. Por ejemplo, en una fila, el primer elemento está contra el lado izquierdo del contenedor, el último elemento está contra el lado derecho del contenedor, luego los otros elementos entre ellos están espaciados uniformemente. </li><li> <code>space-around</code> : similar al <code>space-between</code> pero los elementos primero y último no están bloqueados en los bordes del contenedor, el espacio se distribuye alrededor de todos los elementos </li></ul>
|
||||
<section id='description'>
|
||||
A veces, los elementos flexibles dentro de un contenedor flexible no llenan todo el espacio en el contenedor. Es común querer decirle a CSS cómo alinear y espaciar los elementos flexibles de una determinada manera. Afortunadamente, la propiedad <code>justify-content</code> tiene varias opciones para hacer esto. Pero primero, hay una terminología importante que entender antes de revisar esas opciones.
|
||||
<a href="https://www.w3.org/TR/css-flexbox-1/images/flex-direction-terms.svg" target="_blank">Aquí hay una imagen útil que muestra una fila para ilustrar los conceptos a continuación.</a>
|
||||
Recuerde que la configuración de un contenedor flexible como una fila coloca los elementos flexibles uno al lado del otro de izquierda a derecha. Un contenedor flexible configurado como una columna coloca los elementos flexibles en una pila vertical de arriba a abajo. Para cada uno, la dirección en la que se disponen los elementos flexibles se denomina <strong>eje principal</strong> . Para una fila, esta es una línea horizontal que corta cada elemento. Y para una columna, el eje principal es una línea vertical a través de los elementos.
|
||||
Hay varias opciones sobre cómo espaciar los elementos flexibles a lo largo de la línea que es el eje principal. Uno de los más utilizados es <code>justify-content: center;</code> , que alinea todos los elementos flexibles con el centro dentro del contenedor flexible. Otras opciones incluyen:
|
||||
<ul><li> <code>flex-start</code> : alinea los elementos con el inicio del contenedor flexible. Para una fila, esto empuja los artículos a la izquierda del contenedor. Para una columna, esto empuja los elementos a la parte superior del contenedor. </li><li> <code>flex-end</code> : alinea los elementos con el extremo del contenedor flexible. Para una fila, esto empuja los artículos a la derecha del contenedor. Para una columna, esto empuja los artículos a la parte inferior del contenedor. </li><li> <code>space-between</code> : alinea elementos al centro del eje principal, con espacio adicional colocado entre los elementos. Los primeros y últimos elementos se empujan hasta el borde del contenedor flexible. Por ejemplo, en una fila, el primer elemento está contra el lado izquierdo del contenedor, el último elemento está contra el lado derecho del contenedor, luego los otros elementos entre ellos están espaciados uniformemente. </li><li> <code>space-around</code> : similar al <code>space-between</code> pero los elementos primero y último no están bloqueados en los bordes del contenedor, el espacio se distribuye alrededor de todos los elementos </li></ul>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Un ejemplo ayuda a mostrar esta propiedad en acción. Agregue la propiedad CSS <code>justify-content</code> al elemento <code>#box-container</code> y asígnele un valor de center.
|
||||
<strong>Bonus</strong> <br> Pruebe las otras opciones para la propiedad <code>justify-content</code> en el editor de código para ver sus diferencias. Pero tenga en cuenta que un valor de centro es el único que pasará este desafío.
|
||||
<section id='instructions'>
|
||||
Un ejemplo ayuda a mostrar esta propiedad en acción. Agregue la propiedad CSS <code>justify-content</code> al elemento <code>#box-container</code> y asígnele un valor de center.
|
||||
<strong>Bonus</strong> <br> Pruebe las otras opciones para la propiedad <code>justify-content</code> en el editor de código para ver sus diferencias. Pero tenga en cuenta que un valor de centro es el único que pasará este desafío.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@@ -26,7 +26,7 @@ Un ejemplo ayuda a mostrar esta propiedad en acción. Agregue la propiedad CSS <
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'El elemento <code>#box-container</code> debería tener una propiedad <code>justify-content</code> establecida en un valor de center'.
|
||||
- text: 'El elemento <code>#box-container</code> debería tener una propiedad <code>justify-content</code> establecida en un valor de center'
|
||||
testString: 'assert($("#box-container").css("justify-content") == "center", "The <code>#box-container</code> element should have a <code>justify-content</code> property set to a value of center.");'
|
||||
|
||||
```
|
||||
|
||||
@@ -7,14 +7,14 @@ videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Esta sección utiliza estilos de desafío alternativos para mostrar cómo usar CSS para posicionar elementos de una manera flexible. Primero, un desafío explicará la teoría, luego un desafío práctico utilizando un componente de tweet simple aplicará el concepto flexbox.
|
||||
Colocación de la <code>display: flex;</code> propiedades CSS <code>display: flex;</code> en un elemento le permite usar otras propiedades de flexión para construir una página receptiva.
|
||||
<section id='description'>
|
||||
Esta sección utiliza estilos de desafío alternativos para mostrar cómo usar CSS para posicionar elementos de una manera flexible. Primero, un desafío explicará la teoría, luego un desafío práctico utilizando un componente de tweet simple aplicará el concepto flexbox.
|
||||
Colocación de la <code>display: flex;</code> propiedades CSS <code>display: flex;</code> en un elemento le permite usar otras propiedades de flexión para construir una página receptiva.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Agregue la <code>display</code> propiedades CSS a <code>#box-container</code> y establezca su valor en flex.
|
||||
<section id='instructions'>
|
||||
Agregue la <code>display</code> propiedades CSS a <code>#box-container</code> y establezca su valor en flex.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@@ -22,7 +22,7 @@ Agregue la <code>display</code> propiedades CSS a <code>#box-container</code> y
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: ' <code>#box-container</code> debería tener la propiedad de <code>display</code> establecida en un valor de flex'.
|
||||
- text: ' <code>#box-container</code> debería tener la propiedad de <code>display</code> establecida en un valor de flex'
|
||||
testString: 'assert($("#box-container").css("display") == "flex", "<code>#box-container</code> should have the <code>display</code> property set to a value of flex.");'
|
||||
|
||||
```
|
||||
|
||||
@@ -7,14 +7,14 @@ videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
La propiedad final para elementos flexibles es <code>align-self</code> . Esta propiedad le permite ajustar la alineación de cada elemento individualmente, en lugar de configurarlos todos a la vez. Esto es útil ya que otras técnicas de ajuste comunes que utilizan las propiedades CSS <code>float</code> , <code>clear</code> y <code>vertical-align</code> no funcionan en elementos flexibles.
|
||||
<code>align-self</code> acepta los mismos valores que <code>align-items</code> y anulará cualquier valor establecido por la propiedad <code>align-items</code> .
|
||||
<section id='description'>
|
||||
La propiedad final para elementos flexibles es <code>align-self</code> . Esta propiedad le permite ajustar la alineación de cada elemento individualmente, en lugar de configurarlos todos a la vez. Esto es útil ya que otras técnicas de ajuste comunes que utilizan las propiedades CSS <code>float</code> , <code>clear</code> y <code>vertical-align</code> no funcionan en elementos flexibles.
|
||||
<code>align-self</code> acepta los mismos valores que <code>align-items</code> y anulará cualquier valor establecido por la propiedad <code>align-items</code> .
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Agregue la propiedad CSS <code>align-self</code> a <code>#box-1</code> y <code>#box-2</code> . Dé a <code>#box-1</code> un valor de centro y a <code>#box-2</code> un valor de flex-end.
|
||||
<section id='instructions'>
|
||||
Agregue la propiedad CSS <code>align-self</code> a <code>#box-1</code> y <code>#box-2</code> . Dé a <code>#box-1</code> un valor de centro y a <code>#box-2</code> un valor de flex-end.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@@ -22,9 +22,9 @@ Agregue la propiedad CSS <code>align-self</code> a <code>#box-1</code> y <code>#
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'El elemento <code>#box-1</code> debe tener la propiedad <code>align-self</code> establecida en un valor de center.'
|
||||
- text: 'El elemento <code>#box-1</code> debe tener la propiedad <code>align-self</code> establecida en un valor de center.'
|
||||
testString: 'assert($("#box-1").css("align-self") == "center", "The <code>#box-1</code> element should have the <code>align-self</code> property set to a value of center.");'
|
||||
- text: 'El elemento <code>#box-2</code> debe tener la propiedad <code>align-self</code> establecida en un valor de flex-end.'
|
||||
- text: 'El elemento <code>#box-2</code> debe tener la propiedad <code>align-self</code> establecida en un valor de flex-end.'
|
||||
testString: 'assert($("#box-2").css("align-self") == "flex-end", "The <code>#box-2</code> element should have the <code>align-self</code> property set to a value of flex-end.");'
|
||||
|
||||
```
|
||||
|
||||
@@ -7,14 +7,14 @@ videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
La propiedad de <code>flex-basis</code> especifica el tamaño inicial del elemento antes de que CSS realice ajustes con <code>flex-shrink</code> o <code>flex-grow</code> .
|
||||
Las unidades utilizadas por la propiedad de <code>flex-basis</code> son las mismas que otras propiedades de tamaño ( <code>px</code> , <code>em</code> , <code>%</code> , etc.). El valor <code>auto</code> dimensiona los elementos en función del contenido.
|
||||
<section id='description'>
|
||||
La propiedad de <code>flex-basis</code> especifica el tamaño inicial del elemento antes de que CSS realice ajustes con <code>flex-shrink</code> o <code>flex-grow</code> .
|
||||
Las unidades utilizadas por la propiedad de <code>flex-basis</code> son las mismas que otras propiedades de tamaño ( <code>px</code> , <code>em</code> , <code>%</code> , etc.). El valor <code>auto</code> dimensiona los elementos en función del contenido.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Establezca el tamaño inicial de las cajas utilizando <code>flex-basis</code> . Agregue la propiedad CSS <code>flex-basis</code> a <code>#box-1</code> y <code>#box-2</code> . Dé a <code>#box-1</code> un valor de <code>10em</code> y <code>#box-2</code> un valor de <code>20em</code> .
|
||||
<section id='instructions'>
|
||||
Establezca el tamaño inicial de las cajas utilizando <code>flex-basis</code> . Agregue la propiedad CSS <code>flex-basis</code> a <code>#box-1</code> y <code>#box-2</code> . Dé a <code>#box-1</code> un valor de <code>10em</code> y <code>#box-2</code> un valor de <code>20em</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@@ -22,13 +22,13 @@ Establezca el tamaño inicial de las cajas utilizando <code>flex-basis</code> .
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'El elemento <code>#box-1</code> debería tener una propiedad de <code>flex-basis</code> .'
|
||||
- text: 'El elemento <code>#box-1</code> debería tener una propiedad de <code>flex-basis</code> .'
|
||||
testString: 'assert($("#box-1").css("flex-basis") != "auto", "The <code>#box-1</code> element should have a <code>flex-basis</code> property.");'
|
||||
- text: 'El elemento <code>#box-1</code> debe tener un valor de <code>flex-basis</code> de <code>10em</code> '.
|
||||
- text: 'El elemento <code>#box-1</code> debe tener un valor de <code>flex-basis</code> de <code>10em</code> '
|
||||
testString: 'assert(code.match(/#box-1\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?10em;/g), "The <code>#box-1</code> element should have a <code>flex-basis</code> value of <code>10em</code>.");'
|
||||
- text: 'El elemento <code>#box-2</code> debería tener la propiedad de <code>flex-basis</code> .'
|
||||
- text: 'El elemento <code>#box-2</code> debería tener la propiedad de <code>flex-basis</code> .'
|
||||
testString: 'assert($("#box-2").css("flex-basis") != "auto", "The <code>#box-2</code> element should have the <code>flex-basis</code> property.");'
|
||||
- text: 'El elemento <code>#box-2</code> debe tener un valor de <code>flex-basis</code> de <code>20em</code> '.
|
||||
- text: 'El elemento <code>#box-2</code> debe tener un valor de <code>flex-basis</code> de <code>20em</code> '
|
||||
testString: 'assert(code.match(/#box-2\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?20em;/g), "The <code>#box-2</code> element should have a <code>flex-basis</code> value of <code>20em</code>.");'
|
||||
|
||||
```
|
||||
|
||||
@@ -7,13 +7,13 @@ videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Los dos últimos desafíos utilizaron la propiedad de <code>flex-direction</code> establecida en fila. Esta propiedad también puede crear una columna apilando verticalmente los hijos de un contenedor flexible.
|
||||
<section id='description'>
|
||||
Los dos últimos desafíos utilizaron la propiedad de <code>flex-direction</code> establecida en fila. Esta propiedad también puede crear una columna apilando verticalmente los hijos de un contenedor flexible.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Agregue la propiedad CSS <code>flex-direction</code> al elemento <code>#box-container</code> y asígnele un valor de columna.
|
||||
<section id='instructions'>
|
||||
Agregue la propiedad CSS <code>flex-direction</code> al elemento <code>#box-container</code> y asígnele un valor de columna.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@@ -21,7 +21,7 @@ Agregue la propiedad CSS <code>flex-direction</code> al elemento <code>#box-cont
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'El elemento <code>#box-container</code> debería tener una propiedad de <code>flex-direction</code> configurada en columna.'
|
||||
- text: 'El elemento <code>#box-container</code> debería tener una propiedad de <code>flex-direction</code> configurada en columna.'
|
||||
testString: 'assert($("#box-container").css("flex-direction") == "column", "The <code>#box-container</code> element should have a <code>flex-direction</code> property set to column.");'
|
||||
|
||||
```
|
||||
|
||||
@@ -7,15 +7,15 @@ videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Agregar <code>display: flex</code> a un elemento lo convierte en un contenedor flexible. Esto hace posible alinear cualquier elemento secundario de ese elemento en filas o columnas. Para ello, agregue la propiedad de <code>flex-direction</code> al elemento principal y configúrelo en fila o columna. La creación de una fila alineará a los hijos horizontalmente, y la creación de una columna alineará a los hijos verticalmente.
|
||||
Otras opciones para <code>flex-direction</code> son la fila-reversa y la columna-reversa.
|
||||
<strong>Nota</strong> <br> El valor predeterminado para la propiedad de <code>flex-direction</code> es fila.
|
||||
<section id='description'>
|
||||
Agregar <code>display: flex</code> a un elemento lo convierte en un contenedor flexible. Esto hace posible alinear cualquier elemento secundario de ese elemento en filas o columnas. Para ello, agregue la propiedad de <code>flex-direction</code> al elemento principal y configúrelo en fila o columna. La creación de una fila alineará a los hijos horizontalmente, y la creación de una columna alineará a los hijos verticalmente.
|
||||
Otras opciones para <code>flex-direction</code> son la fila-reversa y la columna-reversa.
|
||||
<strong>Nota</strong> <br> El valor predeterminado para la propiedad de <code>flex-direction</code> es fila.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Agregue la propiedad CSS <code>flex-direction</code> al elemento <code>#box-container</code> y asígnele un valor de fila-reversa.
|
||||
<section id='instructions'>
|
||||
Agregue la propiedad CSS <code>flex-direction</code> al elemento <code>#box-container</code> y asígnele un valor de fila-reversa.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@@ -23,7 +23,7 @@ Agregue la propiedad CSS <code>flex-direction</code> al elemento <code>#box-cont
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'El elemento <code>#box-container</code> debería tener una propiedad de <code>flex-direction</code> configurada para invertir la fila.'
|
||||
- text: 'El elemento <code>#box-container</code> debería tener una propiedad de <code>flex-direction</code> configurada para invertir la fila.'
|
||||
testString: 'assert($("#box-container").css("flex-direction") == "row-reverse", "The <code>#box-container</code> element should have a <code>flex-direction</code> property set to row-reverse.");'
|
||||
|
||||
```
|
||||
|
||||
@@ -7,14 +7,14 @@ videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Lo opuesto a <code>flex-shrink</code> es la propiedad de <code>flex-grow</code> . Recuerde que <code>flex-shrink</code> controla el tamaño de los elementos cuando el contenedor se reduce. La propiedad <code>flex-grow</code> controla el tamaño de los elementos cuando el contenedor principal se expande.
|
||||
Usando un ejemplo similar del último desafío, si un elemento tiene un valor de <code>flex-grow</code> de 1 y el otro tiene un valor de <code>flex-grow</code> de 3, el valor de 3 crecerá tres veces más que el otro.
|
||||
<section id='description'>
|
||||
Lo opuesto a <code>flex-shrink</code> es la propiedad de <code>flex-grow</code> . Recuerde que <code>flex-shrink</code> controla el tamaño de los elementos cuando el contenedor se reduce. La propiedad <code>flex-grow</code> controla el tamaño de los elementos cuando el contenedor principal se expande.
|
||||
Usando un ejemplo similar del último desafío, si un elemento tiene un valor de <code>flex-grow</code> de 1 y el otro tiene un valor de <code>flex-grow</code> de 3, el valor de 3 crecerá tres veces más que el otro.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Agregue la propiedad CSS <code>flex-grow</code> a <code>#box-1</code> y <code>#box-2</code> . Dé a <code>#box-1</code> un valor de 1 y <code>#box-2</code> un valor de 2.
|
||||
<section id='instructions'>
|
||||
Agregue la propiedad CSS <code>flex-grow</code> a <code>#box-1</code> y <code>#box-2</code> . Dé a <code>#box-1</code> un valor de 1 y <code>#box-2</code> un valor de 2.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@@ -22,9 +22,9 @@ Agregue la propiedad CSS <code>flex-grow</code> a <code>#box-1</code> y <code>#b
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'El elemento <code>#box-1</code> debe tener la propiedad <code>flex-grow</code> establecida en un valor de 1.'
|
||||
- text: 'El elemento <code>#box-1</code> debe tener la propiedad <code>flex-grow</code> establecida en un valor de 1.'
|
||||
testString: 'assert($("#box-1").css("flex-grow") == "1", "The <code>#box-1</code> element should have the <code>flex-grow</code> property set to a value of 1.");'
|
||||
- text: 'El elemento <code>#box-2</code> debe tener la propiedad <code>flex-grow</code> establecida en un valor de 2.'
|
||||
- text: 'El elemento <code>#box-2</code> debe tener la propiedad <code>flex-grow</code> establecida en un valor de 2.'
|
||||
testString: 'assert($("#box-2").css("flex-grow") == "2", "The <code>#box-2</code> element should have the <code>flex-grow</code> property set to a value of 2.");'
|
||||
|
||||
```
|
||||
|
||||
@@ -7,16 +7,16 @@ videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Hay un acceso directo disponible para configurar varias propiedades de flexión a la vez. Las propiedades <code>flex-grow</code> , <code>flex-shrink</code> y <code>flex-basis</code> pueden establecerse mediante el uso de la propiedad <code>flex</code> .
|
||||
Por ejemplo, <code>flex: 1 0 10px;</code> establecerá el elemento para <code>flex-grow: 1;</code> , <code>flex-shrink: 0;</code> , y <code>flex-basis: 10px;</code> .
|
||||
La configuración predeterminada de las propiedades es <code>flex: 0 1 auto;</code> .
|
||||
<section id='description'>
|
||||
Hay un acceso directo disponible para configurar varias propiedades de flexión a la vez. Las propiedades <code>flex-grow</code> , <code>flex-shrink</code> y <code>flex-basis</code> pueden establecerse mediante el uso de la propiedad <code>flex</code> .
|
||||
Por ejemplo, <code>flex: 1 0 10px;</code> establecerá el elemento para <code>flex-grow: 1;</code> , <code>flex-shrink: 0;</code> , y <code>flex-basis: 10px;</code> .
|
||||
La configuración predeterminada de las propiedades es <code>flex: 0 1 auto;</code> .
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Agregue la propiedad CSS <code>flex</code> tanto a <code>#box-1</code> como <code>#box-2</code> . Dé a <code>#box-1</code> los valores para que su <code>flex-grow</code> sea 2, <code>flex-shrink</code> sea 2, y su <code>flex-basis</code> sea 150px. Dé a <code>#box-2</code> los valores para que su <code>flex-grow</code> sea 1, <code>flex-shrink</code> sea 1, y su <code>flex-basis</code> sea 150px.
|
||||
Estos valores harán que <code>#box-1</code> crezca para llenar el espacio adicional al doble de la tasa de <code>#box-2</code> cuando el contenedor es mayor que 300px y se contraerá al doble de la tasa de <code>#box-2</code> cuando el contenedor sea menor de 300px . 300px es el tamaño combinado de los valores de <code>flex-basis</code> de las dos cajas.
|
||||
<section id='instructions'>
|
||||
Agregue la propiedad CSS <code>flex</code> tanto a <code>#box-1</code> como <code>#box-2</code> . Dé a <code>#box-1</code> los valores para que su <code>flex-grow</code> sea 2, <code>flex-shrink</code> sea 2, y su <code>flex-basis</code> sea 150px. Dé a <code>#box-2</code> los valores para que su <code>flex-grow</code> sea 1, <code>flex-shrink</code> sea 1, y su <code>flex-basis</code> sea 150px.
|
||||
Estos valores harán que <code>#box-1</code> crezca para llenar el espacio adicional al doble de la tasa de <code>#box-2</code> cuando el contenedor es mayor que 300px y se contraerá al doble de la tasa de <code>#box-2</code> cuando el contenedor sea menor de 300px . 300px es el tamaño combinado de los valores de <code>flex-basis</code> de las dos cajas.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@@ -24,11 +24,11 @@ Estos valores harán que <code>#box-1</code> crezca para llenar el espacio adici
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'El elemento <code>#box-1</code> debe tener la propiedad <code>flex</code> establecida en un valor de 2 2 150px.'
|
||||
- text: 'El elemento <code>#box-1</code> debe tener la propiedad <code>flex</code> establecida en un valor de 2 2 150px.'
|
||||
testString: 'assert($("#box-1").css("flex-grow") == "2" && $("#box-1").css("flex-shrink") == "2" && $("#box-1").css("flex-basis") == "150px", "The <code>#box-1</code> element should have the <code>flex</code> property set to a value of 2 2 150px.");'
|
||||
- text: 'El elemento <code>#box-2</code> debe tener la propiedad <code>flex</code> establecida en un valor de 1 1 150px.'
|
||||
- text: 'El elemento <code>#box-2</code> debe tener la propiedad <code>flex</code> establecida en un valor de 1 1 150px.'
|
||||
testString: 'assert($("#box-2").css("flex-grow") == "1" && $("#box-2").css("flex-shrink") == "1" && $("#box-2").css("flex-basis") == "150px", "The <code>#box-2</code> element should have the <code>flex</code> property set to a value of 1 1 150px.");'
|
||||
- text: 'Su código debe usar la propiedad <code>flex</code> para <code>#box-1</code> y <code>#box-2</code> .'
|
||||
- text: 'Su código debe usar la propiedad <code>flex</code> para <code>#box-1</code> y <code>#box-2</code> .'
|
||||
testString: 'assert(code.match(/flex:\s*?\d\s+?\d\s+?150px;/g).length == 2, "Your code should use the <code>flex</code> property for <code>#box-1</code> and <code>#box-2</code>.");'
|
||||
|
||||
```
|
||||
|
||||
@@ -7,15 +7,15 @@ videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Hasta ahora, todas las propiedades en los desafíos se aplican al contenedor de flexión (el elemento principal de los elementos de flexión). Sin embargo, hay varias propiedades útiles para los elementos flexibles.
|
||||
La primera es la propiedad <code>flex-shrink</code> . Cuando se usa, permite que un elemento se encoja si el contenedor flexible es demasiado pequeño. Los elementos se reducen cuando el ancho del contenedor principal es menor que el ancho combinado de todos los elementos flexibles dentro de él.
|
||||
La propiedad <code>flex-shrink</code> toma números como valores. Cuanto mayor sea el número, más se reducirá en comparación con los otros elementos del contenedor. Por ejemplo, si un elemento tiene un valor de <code>flex-shrink</code> de 1 y el otro tiene un valor de <code>flex-shrink</code> de 3, el valor de 3 se contraerá tres veces más que el otro.
|
||||
<section id='description'>
|
||||
Hasta ahora, todas las propiedades en los desafíos se aplican al contenedor de flexión (el elemento principal de los elementos de flexión). Sin embargo, hay varias propiedades útiles para los elementos flexibles.
|
||||
La primera es la propiedad <code>flex-shrink</code> . Cuando se usa, permite que un elemento se encoja si el contenedor flexible es demasiado pequeño. Los elementos se reducen cuando el ancho del contenedor principal es menor que el ancho combinado de todos los elementos flexibles dentro de él.
|
||||
La propiedad <code>flex-shrink</code> toma números como valores. Cuanto mayor sea el número, más se reducirá en comparación con los otros elementos del contenedor. Por ejemplo, si un elemento tiene un valor de <code>flex-shrink</code> de 1 y el otro tiene un valor de <code>flex-shrink</code> de 3, el valor de 3 se contraerá tres veces más que el otro.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Agregue la propiedad CSS <code>flex-shrink</code> a <code>#box-1</code> y <code>#box-2</code> . Dé a <code>#box-1</code> un valor de 1 y <code>#box-2</code> un valor de 2.
|
||||
<section id='instructions'>
|
||||
Agregue la propiedad CSS <code>flex-shrink</code> a <code>#box-1</code> y <code>#box-2</code> . Dé a <code>#box-1</code> un valor de 1 y <code>#box-2</code> un valor de 2.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@@ -23,9 +23,9 @@ Agregue la propiedad CSS <code>flex-shrink</code> a <code>#box-1</code> y <code>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'El elemento <code>#box-1</code> debe tener la propiedad <code>flex-shrink</code> establecida en un valor de 1'.
|
||||
- text: 'El elemento <code>#box-1</code> debe tener la propiedad <code>flex-shrink</code> establecida en un valor de 1'
|
||||
testString: 'assert($("#box-1").css("flex-shrink") == "1", "The <code>#box-1</code> element should have the <code>flex-shrink</code> property set to a value of 1.");'
|
||||
- text: 'El elemento <code>#box-2</code> debe tener la propiedad <code>flex-shrink</code> establecida en un valor de 2'.
|
||||
- text: 'El elemento <code>#box-2</code> debe tener la propiedad <code>flex-shrink</code> establecida en un valor de 2'
|
||||
testString: 'assert($("#box-2").css("flex-shrink") == "2", "The <code>#box-2</code> element should have the <code>flex-shrink</code> property set to a value of 2.");'
|
||||
|
||||
```
|
||||
|
||||
@@ -7,16 +7,16 @@ videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
CSS flexbox tiene una función para dividir un elemento flexible en varias filas (o columnas). Por defecto, un contenedor flexible encajará todos los elementos flexibles juntos. Por ejemplo, una fila estará en una sola línea.
|
||||
Sin embargo, al usar la propiedad <code>flex-wrap</code> , le dice a CSS que envuelva los elementos. Esto significa que los elementos adicionales se mueven a una nueva fila o columna. El punto de ruptura de donde ocurre la envoltura depende del tamaño de los artículos y del tamaño del contenedor.
|
||||
CSS también tiene opciones para la dirección de la envoltura:
|
||||
<ul><li> <code>nowrap</code> : esta es la configuración predeterminada y no envuelve los elementos. </li><li> <code>wrap</code> : envuelve los elementos de izquierda a derecha si están en una fila, o de arriba a abajo si están en una columna. </li><li> <code>wrap-reverse</code> : envuelve los elementos de abajo a arriba si están en una fila, o de derecha a izquierda si están en una columna. </li></ul>
|
||||
<section id='description'>
|
||||
CSS flexbox tiene una función para dividir un elemento flexible en varias filas (o columnas). Por defecto, un contenedor flexible encajará todos los elementos flexibles juntos. Por ejemplo, una fila estará en una sola línea.
|
||||
Sin embargo, al usar la propiedad <code>flex-wrap</code> , le dice a CSS que envuelva los elementos. Esto significa que los elementos adicionales se mueven a una nueva fila o columna. El punto de ruptura de donde ocurre la envoltura depende del tamaño de los artículos y del tamaño del contenedor.
|
||||
CSS también tiene opciones para la dirección de la envoltura:
|
||||
<ul><li> <code>nowrap</code> : esta es la configuración predeterminada y no envuelve los elementos. </li><li> <code>wrap</code> : envuelve los elementos de izquierda a derecha si están en una fila, o de arriba a abajo si están en una columna. </li><li> <code>wrap-reverse</code> : envuelve los elementos de abajo a arriba si están en una fila, o de derecha a izquierda si están en una columna. </li></ul>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
El diseño actual tiene demasiados cuadros para una fila. Agregue la propiedad CSS <code>flex-wrap</code> al elemento <code>#box-container</code> y asígnele un valor de wrap.
|
||||
<section id='instructions'>
|
||||
El diseño actual tiene demasiados cuadros para una fila. Agregue la propiedad CSS <code>flex-wrap</code> al elemento <code>#box-container</code> y asígnele un valor de wrap.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@@ -24,7 +24,7 @@ El diseño actual tiene demasiados cuadros para una fila. Agregue la propiedad C
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'El elemento <code>#box-container</code> debería tener la propiedad <code>flex-wrap</code> establecida en un valor de wrap.'
|
||||
- text: 'El elemento <code>#box-container</code> debería tener la propiedad <code>flex-wrap</code> establecida en un valor de wrap.'
|
||||
testString: 'assert($("#box-container").css("flex-wrap") == "wrap", "The <code>#box-container</code> element should have the <code>flex-wrap</code> property set to a value of wrap.");'
|
||||
|
||||
```
|
||||
|
||||
@@ -7,13 +7,13 @@ videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
El último desafío mostró un ejemplo de la propiedad <code>justify-content</code> . Para la inserción de tweets, esta propiedad se puede aplicar para alinear los elementos en el elemento <code>.profile-name</code> .
|
||||
<section id='description'>
|
||||
El último desafío mostró un ejemplo de la propiedad <code>justify-content</code> . Para la inserción de tweets, esta propiedad se puede aplicar para alinear los elementos en el elemento <code>.profile-name</code> .
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Añadir la propiedad CSS <code>justify-content</code> de la cabecera del <code>.profile-name</code> del elemento y establezca el valor en cualquiera de las opciones desde el último desafío.
|
||||
<section id='instructions'>
|
||||
Añadir la propiedad CSS <code>justify-content</code> de la cabecera del <code>.profile-name</code> del elemento y establezca el valor en cualquiera de las opciones desde el último desafío.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@@ -21,7 +21,7 @@ Añadir la propiedad CSS <code>justify-content</code> de la cabecera del <code>.
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'El elemento <code>.profile-name</code> debe tener la propiedad <code>.profile-name</code> <code>justify-content</code> establecida en cualquiera de estos valores: centro, inicio flexible, extremo flexible, espacio intermedio o espacio-alrededor.'
|
||||
- text: 'El elemento <code>.profile-name</code> debe tener la propiedad <code>.profile-name</code> <code>justify-content</code> establecida en cualquiera de estos valores: centro, inicio flexible, extremo flexible, espacio intermedio o espacio-alrededor.'
|
||||
testString: 'assert(code.match(/header\s.profile-name\s*{\s*?.*?\s*?.*?\s*?\s*?.*?\s*?justify-content\s*:\s*(center|flex-start|flex-end|space-between|space-around)\s*;/g), "The <code>.profile-name</code> element should have the <code>justify-content</code> property set to any of these values: center, flex-start, flex-end, space-between, or space-around.");'
|
||||
|
||||
```
|
||||
|
||||
@@ -7,13 +7,13 @@ videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
La propiedad <code>order</code> se usa para decirle a CSS el orden en que aparecen los elementos flexibles en el contenedor flex. De forma predeterminada, los elementos aparecerán en el mismo orden en que vienen en el código fuente HTML. La propiedad toma números como valores y se pueden usar números negativos.
|
||||
<section id='description'>
|
||||
La propiedad <code>order</code> se usa para decirle a CSS el orden en que aparecen los elementos flexibles en el contenedor flex. De forma predeterminada, los elementos aparecerán en el mismo orden en que vienen en el código fuente HTML. La propiedad toma números como valores y se pueden usar números negativos.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Agregue el <code>order</code> propiedades CSS a <code>#box-1</code> y <code>#box-2</code> . Dé a <code>#box-1</code> un valor de 2 y a <code>#box-2</code> un valor de 1.
|
||||
<section id='instructions'>
|
||||
Agregue el <code>order</code> propiedades CSS a <code>#box-1</code> y <code>#box-2</code> . Dé a <code>#box-1</code> un valor de 2 y a <code>#box-2</code> un valor de 1.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@@ -21,9 +21,9 @@ Agregue el <code>order</code> propiedades CSS a <code>#box-1</code> y <code>#box
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'El elemento <code>#box-1</code> debe tener la propiedad de <code>order</code> establecida en un valor de 2.'
|
||||
- text: 'El elemento <code>#box-1</code> debe tener la propiedad de <code>order</code> establecida en un valor de 2.'
|
||||
testString: 'assert($("#box-1").css("order") == "2", "The <code>#box-1</code> element should have the <code>order</code> property set to a value of 2.");'
|
||||
- text: 'El elemento <code>#box-2</code> debe tener la propiedad de <code>order</code> establecida en un valor de 1.'
|
||||
- text: 'El elemento <code>#box-2</code> debe tener la propiedad de <code>order</code> establecida en un valor de 1.'
|
||||
testString: 'assert($("#box-2").css("order") == "1", "The <code>#box-2</code> element should have the <code>order</code> property set to a value of 1.");'
|
||||
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user