4.3 KiB

Raw Blame History

id	title	challengeType	videoUrl	forumTopicId	dashedName
587d78ac367417b2b2512af6	Allineare gli elementi usando la proprietà justify-content	0	https://scrimba.com/p/pVaDAv/c43gnHm	301102	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.

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:

flex-start: 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 justify-content.
flex-end: 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.
space-between: 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.
space-around: simile a space-between 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.
space-evenly: Distribuisce lo spazio uniformemente tra gli elementi flex con uno spazio pieno a entrambe le estremità del contrainer flex

--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.

assert($('#box-container').css('justify-content') == 'center');

--seed--

--seed-contents--

<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--

<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>

4.3 KiB Raw Blame History