docs: add Spanish docs
This commit is contained in:
Beau Carnes
@@ -0,0 +1,153 @@
|
||||
---
|
||||
id: 587d78ab367417b2b2512af1
|
||||
title: Add Flex Superpowers to the Tweet Embed
|
||||
localeTitle: Añadir Flex Superpowers al Tweet Insertar
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
A la derecha está la inserción de tweets que se utilizará como ejemplo práctico. Algunos de los elementos se verían mejor con un diseño diferente. El último desafío demostró <code>display: flex</code> . Aquí lo agregará a varios componentes en la inserción de tweets para comenzar a ajustar su posicionamiento.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Agregue la <code>display: flex</code> propiedades CSS <code>display: flex</code> a todos los elementos siguientes: tenga en cuenta que los selectores ya están configurados en el <code>header</code> CSS:
|
||||
, el <code>.profile-name</code> de <code>.follow-btn</code> del encabezado, <code>.follow-btn</code> del encabezado, <code>h3</code> y <code>h4</code> del encabezado el <code>footer</code> , y los <code>.stats</code> de pie de <code>.stats</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Su <code>header</code> debe tener una propiedad de <code>display</code> configurada para flexionar.
|
||||
testString: 'assert($("header").css("display") == "flex", "Your <code>header</code> should have a <code>display</code> property set to flex.");'
|
||||
- text: Su <code>footer</code> debe tener una propiedad de <code>display</code> configurada para flexionar.
|
||||
testString: 'assert($("footer").css("display") == "flex", "Your <code>footer</code> should have a <code>display</code> property set to flex.");'
|
||||
- text: Tu <code>h3</code> debería tener una propiedad de <code>display</code> configurada para flexionar.
|
||||
testString: 'assert($("h3").css("display") == "flex", "Your <code>h3</code> should have a <code>display</code> property set to flex.");'
|
||||
- text: Tu <code>h4</code> debería tener una propiedad de <code>display</code> configurada para flexionar.
|
||||
testString: 'assert($("h4").css("display") == "flex", "Your <code>h4</code> should have a <code>display</code> property set to flex.");'
|
||||
- text: Su <code>.profile-name</code> debe tener una propiedad de <code>display</code> configurada para flexionar.
|
||||
testString: 'assert($(".profile-name").css("display") == "flex", "Your <code>.profile-name</code> should have a <code>display</code> property set to flex.");'
|
||||
- text: Su <code>.follow-btn</code> debe tener una propiedad de <code>display</code> configurada para flexionar.
|
||||
testString: 'assert($(".follow-btn").css("display") == "flex", "Your <code>.follow-btn</code> should have a <code>display</code> property set to flex.");'
|
||||
- text: Sus <code>.stats</code> deben tener una propiedad de <code>display</code> configurada para flexionar.
|
||||
testString: 'assert($(".stats").css("display") == "flex", "Your <code>.stats</code> should have a <code>display</code> property set to flex.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
header {
|
||||
|
||||
}
|
||||
header .profile-thumbnail {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
header .profile-name {
|
||||
|
||||
margin-left: 10px;
|
||||
}
|
||||
header .follow-btn {
|
||||
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
header .follow-btn button {
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
}
|
||||
header h3, header h4 {
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
#inner p {
|
||||
margin-bottom: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
#inner hr {
|
||||
margin: 20px 0;
|
||||
border-style: solid;
|
||||
opacity: 0.1;
|
||||
}
|
||||
footer {
|
||||
|
||||
}
|
||||
footer .stats {
|
||||
|
||||
font-size: 15px;
|
||||
}
|
||||
footer .stats strong {
|
||||
font-size: 18px;
|
||||
}
|
||||
footer .stats .likes {
|
||||
margin-left: 10px;
|
||||
}
|
||||
footer .cta {
|
||||
margin-left: auto;
|
||||
}
|
||||
footer .cta button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<img src="https://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png" alt="Quincy Larson's profile picture" class="profile-thumbnail">
|
||||
<div class="profile-name">
|
||||
<h3>Quincy Larson</h3>
|
||||
<h4>@ossia</h4>
|
||||
</div>
|
||||
<div class="follow-btn">
|
||||
<button>Follow</button>
|
||||
</div>
|
||||
</header>
|
||||
<div id="inner">
|
||||
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
|
||||
<span class="date">1:32 PM - 12 Jan 2018</span>
|
||||
<hr>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="stats">
|
||||
<div class="Retweets">
|
||||
<strong>107</strong> Retweets
|
||||
</div>
|
||||
<div class="likes">
|
||||
<strong>431</strong> Likes
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta">
|
||||
<button class="share-btn">Share</button>
|
||||
<button class="retweet-btn">Retweet</button>
|
||||
<button class="like-btn">Like</button>
|
||||
</div>
|
||||
</footer>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,80 @@
|
||||
---
|
||||
id: 587d78ad367417b2b2512af8
|
||||
title: Align Elements Using the align-items Property
|
||||
localeTitle: Alinear elementos usando la propiedad align-items
|
||||
challengeType: 0
|
||||
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>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- 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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
background: gray;
|
||||
display: flex;
|
||||
height: 500px;
|
||||
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
width: 200px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
width: 200px;
|
||||
font-size: 18px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"><p>Hello</p></div>
|
||||
<div id="box-2"><p>Goodbye</p></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,80 @@
|
||||
---
|
||||
id: 587d78ac367417b2b2512af6
|
||||
title: Align Elements Using the justify-content Property
|
||||
localeTitle: Alinear elementos usando la propiedad justify-content
|
||||
challengeType: 0
|
||||
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>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- 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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
background: gray;
|
||||
display: flex;
|
||||
height: 500px;
|
||||
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,139 @@
|
||||
---
|
||||
id: 587d78ac367417b2b2512af5
|
||||
title: Apply the flex-direction Property to Create a Column in the Tweet Embed
|
||||
localeTitle: Aplique la propiedad de dirección flexible para crear una columna en la inserción de tweets
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
El <code>header</code> y el <code>footer</code> inserción del tweet usaron la propiedad de <code>flex-direction</code> anteriormente con un valor de fila. De manera similar, los elementos dentro del elemento <code>.profile-name</code> funcionarán bien apilados como una columna.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Agregue la propiedad CSS <code>flex-direction</code> al elemento <code>.profile-name</code> del encabezado y establezca el valor en columna.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: El elemento <code>.profile-name</code> debe tener una propiedad de <code>flex-direction</code> configurada en columna.
|
||||
testString: 'assert($(".profile-name").css("flex-direction") == "column", "The <code>.profile-name</code> element should have a <code>flex-direction</code> property set to column.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
header, footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
header .profile-thumbnail {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
header .profile-name {
|
||||
display: flex;
|
||||
|
||||
margin-left: 10px;
|
||||
}
|
||||
header .follow-btn {
|
||||
display: flex;
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
header .follow-btn button {
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
}
|
||||
header h3, header h4 {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
}
|
||||
#inner p {
|
||||
margin-bottom: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
#inner hr {
|
||||
margin: 20px 0;
|
||||
border-style: solid;
|
||||
opacity: 0.1;
|
||||
}
|
||||
footer .stats {
|
||||
display: flex;
|
||||
font-size: 15px;
|
||||
}
|
||||
footer .stats strong {
|
||||
font-size: 18px;
|
||||
}
|
||||
footer .stats .likes {
|
||||
margin-left: 10px;
|
||||
}
|
||||
footer .cta {
|
||||
margin-left: auto;
|
||||
}
|
||||
footer .cta button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<img src="https://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png" alt="Quincy Larson's profile picture" class="profile-thumbnail">
|
||||
<div class="profile-name">
|
||||
<h3>Quincy Larson</h3>
|
||||
<h4>@ossia</h4>
|
||||
</div>
|
||||
<div class="follow-btn">
|
||||
<button>Follow</button>
|
||||
</div>
|
||||
</header>
|
||||
<div id="inner">
|
||||
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
|
||||
<span class="date">1:32 PM - 12 Jan 2018</span>
|
||||
<hr>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="stats">
|
||||
<div class="Retweets">
|
||||
<strong>107</strong> Retweets
|
||||
</div>
|
||||
<div class="likes">
|
||||
<strong>431</strong> Likes
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta">
|
||||
<button class="share-btn">Share</button>
|
||||
<button class="retweet-btn">Retweet</button>
|
||||
<button class="like-btn">Like</button>
|
||||
</div>
|
||||
</footer>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,146 @@
|
||||
---
|
||||
id: 587d78ab367417b2b2512af3
|
||||
title: Apply the flex-direction Property to Create Rows in the Tweet Embed
|
||||
localeTitle: Aplique la propiedad de dirección flexible para crear filas en el Tweet Insertar
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
El <code>header</code> y el <code>footer</code> de <code>footer</code> en el ejemplo de inserción de tweets tienen elementos secundarios que se podrían organizar como filas usando la propiedad de <code>flex-direction</code> . Esto le dice a CSS que alinee a los niños horizontalmente.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Agregue la propiedad CSS <code>flex-direction</code> al <code>header</code> y al <code>footer</code> y establezca el valor en fila.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: El <code>header</code> debe tener una propiedad de <code>flex-direction</code> establecida en fila.
|
||||
testString: 'assert(code.match(/header\s*?{[^}]*?flex-direction:\s*?row;/g), "The <code>header</code> should have a <code>flex-direction</code> property set to row.");'
|
||||
- text: El <code>footer</code> debe tener una propiedad de <code>flex-direction</code> configurada en fila.
|
||||
testString: 'assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g), "The <code>footer</code> should have a <code>flex-direction</code> property set to row.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
header {
|
||||
display: flex;
|
||||
|
||||
}
|
||||
header .profile-thumbnail {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
header .profile-name {
|
||||
display: flex;
|
||||
margin-left: 10px;
|
||||
}
|
||||
header .follow-btn {
|
||||
display: flex;
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
header .follow-btn button {
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
}
|
||||
header h3, header h4 {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
}
|
||||
#inner p {
|
||||
margin-bottom: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
#inner hr {
|
||||
margin: 20px 0;
|
||||
border-style: solid;
|
||||
opacity: 0.1;
|
||||
}
|
||||
footer {
|
||||
display: flex;
|
||||
|
||||
}
|
||||
footer .stats {
|
||||
display: flex;
|
||||
font-size: 15px;
|
||||
}
|
||||
footer .stats strong {
|
||||
font-size: 18px;
|
||||
}
|
||||
footer .stats .likes {
|
||||
margin-left: 10px;
|
||||
}
|
||||
footer .cta {
|
||||
margin-left: auto;
|
||||
}
|
||||
footer .cta button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<img src="https://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png" alt="Quincy Larson's profile picture" class="profile-thumbnail">
|
||||
<div class="profile-name">
|
||||
<h3>Quincy Larson</h3>
|
||||
<h4>@ossia</h4>
|
||||
</div>
|
||||
<div class="follow-btn">
|
||||
<button>Follow</button>
|
||||
</div>
|
||||
</header>
|
||||
<div id="inner">
|
||||
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
|
||||
<span class="date">1:32 PM - 12 Jan 2018</span>
|
||||
<hr>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="stats">
|
||||
<div class="Retweets">
|
||||
<strong>107</strong> Retweets
|
||||
</div>
|
||||
<div class="likes">
|
||||
<strong>431</strong> Likes
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta">
|
||||
<button class="share-btn">Share</button>
|
||||
<button class="retweet-btn">Retweet</button>
|
||||
<button class="like-btn">Like</button>
|
||||
</div>
|
||||
</footer>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = "header {flex-direction: row;} footer {flex-direction: row;}"
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,76 @@
|
||||
---
|
||||
id: 587d78ab367417b2b2512af0
|
||||
title: 'Use display
|
||||
localeTitle: 'Usar pantalla: flex to Position Two Boxes'
|
||||
challengeType: 0
|
||||
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>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Agregue la <code>display</code> propiedades CSS a <code>#box-container</code> y establezca su valor en flex.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- 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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
height: 500px;
|
||||
|
||||
}
|
||||
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
|
||||
}
|
||||
</style>
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,142 @@
|
||||
---
|
||||
id: 587d78ad367417b2b2512af9
|
||||
title: Use the align-items Property in the Tweet Embed
|
||||
localeTitle: Use la propiedad align-items en el Tweet Insertar
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
El último desafío introdujo la propiedad <code>align-items</code> y dio un ejemplo. Esta propiedad se puede aplicar a algunos elementos de inserción de tweets para alinear los elementos flexibles dentro de ellos.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Agregue la propiedad CSS <code>align-items</code> al <code>align-items</code> <code>.follow-btn</code> del encabezado. Establezca el valor en el centro.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: El elemento <code>.follow-btn</code> debe tener la propiedad <code>align-items</code> establecida en un valor de center.
|
||||
testString: 'assert($(".follow-btn").css("align-items") == "center", "The <code>.follow-btn</code> element should have the <code>align-items</code> property set to a value of center.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
header, footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
header .profile-thumbnail {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
header .profile-name {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-left: 10px;
|
||||
}
|
||||
header .follow-btn {
|
||||
display: flex;
|
||||
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
header .follow-btn button {
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
}
|
||||
header h3, header h4 {
|
||||
display: flex;
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
#inner p {
|
||||
margin-bottom: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
#inner hr {
|
||||
margin: 20px 0;
|
||||
border-style: solid;
|
||||
opacity: 0.1;
|
||||
}
|
||||
footer .stats {
|
||||
display: flex;
|
||||
font-size: 15px;
|
||||
}
|
||||
footer .stats strong {
|
||||
font-size: 18px;
|
||||
}
|
||||
footer .stats .likes {
|
||||
margin-left: 10px;
|
||||
}
|
||||
footer .cta {
|
||||
margin-left: auto;
|
||||
}
|
||||
footer .cta button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<img src="https://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png" alt="Quincy Larson's profile picture" class="profile-thumbnail">
|
||||
<div class="profile-name">
|
||||
<h3>Quincy Larson</h3>
|
||||
<h4>@ossia</h4>
|
||||
</div>
|
||||
<div class="follow-btn">
|
||||
<button>Follow</button>
|
||||
</div>
|
||||
</header>
|
||||
<div id="inner">
|
||||
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
|
||||
<span class="date">1:32 PM - 12 Jan 2018</span>
|
||||
<hr>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="stats">
|
||||
<div class="Retweets">
|
||||
<strong>107</strong> Retweets
|
||||
</div>
|
||||
<div class="likes">
|
||||
<strong>431</strong> Likes
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta">
|
||||
<button class="share-btn">Share</button>
|
||||
<button class="retweet-btn">Retweet</button>
|
||||
<button class="like-btn">Like</button>
|
||||
</div>
|
||||
</footer>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,78 @@
|
||||
---
|
||||
id: 587d78af367417b2b2512b00
|
||||
title: Use the align-self Property
|
||||
localeTitle: Usa la propiedad align-self.
|
||||
challengeType: 0
|
||||
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>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- 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.'
|
||||
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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,81 @@
|
||||
---
|
||||
id: 587d78ae367417b2b2512afd
|
||||
title: Use the flex-basis Property to Set the Initial Size of an Item
|
||||
localeTitle: Utilice la propiedad de base flexible para establecer el tamaño inicial de un artículo
|
||||
challengeType: 0
|
||||
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>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- 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> '.
|
||||
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> .'
|
||||
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> '.
|
||||
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>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
height: 200px;
|
||||
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
height: 200px;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,74 @@
|
||||
---
|
||||
id: 587d78ac367417b2b2512af4
|
||||
title: Use the flex-direction Property to Make a Column
|
||||
localeTitle: Usa la propiedad de dirección flexible para hacer una columna
|
||||
challengeType: 0
|
||||
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>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- 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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,76 @@
|
||||
---
|
||||
id: 587d78ab367417b2b2512af2
|
||||
title: Use the flex-direction Property to Make a Row
|
||||
localeTitle: Utilice la propiedad de dirección flexible para hacer una fila
|
||||
challengeType: 0
|
||||
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>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- 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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 587d78ae367417b2b2512afc
|
||||
title: Use the flex-grow Property to Expand Items
|
||||
localeTitle: Utilice la propiedad flex-grow para expandir elementos
|
||||
challengeType: 0
|
||||
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>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- 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.'
|
||||
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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
height: 200px;
|
||||
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
height: 200px;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,80 @@
|
||||
---
|
||||
id: 587d78ae367417b2b2512afe
|
||||
title: Use the flex Shorthand Property
|
||||
localeTitle: Utilice la propiedad de la taquigrafía de flex
|
||||
challengeType: 0
|
||||
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>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- 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.'
|
||||
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> .'
|
||||
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>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 587d78ad367417b2b2512afb
|
||||
title: Use the flex-shrink Property to Shrink Items
|
||||
localeTitle: Utilice la propiedad flex-shrink para reducir artículos
|
||||
challengeType: 0
|
||||
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>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- 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'.
|
||||
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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,102 @@
|
||||
---
|
||||
id: 587d78ad367417b2b2512afa
|
||||
title: Use the flex-wrap Property to Wrap a Row or Column
|
||||
localeTitle: Utilice la propiedad flex-wrap para envolver una fila o columna
|
||||
challengeType: 0
|
||||
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>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- 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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
background: gray;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
width: 25%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
width: 25%;
|
||||
height: 50%;
|
||||
}
|
||||
#box-3 {
|
||||
background-color: violet;
|
||||
width: 25%;
|
||||
height: 50%;
|
||||
}
|
||||
#box-4 {
|
||||
background-color: yellow;
|
||||
width: 25%;
|
||||
height: 50%;
|
||||
}
|
||||
#box-5 {
|
||||
background-color: green;
|
||||
width: 25%;
|
||||
height: 50%;
|
||||
}
|
||||
#box-6 {
|
||||
background-color: black;
|
||||
width: 25%;
|
||||
height: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
<div id="box-3"></div>
|
||||
<div id="box-4"></div>
|
||||
<div id="box-5"></div>
|
||||
<div id="box-6"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,142 @@
|
||||
---
|
||||
id: 587d78ac367417b2b2512af7
|
||||
title: Use the justify-content Property in the Tweet Embed
|
||||
localeTitle: Use la propiedad justify-content en el Tweet Insertar
|
||||
challengeType: 0
|
||||
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>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```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.'
|
||||
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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
header, footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
header .profile-thumbnail {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
header .profile-name {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
margin-left: 10px;
|
||||
}
|
||||
header .follow-btn {
|
||||
display: flex;
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
header .follow-btn button {
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
}
|
||||
header h3, header h4 {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
}
|
||||
#inner p {
|
||||
margin-bottom: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
#inner hr {
|
||||
margin: 20px 0;
|
||||
border-style: solid;
|
||||
opacity: 0.1;
|
||||
}
|
||||
footer .stats {
|
||||
display: flex;
|
||||
font-size: 15px;
|
||||
}
|
||||
footer .stats strong {
|
||||
font-size: 18px;
|
||||
}
|
||||
footer .stats .likes {
|
||||
margin-left: 10px;
|
||||
}
|
||||
footer .cta {
|
||||
margin-left: auto;
|
||||
}
|
||||
footer .cta button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<img src="https://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png" alt="Quincy Larson's profile picture" class="profile-thumbnail">
|
||||
<div class="profile-name">
|
||||
<h3>Quincy Larson</h3>
|
||||
<h4>@ossia</h4>
|
||||
</div>
|
||||
<div class="follow-btn">
|
||||
<button>Follow</button>
|
||||
</div>
|
||||
</header>
|
||||
<div id="inner">
|
||||
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
|
||||
<span class="date">1:32 PM - 12 Jan 2018</span>
|
||||
<hr>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="stats">
|
||||
<div class="Retweets">
|
||||
<strong>107</strong> Retweets
|
||||
</div>
|
||||
<div class="likes">
|
||||
<strong>431</strong> Likes
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta">
|
||||
<button class="share-btn">Share</button>
|
||||
<button class="retweet-btn">Retweet</button>
|
||||
<button class="like-btn">Like</button>
|
||||
</div>
|
||||
</footer>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = "header .profile-name {display: flex; flex-direction: column; justify-content: center; margin-left: 10px;}"
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 587d78ae367417b2b2512aff
|
||||
title: Use the order Property to Rearrange Items
|
||||
localeTitle: Utilice la propiedad de orden para reorganizar artículos
|
||||
challengeType: 0
|
||||
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>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- 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.'
|
||||
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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
Reference in New Issue
Block a user