chore(i18n,curriculum): update translations (#42487)
* chore(i18n,curriculum): update translations * chore: Italian to italian Co-authored-by: Nicholas Carrigan <nhcarrigan@gmail.com>
This commit is contained in:
camperbot
GitHub
@ -0,0 +1,258 @@
|
||||
---
|
||||
id: 587d78ab367417b2b2512af1
|
||||
title: Aggiungere i superpoteri Flex al Tweet Incorporato
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/c9W7MhM'
|
||||
forumTopicId: 301100
|
||||
dashedName: add-flex-superpowers-to-the-tweet-embed
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
A destra puoi vedere il tweet è incorporato che sarà utilizzato come esempio pratico. Alcuni degli elementi apparirebbero meglio con un layout diverso. L'ultima sfida ha mostrato il funzionamento di `display: flex`. Qui lo aggiungerai a diversi componenti nel tweet incorporato per iniziare a regolare il loro posizionamento.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Aggiungi la proprietà CSS `display: flex` a tutti i seguenti elementi - nota che i selettori sono già impostati nel CSS:
|
||||
|
||||
`header`, il `.profile-name` dell'header, il `.follow-btn` dell'header, l'`h3` e `h4` dell'header, il `footer` e le `.stats` del footer.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo `.follow-btn` dovrebbe apparire sulla pagina. Assicurati di disattivare tutte le estensioni come ad esempio gli adblock.
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
|
||||
```
|
||||
|
||||
Il tuo `header` dovrebbe avere una proprietà `display` impostata su `flex`.
|
||||
|
||||
```js
|
||||
assert($('header').css('display') == 'flex');
|
||||
```
|
||||
|
||||
Il tuo`footer` dovrebbe avere una proprietà `display` impostata su `flex`.
|
||||
|
||||
```js
|
||||
assert($('footer').css('display') == 'flex');
|
||||
```
|
||||
|
||||
Il tuo`h3` dovrebbe avere una proprietà `display` impostata su `flex`.
|
||||
|
||||
```js
|
||||
assert($('h3').css('display') == 'flex');
|
||||
```
|
||||
|
||||
Il tuo`h4` dovrebbe avere una proprietà `display` impostata su `flex`.
|
||||
|
||||
```js
|
||||
assert($('h4').css('display') == 'flex');
|
||||
```
|
||||
|
||||
Il tuo `.profile-name` dovrebbe avere una proprietà `display` impostata su `flex`.
|
||||
|
||||
```js
|
||||
assert($('.profile-name').css('display') == 'flex');
|
||||
```
|
||||
|
||||
Il tuo `.follow-btn` dovrebbe avere una proprietà `display` impostata su `flex`.
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').css('display') == 'flex');
|
||||
```
|
||||
|
||||
Il tuo `.stats` dovrebbe avere una proprietà `display` impostata su `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: Allineare gli elementi usando la proprietà align-items
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/c8aggtk'
|
||||
forumTopicId: 301101
|
||||
dashedName: align-elements-using-the-align-items-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
La proprietà `align-items` è simile a `justify-content`. Ricorda che la proprietà `justify-content` ha allineato gli elementi flex lungo l'asse principale. Per le righe, l'asse principale è una linea orizzontale e per le colonne è una linea verticale.
|
||||
|
||||
I contenitori flex hanno anche un **asse trasversale** che è ortogonale all'asse principale. Per le righe, l'asse trasversale è verticale e per le colonne, l'asse trasversale è orizzontale.
|
||||
|
||||
CSS offre la proprietà `align-items` per allineare gli elementi flex lungo l'asse trasversale. In una riga, esso dice a CSS come spingere gli oggetti in tutta la riga su o giù all'interno del contenitore. E in una colonna, come spingere tutti gli oggetti a sinistra o a destra all'interno del contenitore.
|
||||
|
||||
I diversi valori disponibili per `align-items` includono:
|
||||
|
||||
<ul><li><code>flex-start</code>: allinea gli elementi all'inizio del contenitore flex. Per le righe, questo allinea gli oggetti alla parte superiore del contenitore. Per le colonne, questo allinea gli oggetti alla sinistra del contenitore.</li><li><code>flex-end</code>: allinea gli elementi alla fine del contenitore flex. Per le righe, questo allinea gli oggetti alla parte inferiore del contenitore. Per le colonne, questo allinea gli oggetti alla parte destra del contenitore.</li><li><code>center</code>: allinea gli elementi al centro. Per le righe, questo allinea verticalmente gli oggetti (uguale spazio sopra e sotto gli elementi). Per le colonne, questo li allinea orizzontalmente (spazio uguale a sinistra e destra degli elementi).</li><li><code>stretch</code>: allunga gli oggetti per riempire il contenitore flex. Ad esempio, gli elementi delle righe sono allungati per riempire il contenitore flex dall'alto al basso. Questo è il valore predefinito se nessun valore <code>align-items</code> è specificato.</li><li><code>baseline</code>: allinea gli elementi alla linea di base. La linea di base è un concetto testuale, pensala come la linea su cui si trovano le lettere.</li></ul>
|
||||
|
||||
# --instructions--
|
||||
|
||||
Un esempio aiuta a mostrare questa proprietà in azione. Aggiungi la proprietà `align-items` all'elemento `#box-container` e dagli un valore di `center`.
|
||||
|
||||
**Bonus**
|
||||
Prova le altre opzioni per la proprietà `align-items` nell'editor di codice per vedere le loro differenze. Nota però che un valore di `center` è l'unico che supererà questa sfida.
|
||||
|
||||
# --hints--
|
||||
|
||||
L'elemento `#box-container` dovrebbe avere la proprietà `align-items` impostata su un valore di `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: Allineare gli elementi usando la proprietà justify-content
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/c43gnHm'
|
||||
forumTopicId: 301102
|
||||
dashedName: align-elements-using-the-justify-content-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Certe volte gli oggetti flex all'interno di un contenitore flex non riempiono tutto lo spazio del contenitore. È comune voler dire a CSS di allineare e spaziare gli elementi flex in una certa maniera. Fortunatamente, la proprietà `justify-content` ha diverse opzioni per farlo. Ma prima, c'è un pò di terminologia importante da comprendere prima di rivedere queste opzioni.
|
||||
|
||||
[Ecco un'immagine molto utile che mostra una riga per illustrare i concetti qui sotto.](https://www.w3.org/TR/css-flexbox-1/images/flex-direction-terms.svg)
|
||||
|
||||
Ricorda che l'impostazione di un contenitore flex come riga posiziona gli elementi flex fianco a fianco da sinistra a destra. Un contenitore flex impostato come colonna piazza gli oggetti flex in una pila verticale dall'alto verso il basso. Per ognuno, la direzione in cui sono disposti gli elementi flex è chiamata **asse principale**. Per una riga, si tratta di una linea orizzontale che taglia ogni elemento. E per una colonna, l'asse principale è una linea verticale attraverso gli elementi.
|
||||
|
||||
Ci sono diverse opzioni per come spaziare gli elementi flex lungo la linea che è l'asse principale. Uno dei più comunemente usati è `justify-content: center;`, che allinea tutti gli elementi flex al centro del contenitore flex. Altre opzioni includono:
|
||||
|
||||
<ul><li><code>flex-start</code>: allinea gli elementi all'inizio del contenitore flex. Per una riga, questo spinge gli oggetti alla sinistra del contenitore. Per una colonna, questo spinge gli oggetti verso l'alto del contenitore. Questo è l'allineamento predefinito se non viene specificato alcun <code>justify-content</code>.</li><li><code>flex-end</code>: allinea gli elementi alla fine del contenitore flex. Per una riga, questo spinge gli oggetti alla destra del contenitore. Per una colonna, questo spinge gli oggetti verso il fondo del contenitore.</li><li><code>space-between</code>: allinea gli oggetti al centro dell'asse principale, con spazio aggiuntivo tra gli elementi. Il primo e l'ultimo elemento vengono spinti fino all'estremità del contenitore flex. Ad esempio, in una riga il primo elemento è contro il lato sinistro del contenitore, l'ultimo elemento è contro il lato destro del contenitore, quindi lo spazio rimanente è distribuito uniformemente tra gli altri elementi.</li><li><code>space-around</code>: simile a <code>space-between</code> ma il primo e l'ultimo elemento non sono vincolati ai bordi del contenitore, lo spazio è distribuito intorno a tutti gli elementi con metà dello spazio su entrambe le estremità del contenitore flex.</li><li><code>space-evenly</code>: Distribuisce lo spazio uniformemente tra gli elementi flex con uno spazio pieno a entrambe le estremità del contrainer flex</li></ul>
|
||||
|
||||
# --instructions--
|
||||
|
||||
Un esempio aiuta a mostrare questa proprietà in azione. Aggiungi la proprietà CSS `justify-content` all'elemento `#box-container` e dagli un valore di `center`.
|
||||
|
||||
**Bonus**
|
||||
Prova le altre opzioni per la proprietà `justify-content` nell'editor di codice per vedere le loro differenze. Nota però che un valore di `center` è l'unico che supererà questa sfida.
|
||||
|
||||
# --hints--
|
||||
|
||||
L'elemento `#box-container` dovrebbe avere una proprietà `justify-content` impostata su un valore di `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: Applicare la proprietà flex-direction per creare una colonna nel Tweet incorportato
|
||||
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--
|
||||
|
||||
L'`header` e il `footer` del tweet incorportato usavano la proprietà `flex-direction` con un valore di riga. Allo stesso modo, gli elementi all'interno dell'elemento `.profile-name` funzionerebbero bene impilati come una colonna.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Aggiungi la proprietà CSS `flex-direction` all'elemento `.profile-name` dell'intestazione e imposta il valore su `column`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo `.follow-btn` dovrebbe essere visualizzato sulla pagina. Assicurati di disattivare tutte le estensioni come ad esempio gli adblock.
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
|
||||
```
|
||||
|
||||
L'elemento `.profile-name` dovrebbe avere una proprietà `flex-direction` impostata su `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: Applicare la proprietà flex-direction per creare righe nel Tweet
|
||||
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--
|
||||
|
||||
L'`header` e il `footer` dell'esempio del tweet incorportato hanno elementi figli che potrebbero essere organizzati come righe utilizzando la proprietà `flex-direction`. Questo dice al CSS di allineare orizzontalmente i figli.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Aggiungi la proprietà CSS `flex-direction` sia all' `header` che al `footer` e imposta il valore su `row`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo `.follow-btn` dovrebbe essere visualizzato sulla pagina. Assicurati di disattivare tutte le estensioni come ad esempio gli adblock.
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
|
||||
```
|
||||
|
||||
L' `header` dovrebbe avere una proprietà `flex-direction` impostata su `row`.
|
||||
|
||||
```js
|
||||
assert(code.match(/header\s*?{[^}]*?flex-direction:\s*?row;/g));
|
||||
```
|
||||
|
||||
Il `footer` dovrebbe avere una proprietà `flex-direction` impostata su `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: 'Usare display: flex per posizionare due riquadri'
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cgz3QS7'
|
||||
forumTopicId: 301105
|
||||
dashedName: use-display-flex-to-position-two-boxes
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Questa sezione utilizza stili di sfida alternativi per mostrare come usare il CSS per posizionare gli elementi in modo flessibile. In primo luogo, una sfida spiegherà la teoria, quindi una sfida pratica, utilizzando un semplice componente tweet, applicherà il concetto flexbox.
|
||||
|
||||
Posizionando su un elemento la proprietà CSS `display: flex;` potrai utilizzare altre proprietà flex per creare una pagina responsiva.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Aggiungi la proprietà CSS `display` a `#box-container` e imposta il suo valore a `flex`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`#box-container` dovrebbe avere la proprietà `display` impostata su un valore di `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: Usare la proprietà align-items nel Tweet incorporato
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cd3PNfq'
|
||||
forumTopicId: 301106
|
||||
dashedName: use-the-align-items-property-in-the-tweet-embed
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
L'ultima sfida ha introdotto la proprietà `align-items` e ha dato un esempio. Questa proprietà può essere applicata ad alcuni elementi tweet incorporati per allineare gli elementi flex al loro interno.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Aggiungi la proprietà CSS `align-items` all'elemento `.follow-btn`. Imposta il valore su `center`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo `.follow-btn` dovrebbe essere visualizzato nella pagina. Assicurati di disattivare tutte le estensioni come ad esempio gli adblock.
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
|
||||
```
|
||||
|
||||
L'elemento `.follow-btn` dovrebbe avere la proprietà `align-items` impostata su un valore di `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: Usare la proprietà align-self
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cMbvzfv'
|
||||
forumTopicId: 301107
|
||||
dashedName: use-the-align-self-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
L'ultima proprietà per gli oggetti flex è `align-self`. Questa proprietà consente di regolare l'allineamento di ogni elemento singolarmente, invece di impostarli tutti contemporaneamente. Questo è utile in quanto altre tecniche di regolazione comuni che utilizzano le proprietà CSS `float`, `clear`e `vertical-align` non funzionano su elementi flex.
|
||||
|
||||
`align-self` accetta gli stessi valori di `align-items` e sovrascriverà qualsiasi valore impostato dalla proprietà `align-items`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Aggiungi la proprietà CSS `align-self` sia a `#box-1` che a `#box-2`. Dai a `#box-1` un valore di `center` e a `#box-2` un valore di `flex-end`.
|
||||
|
||||
# --hints--
|
||||
|
||||
L'elemento `#box-1` dovrebbe avere la proprietà `align-self` impostata su un valore di `center`.
|
||||
|
||||
```js
|
||||
assert($('#box-1').css('align-self') == 'center');
|
||||
```
|
||||
|
||||
L'elemento `#box-2` dovrebbe avere la proprietà `align-self` impostata su un valore di `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: Utilizzare la proprietà flex-basis per impostare la dimensione iniziale di 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 proprietà `flex-basis` specifica la dimensione iniziale dell'elemento prima che il CSS apporti aggiustamenti con `flex-shrink` o `flex-grow`.
|
||||
|
||||
Le unità utilizzate dalla proprietà `flex-basis` sono le stesse delle altre proprietà di dimensione (`px`, `em`, `%`, etc.). Il valore `auto` ridimensiona gli elementi in base al contenuto.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Imposta la dimensione iniziale dei riquadri usando `flex-basis`. Aggiungi la proprietà CSS `flex-basis` sia a `#box-1` che a `#box-2`. Dai a `#box-1` un valore di `10em` e a `#box-2` un valore di `20em`.
|
||||
|
||||
# --hints--
|
||||
|
||||
L'elemento `#box-1` dovrebbe avere la proprietà `flex-basis`.
|
||||
|
||||
```js
|
||||
assert($('#box-1').css('flex-basis') != 'auto');
|
||||
```
|
||||
|
||||
L'elemento `#box-1` dovrebbe avere un valore `flex-basis` di `10em`.
|
||||
|
||||
```js
|
||||
assert(code.match(/#box-1\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?10em;/g));
|
||||
```
|
||||
|
||||
L'elemento `#box-2` dovrebbe avere la proprietà `flex-basis`.
|
||||
|
||||
```js
|
||||
assert($('#box-2').css('flex-basis') != 'auto');
|
||||
```
|
||||
|
||||
L'elemento `#box-2` dovrebbe avere un valore `flex-basis` di `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: Usare la proprietà flex-direction per creare una colonna
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cZmWeA4'
|
||||
forumTopicId: 301109
|
||||
dashedName: use-the-flex-direction-property-to-make-a-column
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Le ultime due sfide hanno utilizzato la proprietà `flex-direction` impostata su `row`. Questa proprietà può anche creare una colonna impilando verticalmente i figli di un contenitore flex.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Aggiungi la proprietà CSS `flex-direction` all'elemento `#box-container` e dagli un valore di `column`.
|
||||
|
||||
# --hints--
|
||||
|
||||
L'elemento `#box-container` dovrebbe avere una proprietà `flex-direction` impostata su `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: Usare la proprietà flex-direction per creare una riga
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cBEkbfJ'
|
||||
forumTopicId: 301110
|
||||
dashedName: use-the-flex-direction-property-to-make-a-row
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Aggiungendo `display: flex` a un elemento, questo diventa un contenitore flex. Questo permette di allineare tutti i figli di quell'elemento in righe o colonne. Puoi farlo aggiungendo la proprietà `flex-direction` al genitore e impostandola su row o column. La creazione di una riga allineerà i figli orizzontalmente e la creazione di una colonna allineerà i figli verticalmente.
|
||||
|
||||
Altre opzioni per `flex-direction` sono `row-reverse` e `column-reverse`.
|
||||
|
||||
**Nota:** Il valore predefinito per la proprietà `flex-direction` è `row`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Aggiungi la proprietà CSS `flex-direction` all'elemento `#box-container` e dagli un valore di `row-reverse`.
|
||||
|
||||
# --hints--
|
||||
|
||||
L'elemento `#box-container` dovrebbe avere una proprietà `flex-direction` impostata su `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: Usare la proprietà flex-grow per espandere gli elementi
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/c2p78cg'
|
||||
forumTopicId: 301111
|
||||
dashedName: use-the-flex-grow-property-to-expand-items
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
L'opposto di `flex-shrink` è la proprietà `flex-grow`. Ricorda che `flex-shrink` controlla la dimensione degli oggetti quando il contenitore si restringe. La proprietà `flex-grow` controlla la dimensione degli oggetti quando il contenitore genitore si espande.
|
||||
|
||||
Usando un esempio simile a quello dell'ultima sfida, se un oggetto ha un valore `flex-grow` di `1` e l'altro ha un valore `flex-grow`di `3`, quello con valore di `3` crescerà tre volte più dell'altro.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Aggiungi la proprietà CSS `flex-grow` sia a `#box-1` che a `#box-2`. Dai a `#box-1` un valore di `1` e a `#box-2` un valore di `2`.
|
||||
|
||||
# --hints--
|
||||
|
||||
L'elemento `#box-1` dovrebbe avere la proprietà `flex-grow` impostata su un valore di `1`.
|
||||
|
||||
```js
|
||||
assert($('#box-1').css('flex-grow') == '1');
|
||||
```
|
||||
|
||||
L'elemento `#box-2` dovrebbe avere la proprietà `flex-grow` impostata su un valore di `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: Usare le scorciatoie flex
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cbpW2tE'
|
||||
forumTopicId: 301112
|
||||
dashedName: use-the-flex-shorthand-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Esiste una scorciatoia disponibile per impostare diverse proprietà flex contemporaneamente. Le proprietà `flex-grow`, `flex-shrink`, e `flex-basis` possono essere impostate tutte insieme utilizzando la proprietà `flex`.
|
||||
|
||||
Ad esempio, `flex: 1 0 10px;` imposterà l'elemento con `flex-grow: 1;`, `flex-shrink: 0;`, e `flex-basis: 10px;`.
|
||||
|
||||
Le impostazioni delle proprietà predefinite sono `flex: 0 1 auto;`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Aggiungi la proprietà CSS `flex` sia a `#box-1` che a `#box-2`. Imposta `#box-1` in modo che il suo `flex-grow` sia `2`, il suo `flex-shrink` sia `2`e la sua `flex-basis` sia `150px`. Imposta `#box-2` in modo che il suo `flex-grow` sia `1`, il suo `flex-shrink` sia `1`e la sua `flex-basis` sia `150px`.
|
||||
|
||||
Questi valori faranno crescere `#box-1` facendogli riempire lo spazio aggiuntivo al doppio della velocità di `#box-2` quando il contenitore è superiore a 300px e riducendolo al doppio della velocità di `#box-2` quando il contenitore è inferiore a 300px. 300px è la dimensione combinata dei valori `flex-basis` delle due caselle.
|
||||
|
||||
# --hints--
|
||||
|
||||
L'elemento `#box-1` dovrebbe avere la proprietà `flex` impostata su un valore di `2 2 150px`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('#box-1').css('flex-grow') == '2' &&
|
||||
$('#box-1').css('flex-shrink') == '2' &&
|
||||
$('#box-1').css('flex-basis') == '150px'
|
||||
);
|
||||
```
|
||||
|
||||
L'elemento `#box-2` dovrebbe avere la proprietà `flex` impostata su un valore di `1 1 150px`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('#box-2').css('flex-grow') == '1' &&
|
||||
$('#box-2').css('flex-shrink') == '1' &&
|
||||
$('#box-2').css('flex-basis') == '150px'
|
||||
);
|
||||
```
|
||||
|
||||
Il tuo codice dovrebbe utilizzare la proprietà `flex` per `#box-1` e `#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: Usare la proprietà flex-shrink per ridurre gli oggetti
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cd3PBfr'
|
||||
forumTopicId: 301113
|
||||
dashedName: use-the-flex-shrink-property-to-shrink-items
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Finora, tutte le proprietà nelle sfide si applicano al contenitore flex (il genitore degli elementi flex). Tuttavia, ci sono diverse proprietà utili per gli elementi flex.
|
||||
|
||||
La prima è la proprietà `flex-shrink`. Quando viene usata, permette ad un oggetto di rimpicciolirsi se il contenitore flex è troppo piccolo. Gli oggetti si restringono quando la larghezza del contenitore genitore è minore delle larghezze combinate di tutti gli elementi flex al suo interno.
|
||||
|
||||
La proprietà `flex-shrink` utilizza i numeri come valori. Più alto è il numero, più si ridurrà rispetto agli altri oggetti nel contenitore. Ad esempio, se un elemento ha un valore `flex-shrink` di `1` e l'altro ha un valore `flex-shrink` di `3`, quello con il valore di `3` si ridurrà tre volte più dell'altro.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Aggiungi la proprietà CSS `flex-shrink` sia a `#box-1` che a `#box-2`. Dai a `#box-1` un valore di `1` e `#box-2` un valore di `2`.
|
||||
|
||||
# --hints--
|
||||
|
||||
L'elemento `#box-1` dovrebbe avere la proprietà `flex-shrink` impostata su un valore di `1`.
|
||||
|
||||
```js
|
||||
assert($('#box-1').css('flex-shrink') == '1');
|
||||
```
|
||||
|
||||
L'elemento `#box-2` dovrebbe avere la proprietà `flex-shrink` impostata su un valore di `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: Usare la proprietà flex-wrap per avvolgere una riga o una colonna
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cQv9ZtG'
|
||||
forumTopicId: 301114
|
||||
dashedName: use-the-flex-wrap-property-to-wrap-a-row-or-column
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Flexbox ha una funzione per dividere un elemento flex in più righe (o colonne). Per impostazione predefinita, un contenitore flex si adatterà a tutti gli elementi flex insieme. Ad esempio, una riga sarà tutta su una riga.
|
||||
|
||||
Tuttavia, usando la proprietà `flex-wrap` potremo dire a CSS di mandare a capo gli oggetti. Questo significa che gli elementi extra si sposteranno in una nuova riga o colonna. Il punto di rottura in cui avviene il ritorno a capo dipende dalle dimensioni degli oggetti e dalle dimensioni del contenitore.
|
||||
|
||||
Il CSS ha anche opzioni per la direzione del wrap:
|
||||
|
||||
<ul><li><code>nowrap</code>: questa è l'impostazione predefinita, e non manda a capo gli oggetti.</li><li><code>wrap</code>: manda a capo gli oggetti su più righe dall'alto al basso se sono in righe e da sinistra a destra se sono in colonne.</li><li><code>wrap-reverse</code>: manda a capo gli elementi su più righe dal basso verso l'alto se sono in righe e da destra a sinistra se sono in colonne.</li></ul>
|
||||
|
||||
# --instructions--
|
||||
|
||||
Il layout corrente ha troppi riquadri per una riga. Aggiungi la proprietà CSS `flex-wrap` all'elemento `#box-container` e dagli un valore di `wrap`.
|
||||
|
||||
# --hints--
|
||||
|
||||
L'elemento `#box-container` dovrebbe avere la proprietà `flex-wrap` impostata su un valore `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: Usare la proprietà justify-content nel Tweet incorporato
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/c43GgTa'
|
||||
forumTopicId: 301115
|
||||
dashedName: use-the-justify-content-property-in-the-tweet-embed
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
L'ultima sfida ha mostrato un esempio della proprietà `justify-content`. Per il tweet incorporato, questa proprietà può essere applicata per allineare gli elementi nell'elemento `.profile-name`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Aggiungi la proprietà CSS `justify-content` all'elemento di intestazione `.profile-name` e imposta il valore a una qualsiasi delle opzioni viste nell'ultima sfida.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo `.follow-btn` dovrebbe essere visualizzato sulla pagina. Assicurati di disattivare tutte le estensioni come ad esempio gli adblock.
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
|
||||
```
|
||||
|
||||
L'elemento `.profile-name` dovrebbe avere la proprietà `justify-content` impostata a uno di questi valori: `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: Usare la proprietà order per riorganizzare gli elementi
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cMbvNAG'
|
||||
forumTopicId: 301116
|
||||
dashedName: use-the-order-property-to-rearrange-items
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
La proprietà `order` è usata per dire al CSS con che ordine gli elementi flex appaiono nel contenitore flex. Per impostazione predefinita, gli elementi appariranno nello stesso ordine con cui arrivano nell'HTML sorgente. La proprietà prende i numeri come valori, e possono essere usati anche i numeri negativi.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Aggiungere la proprietà CSS `order` sia a `#box-1` che a `#box-2`. Dare a `#box-1` un valore di `2` e dare a `#box-2` un valore di `1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
L'elemento `#box-1` dovrebbe avere la proprietà `order` impostata su un valore di `2`.
|
||||
|
||||
```js
|
||||
assert($('#box-1').css('order') == '2');
|
||||
```
|
||||
|
||||
L'elemento `#box-2` dovrebbe avere la proprietà `order` impostata su un valore di `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