chore(i8n,learn): processed translations
This commit is contained in:
Crowdin Bot
committed by
Mrugesh Mohapatra
Mrugesh Mohapatra
parent
15047f2d90
commit
e5c44a3ae5
@ -0,0 +1,258 @@
|
||||
---
|
||||
id: 587d78ab367417b2b2512af1
|
||||
title: Agrega superpoderes flex al tweet incrustado
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/c9W7MhM'
|
||||
forumTopicId: 301100
|
||||
dashedName: add-flex-superpowers-to-the-tweet-embed
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
A la derecha está el tweet incrustado que se utilizará como ejemplo práctico. Algunos de los elementos lucirían mejor con una disposición diferente. El último desafío demostró `display: flex`. Aquí la agregaras a varios componentes en el tweet incrustado para empezar a ajustar su posición.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Agrega la propiedad CSS `display: flex` a todos los siguientes elementos (ten en cuenta que los selectores ya están configurados en el CSS):
|
||||
|
||||
El encabezado `header`, el `.profile-name` del encabezado, el `.follow-btn` del encabezado, el `h3` y `h4` del encabezado, el `footer`, y el `.stats` del pie de página (footer).
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu `.follow-btn` debe mostrarse en la página. Asegúrate de desactivar las extensiones, como los bloqueadores de anuncios.
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
|
||||
```
|
||||
|
||||
Tu `header` debe tener una propiedad `display` establecida en `flex`.
|
||||
|
||||
```js
|
||||
assert($('header').css('display') == 'flex');
|
||||
```
|
||||
|
||||
Tu `footer` debe tener una propiedad `display` establecida en `flex`.
|
||||
|
||||
```js
|
||||
assert($('footer').css('display') == 'flex');
|
||||
```
|
||||
|
||||
Tu `h3` debe tener una propiedad `display` establecida en `flex`.
|
||||
|
||||
```js
|
||||
assert($('h3').css('display') == 'flex');
|
||||
```
|
||||
|
||||
Tu `h4` debe tener una propiedad `display` establecida en `flex`.
|
||||
|
||||
```js
|
||||
assert($('h4').css('display') == 'flex');
|
||||
```
|
||||
|
||||
Tu `.profile-name` debe tener una propiedad `display` establecida en `flex`.
|
||||
|
||||
```js
|
||||
assert($('.profile-name').css('display') == 'flex');
|
||||
```
|
||||
|
||||
Tu `.follow-btn` debe tener una propiedad `display` establecida en `flex`.
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').css('display') == 'flex');
|
||||
```
|
||||
|
||||
Tu `.stats` debe tener una propiedad `display` establecida en `flex`.
|
||||
|
||||
```js
|
||||
assert($('.stats').css('display') == 'flex');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" 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>
|
||||
```
|
||||
@ -0,0 +1,95 @@
|
||||
---
|
||||
id: 587d78ad367417b2b2512af8
|
||||
title: Alinea elementos mediante la propiedad align-items
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/c8aggtk'
|
||||
forumTopicId: 301101
|
||||
dashedName: align-elements-using-the-align-items-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
La propiedad `align-items` es similar a `justify-content`. Recuerda que la propiedad `justify-content` alineó los 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 vertical.
|
||||
|
||||
Los contenedores flexibles también tienen un **eje transversal** 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 `align-items` para alinear elementos flexibles a lo largo del eje transversal. Para una fila, le indica al CSS como empujar los elementos en toda la fila hacia arriba o hacia abajo dentro del contenedor. Y para una columna, como empujar todos los elementos hacia la izquierda o hacia la derecha dentro del contenedor.
|
||||
|
||||
Los diferentes valores disponibles para `align-items` incluyen:
|
||||
|
||||
<ul><li><code>flex-start</code>: alinea los elementos con el inicio del contenedor flexible. Para las filas, esto alinea los elementos a la parte superior del contenedor. Para las columnas, esto alinea los elementos a la parte izquierda del contenedor.</li><li><code>flex-end</code>: alinea los elementos con el final del contenedor flexible. Para las filas, esto alinea los elementos a la parte inferior del contenedor. Para las columnas, esto alinea los elementos a la parte derecha del contenedor.</li><li><code>center</code>: alinea los elementos hacia el centro. Para las filas, esto alinea los elementos verticalmente (igual espacio por encima y por debajo de los elementos). Para columnas, esto las alinea horizontalmente (igual espacio a la izquierda y a la derecha de los elementos).</li><li><code>stretch</code>: estira los elementos para llenar el contenedor flexible. Por ejemplo, los elementos de filas son estirados para llenar el contenedor flexible de arriba hacia abajo. Este es el valor predeterminado si no se especifica ningún tipo de <code>align-items</code>.</li><li><code>baseline</code>: alinea los elementos con sus líneas base. Una línea base es un concepto de texto, piensa en ella como la línea en la que se sitúan las letras.</li></ul>
|
||||
|
||||
# --instructions--
|
||||
|
||||
Un ejemplo ayuda a mostrar esta propiedad en acción. Agrega la propiedad CSS `align-items` al elemento `#box-container` y asígnale un valor de `center`.
|
||||
|
||||
**Extra**
|
||||
Prueba las otras opciones de la propiedad `align-items` en el editor de código para ver sus diferencias. Pero ten en cuenta que un valor de `center` es el único que superará este desafío.
|
||||
|
||||
# --hints--
|
||||
|
||||
El elemento `#box-container` debe tener una propiedad `align-items` establecida en un valor de `center`.
|
||||
|
||||
```js
|
||||
assert($('#box-container').css('align-items') == 'center');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
background: gray;
|
||||
display: flex;
|
||||
height: 500px;
|
||||
align-items: center;
|
||||
}
|
||||
#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>
|
||||
```
|
||||
@ -0,0 +1,95 @@
|
||||
---
|
||||
id: 587d78ac367417b2b2512af6
|
||||
title: Alinea elementos mediante la propiedad justify-content
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/c43gnHm'
|
||||
forumTopicId: 301102
|
||||
dashedName: align-elements-using-the-justify-content-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Algunas veces los elementos flexibles dentro de un contenedor flexible no llenan todo el espacio del contenedor. Es común querer indicarle al CSS cómo alinear y espaciar los elementos flexibles de una determinada manera. Afortunadamente, la propiedad `justify-content` tiene varias opciones para hacer esto. Pero primero, hay que entender alguna terminología importante antes de revisar dichas opciones.
|
||||
|
||||
[Aquí hay una imagen útil que muestra una fila para ilustrar los conceptos siguientes.](https://www.w3.org/TR/css-flexbox-1/images/flex-direction-terms.svg)
|
||||
|
||||
Recuerda que establecer un contenedor flexible como fila coloca los elementos flexibles uno al lado del otro de izquierda a derecha. Un contenedor flexible establecido como columna coloca los elementos flexibles apilados verticalmente de arriba a abajo. Para cada uno, la dirección en la que están dispuestos los elementos flexibles se llama el **eje principal**. Para una fila, esta es una línea horizontal que recorta cada elemento. Y para una columna, el eje principal es una línea vertical a través de los elementos.
|
||||
|
||||
Hay varias opciones para espaciar los elementos flexibles a lo largo de la línea que representa el eje principal. Uno de los más utilizados es `justify-content: center;`, el cual alinea hacia el centro todos los elementos flexibles dentro del contenedor flexible. Otras opciones incluyen:
|
||||
|
||||
<ul><li><code>flex-start</code>: alinea los elementos con el inicio del contenedor flex. Para una fila, esto empuja los elementos a la izquierda del contenedor. Para una columna, esto empuja los elementos a la parte superior del contenedor. Esta es la alineación predeterminada si no se especifica ningún tipo de <code>justify-content</code>.</li><li><code>flex-end</code>: alinea los elementos con el final del contenedor flex. Para una fila, esto empuja los elementos a la derecha del contenedor. Para una columna, esto empuja los elementos a la parte inferior del contenedor.</li><li><code>space-between</code>: alinea los elementos en el centro del eje principal, con un espacio extra entre los elementos. Los primeros y últimos elementos son empujados hasta el borde del contenedor flexible. Por ejemplo, en una fila el primer elemento está en el lado izquierdo del contenedor, el último elemento está en el lado derecho del contenedor, luego el espacio restante se distribuye uniformemente entre los demás elementos.</li><li><code>space-around</code>: similar a <code>space-between</code> pero los primeros y últimos elementos no están fijados en los bordes del contenedor, el espacio se distribuye alrededor de todos los elementos con la mitad de un espacio en ambos extremos del contenedor flexible.</li><li><code>space-evenly</code>: Distribuye el espacio de manera uniforme entre los elementos flexibles con un espacio completo en ambos extremos del contenedor flexible</li></ul>
|
||||
|
||||
# --instructions--
|
||||
|
||||
Un ejemplo ayuda a mostrar esta propiedad en acción. Agrega la propiedad CSS `justify-content` al elemento `#box-container` y asígnale un valor de `center`.
|
||||
|
||||
**Extra**
|
||||
Prueba las otras opciones de la propiedad `justify-content` en el editor de código para ver sus diferencias. Pero ten en cuenta que un valor de `center` es el único que superará este desafío.
|
||||
|
||||
# --hints--
|
||||
|
||||
El elemento `#box-container` debe tener una propiedad `justify-content` establecida en un valor de `center`.
|
||||
|
||||
```js
|
||||
assert($('#box-container').css('justify-content') == 'center');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
background: gray;
|
||||
display: flex;
|
||||
height: 500px;
|
||||
justify-content: center;
|
||||
}
|
||||
#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>
|
||||
```
|
||||
@ -0,0 +1,218 @@
|
||||
---
|
||||
id: 587d78ac367417b2b2512af5
|
||||
title: Aplica la propiedad flex-direction para crear filas en el tweet insertado
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cnzdVC9'
|
||||
forumTopicId: 301103
|
||||
dashedName: apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
El `header` y `footer` del tweet insertado usaron previamente la propiedad `flex-direction` con un valor de fila. De manera similar, los elementos dentro del elemento `.profile-name` funcionarían bien apilados como una columna.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Agrega la propiedad CSS `flex-direction` al elemento `.profile-name` del título y establezca el valor en `column`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu `.follow-btn` debe mostrarse en la página. Asegúrate de desactivar las extensiones, como los bloqueadores de anuncios.
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
|
||||
```
|
||||
|
||||
El elemento `.profile-name` debe tener una propiedad `flex-direction` establecida en `column`.
|
||||
|
||||
```js
|
||||
assert($('.profile-name').css('flex-direction') == 'column');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" 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>
|
||||
```
|
||||
@ -0,0 +1,230 @@
|
||||
---
|
||||
id: 587d78ab367417b2b2512af3
|
||||
title: Aplica la propiedad flex-direction para crear filas en el tweet Insertado
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cJb8yuq'
|
||||
forumTopicId: 301104
|
||||
dashedName: apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
El `header` y `footer` en el ejemplo de tweet insertado tienen elementos secundarios que podrían organizarse como filas usando la propiedad `flex-direction`. Esto le dice a CSS que alinee los hijos horizontalmente.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Agrega la propiedad CSS `flex-direction` tanto al `header` como al `footer` y establece el valor en `row`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu `.follow-btn` debe mostrarse en la página. Asegúrate de desactivar las extensiones, como los bloqueadores de anuncios.
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
|
||||
```
|
||||
|
||||
El `header` debe tener una propiedad `flex-direction` establecida en `row`.
|
||||
|
||||
```js
|
||||
assert(code.match(/header\s*?{[^}]*?flex-direction:\s*?row;/g));
|
||||
```
|
||||
|
||||
El `footer` debe tener una propiedad `flex-direction` establecida en `row`.
|
||||
|
||||
```js
|
||||
assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
header {
|
||||
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 {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
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://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" 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>
|
||||
```
|
||||
@ -0,0 +1,82 @@
|
||||
---
|
||||
id: 587d78ab367417b2b2512af0
|
||||
title: 'Utiliza display: flex para posicionar dos cajas'
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cgz3QS7'
|
||||
forumTopicId: 301105
|
||||
dashedName: use-display-flex-to-position-two-boxes
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Esta sección utiliza estilos de desafío alternos para mostrar cómo usar CSS para posicionar elementos de una manera flexible. En primer lugar, un desafío explicará la teoría, luego un desafío práctico utilizando un simple componente de tweet aplicará el concepto de flexbox.
|
||||
|
||||
Colocar la propiedad CSS `display: flex;` en un elemento te permite usar otras propiedades flex para construir una página responsiva.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Agrega la propiedad CSS `display` a `#box-container` y establece su valor como `flex`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`#box-container` debería tener la propiedad `display` establecida en un valor de `flex`.
|
||||
|
||||
```js
|
||||
assert($('#box-container').css('display') == 'flex');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
height: 500px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#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>
|
||||
```
|
||||
@ -0,0 +1,222 @@
|
||||
---
|
||||
id: 587d78ad367417b2b2512af9
|
||||
title: Utiliza la propiedad align-items en el tweet insertado
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cd3PNfq'
|
||||
forumTopicId: 301106
|
||||
dashedName: use-the-align-items-property-in-the-tweet-embed
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
El último desafío introdujo la propiedad `align-items` y dio un ejemplo. Esta propiedad se puede aplicar a unos cuantos elementos del tweet insertado para alinear los elementos flexibles dentro de ellos.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Agrega la propiedad CSS `align-items` al elemento `.follow-btn` del encabezado. Establece el valor a `center`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu `.follow-btn` debe representarse en la página. Asegúrate de desactivar las extensiones, como los bloqueadores de anuncios.
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
|
||||
```
|
||||
|
||||
El elemento `.follow-btn` debe tener la propiedad `align-items` establecida en un valor de `center`.
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').css('align-items') == 'center');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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;
|
||||
align-items: center;
|
||||
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://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" 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>
|
||||
```
|
||||
@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 587d78af367417b2b2512b00
|
||||
title: Usa la propiedad align-self
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cMbvzfv'
|
||||
forumTopicId: 301107
|
||||
dashedName: use-the-align-self-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
La última propiedad para elementos flexibles es `align-self`. Esta propiedad te permite ajustar la alineación de cada elemento individualmente, en lugar de ajustarlos todos a la vez. Esto es útil ya que otras técnicas comunes de ajuste usan las propiedades CSS `float`, `clear`, y `vertical-align`, las cuales no funcionan en elementos flexibles.
|
||||
|
||||
`align-self` acepta los mismos valores que `align-items` y reemplazará cualquier valor establecido por la propiedad `align-items`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Agrega la propiedad CSS `align-self` tanto a `#box-1` como a `#box-2`. Da a `#box-1` un valor de `center` y a `#box-2` un valor de `flex-end`.
|
||||
|
||||
# --hints--
|
||||
|
||||
El elemento `#box-1` debe tener la propiedad `align-self` establecida en un valor de `center`.
|
||||
|
||||
```js
|
||||
assert($('#box-1').css('align-self') == 'center');
|
||||
```
|
||||
|
||||
El elemento `#box-2` debe tener la propiedad `align-self` establecida en un valor de `flex-end`.
|
||||
|
||||
```js
|
||||
assert($('#box-2').css('align-self') == 'flex-end');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
align-self: center;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
align-self: flex-end;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,102 @@
|
||||
---
|
||||
id: 587d78ae367417b2b2512afd
|
||||
title: Usa la propiedad flex-basis para establecer el tamaño inicial de un elemento
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/c3d9nCa'
|
||||
forumTopicId: 301108
|
||||
dashedName: use-the-flex-basis-property-to-set-the-initial-size-of-an-item
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
La propiedad `flex-basis` especifica el tamaño inicial del elemento antes de que CSS haga ajustes con `flex-shrink` o `flex-grow`.
|
||||
|
||||
Las unidades usadas por la propiedad `flex-basis` son las mismas que otras propiedades de tamaño (`px`, `em`, `%`, etc.). El valor `auto` dimensiona los elementos basándose en el contenido.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Establece el tamaño inicial de las cajas usando `flex-basis`. Agrega la propiedad CSS `flex-basis` tanto a `#box-1` como a `#box-2`. Da a `#box-1` un valor de `10em` y a `#box-2` un valor de `20em`.
|
||||
|
||||
# --hints--
|
||||
|
||||
El elemento `#box-1` debe tener la propiedad `flex-basis`.
|
||||
|
||||
```js
|
||||
assert($('#box-1').css('flex-basis') != 'auto');
|
||||
```
|
||||
|
||||
El elemento `#box-1` debe tener un valor `flex-basis` de `10em`.
|
||||
|
||||
```js
|
||||
assert(code.match(/#box-1\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?10em;/g));
|
||||
```
|
||||
|
||||
El elemento `#box-2` debe tener la propiedad `flex-basis`.
|
||||
|
||||
```js
|
||||
assert($('#box-2').css('flex-basis') != 'auto');
|
||||
```
|
||||
|
||||
El elemento `#box-2` debe tener un valor `flex-basis` de `20em`.
|
||||
|
||||
```js
|
||||
assert(code.match(/#box-2\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?20em;/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
height: 200px;
|
||||
flex-basis: 10em;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
height: 200px;
|
||||
flex-basis: 20em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,82 @@
|
||||
---
|
||||
id: 587d78ac367417b2b2512af4
|
||||
title: Utiliza la propiedad flex-direction para hacer una columna
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cZmWeA4'
|
||||
forumTopicId: 301109
|
||||
dashedName: use-the-flex-direction-property-to-make-a-column
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Los dos últimos desafíos usaron la propiedad `flex-direction` establecida en `row`. Esta propiedad también puede crear una columna apilando verticalmente los hijos de un contenedor flex.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Agrega la propiedad CSS `flex-direction` al elemento `#box-container` y asígnale un valor de `column`.
|
||||
|
||||
# --hints--
|
||||
|
||||
El elemento `#box-container` debe tener una propiedad `flex-direction` establecida en `column`.
|
||||
|
||||
```js
|
||||
assert($('#box-container').css('flex-direction') == 'column');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
flex-direction: column;
|
||||
}
|
||||
#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>
|
||||
```
|
||||
@ -0,0 +1,86 @@
|
||||
---
|
||||
id: 587d78ab367417b2b2512af2
|
||||
title: Utiliza la propiedad flex-direction para hacer una fila
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cBEkbfJ'
|
||||
forumTopicId: 301110
|
||||
dashedName: use-the-flex-direction-property-to-make-a-row
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Agregando `display: flex` a un elemento lo convierte en un contenedor flexible. Esto permite alinear cualquier elemento secundario de ese elemento en filas o columnas. Para ello, agrega la propiedad `flex-direction` al elemento principal y configúralo en fila o columna. La creación de una fila alineara los elementos secundarios horizontalmente, y la creación de una columna alineara los elementos secundarios verticalmente.
|
||||
|
||||
Otras opciones para `flex-direction` son `row-reverse` y `column-reverse`.
|
||||
|
||||
**Nota:** El valor predeterminado para la propiedad `flex-direction` es `row`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Agrega la propiedad CSS `flex-direction` al elemento `#box-container` y asígnale un valor de `row-reverse`.
|
||||
|
||||
# --hints--
|
||||
|
||||
El elemento `#box-container` debe tener una propiedad `flex-direction` establecida en `row-reverse`.
|
||||
|
||||
```js
|
||||
assert($('#box-container').css('flex-direction') == 'row-reverse');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
#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>
|
||||
```
|
||||
@ -0,0 +1,90 @@
|
||||
---
|
||||
id: 587d78ae367417b2b2512afc
|
||||
title: Usa la propiedad flex-grow para expandir elementos
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/c2p78cg'
|
||||
forumTopicId: 301111
|
||||
dashedName: use-the-flex-grow-property-to-expand-items
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Lo contrario de `flex-shrink` es la propiedad `flex-grow`. Recuerda que `flex-shrink` controla el tamaño de los elementos cuando el contenedor se encoge. La propiedad `flex-grow` controla el tamaño de los elementos cuando el contenedor primario se expande.
|
||||
|
||||
Utilizando un ejemplo similar al del último desafío, si un elemento tiene un `flex-grow` con valor de `1` y el otro tiene un `flex-grow` con valor de `3`, el que tiene el valor de `3` crecerá tres veces más que el otro.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Agrega la propiedad CSS `flex-grow` tanto a `#box-1` como a `#box-2`. Da a `#box-1` un valor de `1` y a `#box-2` un valor de `2`.
|
||||
|
||||
# --hints--
|
||||
|
||||
El elemento `#box-1` debe tener la propiedad `flex-grow` establecida en un valor de `1`.
|
||||
|
||||
```js
|
||||
assert($('#box-1').css('flex-grow') == '1');
|
||||
```
|
||||
|
||||
El elemento `#box-2` debe tener la propiedad `flex-grow` establecida en un valor de `2`.
|
||||
|
||||
```js
|
||||
assert($('#box-2').css('flex-grow') == '2');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
height: 200px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
height: 200px;
|
||||
flex-grow: 2;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,106 @@
|
||||
---
|
||||
id: 587d78ae367417b2b2512afe
|
||||
title: Usa la propiedad abreviada flex
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cbpW2tE'
|
||||
forumTopicId: 301112
|
||||
dashedName: use-the-flex-shorthand-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Hay un atajo disponible para establecer varias propiedades flex a la vez. Las propiedades `flex-grow`, `flex-shrink`, y `flex-basis` pueden establecerse utilizando la propiedad `flex`.
|
||||
|
||||
Por ejemplo, `flex: 1 0 10px;` establecerá las propiedades del elemento en `flex-grow: 1;`, `flex-shrink: 0;`, y `flex-basis: 10px;`.
|
||||
|
||||
La configuración predeterminada de la propiedad es `flex: 0 1 auto;`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Agrega la propiedad CSS `flex` tanto a `#box-1` como a `#box-2`. Dale a `#box-1` los valores para que su `flex-grow` sea `2`, su `flex-shrink` sea `2`, y su `flex-basis` sea `150px`. Dale a `#box-2` los valores para que su `flex-grow` sea `1`, su `flex-shrink` sea `1`, y su `flex-basis` sea `150px`.
|
||||
|
||||
Estos valores causarán que para llenar el espacio extra `#box-1` crezca el doble de `#box-2` cuando el contenedor sea mayor que 300px y se reduzca al doble de `#box-2` cuando el contenedor sea menor de 300px. 300px es el tamaño combinado de los valores de `flex-basis` de las dos cajas.
|
||||
|
||||
# --hints--
|
||||
|
||||
El elemento `#box-1` debe tener la propiedad `flex` establecida en un valor de `2 2 150px`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('#box-1').css('flex-grow') == '2' &&
|
||||
$('#box-1').css('flex-shrink') == '2' &&
|
||||
$('#box-1').css('flex-basis') == '150px'
|
||||
);
|
||||
```
|
||||
|
||||
El elemento `#box-2` debe tener la propiedad `flex` establecida en un valor de `1 1 150px`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('#box-2').css('flex-grow') == '1' &&
|
||||
$('#box-2').css('flex-shrink') == '1' &&
|
||||
$('#box-2').css('flex-basis') == '150px'
|
||||
);
|
||||
```
|
||||
|
||||
Tu código debe usar la propiedad `flex` para `#box-1` y `#box-2`.
|
||||
|
||||
```js
|
||||
assert(code.match(/flex:\s*?\d\s+?\d\s+?150px;/g).length == 2);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
flex: 2 2 150px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
flex: 1 1 150px;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,94 @@
|
||||
---
|
||||
id: 587d78ad367417b2b2512afb
|
||||
title: Utiliza la propiedad flex-shrink para reducir elementos
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cd3PBfr'
|
||||
forumTopicId: 301113
|
||||
dashedName: use-the-flex-shrink-property-to-shrink-items
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Hasta ahora, todas las propiedades en los desafíos se aplican al contenedor flexible (el padre de los elementos flex). Sin embargo, hay varias propiedades útiles para los elementos flex.
|
||||
|
||||
La primera es la propiedad `flex-shrink`. Cuando se usa, permite que un elemento se contraiga si el contenedor flex es demasiado pequeño. Los elementos se reducen cuando el ancho del contenedor principal es menor que el ancho combinado de todos los elementos flex dentro del él.
|
||||
|
||||
La propiedad `flex-shrink` toma números como valores. Cuando mayor sea el número, más se reducirá en comparación con los otros elementos en el contenedor. Por ejemplo, si un elemento tiene un `flex-shrink` con valor de `1` y el otro tiene un `flex-shrink` con valor de `3`, el que tiene el valor de `3` se reducirá tres veces más que el otro.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Agrega la propiedad CSS `flex-shrink` tanto a `#box-1` como a `#box-2`. Da a `#box-1` un valor de `1` y a `#box-2` un valor de `2`.
|
||||
|
||||
# --hints--
|
||||
|
||||
El elemento `#box-1` debe tener la propiedad `flex-shrink` establecida en un valor de `1`.
|
||||
|
||||
```js
|
||||
assert($('#box-1').css('flex-shrink') == '1');
|
||||
```
|
||||
|
||||
El elemento `#box-2` debe tener la propiedad `flex-shrink` establecida en un valor de `2`.
|
||||
|
||||
```js
|
||||
assert($('#box-2').css('flex-shrink') == '2');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
flex-shrink: 2;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,138 @@
|
||||
---
|
||||
id: 587d78ad367417b2b2512afa
|
||||
title: Usa la propiedad flex-wrap para envolver una fila o columna
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cQv9ZtG'
|
||||
forumTopicId: 301114
|
||||
dashedName: use-the-flex-wrap-property-to-wrap-a-row-or-column
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
CSS flexbox tiene una característica para dividir un elemento flexible en varias filas (o columnas). De forma predeterminada, un contenedor flexible encajará todos los elementos flexibles juntos. Por ejemplo, una fila estará completa en una sola línea.
|
||||
|
||||
Sin embargo, usar la propiedad `flex-wrap` le indica al CSS que envuelva los elementos. Esto significa que los elementos extra se mueven hacia una nueva fila o columna. El punto de ruptura donde ocurre la envoltura depende del tamaño de los elementos 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 elementos.</li><li><code>wrap</code>: envuelve elementos de izquierda a derecha si están en una fila, o de arriba hacia abajo si están en una columna.</li><li><code>wrap-reverse</code>: envuelve elementos de derecha a izquierda si están en una fila, o de abajo hacia arriba si están en una columna.</li></ul>
|
||||
|
||||
# --instructions--
|
||||
|
||||
La disposición actual tiene demasiadas cajas para una sola fila. Agrega la propiedad CSS `flex-wrap` al elemento `#box-container` y asígnale un valor de `wrap`.
|
||||
|
||||
# --hints--
|
||||
|
||||
El elemento `#box-container` debe tener la propiedad `flex-wrap` establecida en un valor de `wrap`.
|
||||
|
||||
```js
|
||||
assert($('#box-container').css('flex-wrap') == 'wrap');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
background: gray;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
#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>
|
||||
```
|
||||
@ -0,0 +1,224 @@
|
||||
---
|
||||
id: 587d78ac367417b2b2512af7
|
||||
title: Utiliza la propiedad justify-content en el tweet Insertado
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/c43GgTa'
|
||||
forumTopicId: 301115
|
||||
dashedName: use-the-justify-content-property-in-the-tweet-embed
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
El último desafío mostró un ejemplo de la propiedad `justify-content`. Para el tweet insertado, esta propiedad se puede aplicar para alinear los elementos en el `.profile-name`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Agrega la propiedad CSS `justify-content` al `.profile-name` y establece el valor en cualquiera de las opciones del último desafío.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu `.follow-btn` debe mostrarse en la página. Asegúrate de desactivar las extensiones, como los bloqueadores de anuncios.
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
|
||||
```
|
||||
|
||||
El elemento `.profile-name` debe tener la propiedad `justify-content` establecida en cualquiera de estos valores: `center`, `flex-start`, `flex-end`, `space-between`, `space-around`, o `space-evenly`.
|
||||
|
||||
```js
|
||||
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|space-evenly)\s*;/g
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" 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>
|
||||
```
|
||||
@ -0,0 +1,90 @@
|
||||
---
|
||||
id: 587d78ae367417b2b2512aff
|
||||
title: Usa la propiedad order para reorganizar los elementos
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cMbvNAG'
|
||||
forumTopicId: 301116
|
||||
dashedName: use-the-order-property-to-rearrange-items
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
La propiedad `order` se utiliza para indicarle a CSS el orden en que aparecen los elementos flexibles en el contenedor flex. Por defecto, los elementos aparecerán en el mismo orden que vienen en el HTML de origen. La propiedad toma números como valores, y se pueden usar números negativos.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Agrega la propiedad CSS `order` tanto a `#box-1` como a `#box-2`. Da a `#box-1` un valor de `2` y a `#box-2` un valor de `1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
El elemento `#box-1` debe tener la propiedad `order` establecida en un valor de `2`.
|
||||
|
||||
```js
|
||||
assert($('#box-1').css('order') == '2');
|
||||
```
|
||||
|
||||
El elemento `#box-2` debe tener la propiedad `order` establecida en un valor de `1`.
|
||||
|
||||
```js
|
||||
assert($('#box-2').css('order') == '1');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
order: 2;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
order: 1;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
```
|
||||
Reference in New Issue
Block a user