2.0 KiB

Raw Blame History

id	title	challengeType	videoUrl	forumTopicId	dashedName
587d78af367417b2b2512b00	Usare la proprietà align-self	0	https://scrimba.com/p/pVaDAv/cMbvzfv	301107	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, cleare 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.

assert($('#box-1').css('align-self') == 'center');

L'elemento #box-2 dovrebbe avere la proprietà align-self impostata su un valore di flex-end.

assert($('#box-2').css('align-self') == 'flex-end');

--seed--

--seed-contents--

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

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

2.0 KiB Raw Blame History