Files

camperbot 5c868af2b8 chore(i18n,learn): processed translations (#44851 )

2022-01-20 20:30:18 +01:00

4.1 KiB

Raw Permalink Blame History

id, title, challengeType, videoUrl, forumTopicId, dashedName

id	title	challengeType	videoUrl	forumTopicId	dashedName
587d78ad367417b2b2512af8	align-items プロパティを使用して要素を整列する	0	https://scrimba.com/p/pVaDAv/c8aggtk	301101	align-elements-using-the-align-items-property

--description--

align-items プロパティは justify-content に似ています。 justify-content プロパティは主軸に沿ってフレックスアイテムを整列していたことを思い出してください。行の主軸は水平線で、列の主軸は垂直線です。

フレックスコンテナには主軸と対照的な交差軸 (cross axis) もあります。行の交差軸は垂直線で、列の交差軸は水平線です。

CSS は align-items プロパティを提供しており、フレックスアイテムを交差軸方向に整列させることができます。行の場合、コンテナ内で行全体のアイテムをどのように上下に揃えるかを CSS に指定します。そして列の場合は、コンテナ内で全てのアイテムをどのように左右に揃えるかを指定します。

align-items で使用できるさまざまな値は次のとおりです。

flex-start: フレックスコンテナの先頭にアイテムを揃えます。行の場合、アイテムはコンテナの上部に揃えられます。列の場合、アイテムはコンテナの左側に揃えられます。
flex-end: フレックスコンテナの末端にアイテムを揃えます。行の場合、アイテムはコンテナの下部に揃えられます。列の場合、アイテムはコンテナの右側に揃えられます。
center: アイテムを中心で揃えます。行の場合、アイテムを垂直方向に揃えます (アイテムの上下のスペースを均等にします)。列の場合、アイテムを水平方向に揃えます (アイテムの左右のスペースを均等にします)。
stretch: フレックスコンテナいっぱいを埋めるためにアイテムを拡大させます。たとえば、行のアイテムはフレックスコンテナの上から下いっぱいを埋めるように引き伸ばされます。 align-items の値が指定されていない場合、これがデフォルト値になります。
baseline: アイテムをベースラインで揃えます。ベースラインとはテキストについての考え方で、文字が乗っているラインだと考えてください。

--instructions--

このプロパティの動作は例を見ると分かりやすいでしょう。 CSS プロパティ align-items を #box-container 要素に追加し、値を center に設定してください。

Bonus
コードエディタ上で align-items プロパティの他のオプションを試してみて、違いを確認してみましょう。ただし center がこのチャレンジをパスする唯一の値であることに注意してください。

--hints--

#box-container 要素の align-items プロパティを center に設定してください。

assert($('#box-container').css('align-items') == 'center');

--seed--

--seed-contents--

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

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

4.1 KiB Raw Permalink Blame History