Files

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

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

5.0 KiB

Raw Permalink Blame History

id, title, challengeType, videoUrl, forumTopicId, dashedName

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

--description--

フレックスコンテナ内のフレックスアイテムがコンテナ内のすべてのスペースを埋めないことがあります。この場合、フレックスのアイテムをどのように整列・空白の配置を行うかを CSS に指示したいと思うのが当然でしょう。幸いなことに、justify-content プロパティにはこれを実現するためのオプションがいくつかあります。しかしまず最初に、これらのオプションを検討する前に理解すべき重要な用語がいくつかあります。

以下の概念を説明するのに役立つ、行を描いた画像があります。

フレックスコンテナを行 (row) として設定すると、フレックスアイテムが左から右に並んで配置されたことを思い出してください。列 (column) として設定されたフレックスコンテナは、フレックスアイテムを上から下へ垂直に積み重ねて配置します。それぞれ、フレックスアイテムが配置される方向を主軸 (main axis) と呼びます。行の場合、これは各アイテムを横切る水平方向の線です。そして列の場合、主軸はアイテムを貫く垂直方向の線です。

主軸の線に沿ってフレックスアイテムを配置する方法には、いくつかのオプションが存在します。最もよく使用されるのは justify-content: center; で、フレックスコンテナ内のすべてのフレックスアイテムを中央に揃えます。その他のオプションは以下のとおりです:

flex-start: フレックスコンテナの先頭にアイテムを揃えます。行の場合、アイテムはコンテナの左側に揃えられます。列の場合、アイテムはコンテナの上部に揃えられます。 justify-content が指定されていない場合、これがデフォルトの配置になります。
flex-end: フレックスコンテナの末端にアイテムを揃えます。行の場合、アイテムはコンテナの右側に揃えられます。列の場合、アイテムはコンテナの下部に揃えられます。
space-between: アイテムを主軸方向の中央で揃え、各アイテムの間にスペースを挿入します。最初と最後のアイテムはフレックスコンテナの端に配置されます。例えば行では、最初のアイテムはコンテナの左端、最後のアイテムはコンテナの右側に接するように配置され、残りのスペースは他のアイテムで均等に分配されます。
space-around: space-between と似ていますが、最初と最後のアイテムはコンテナの端に付かず、全てのアイテムの周りにスペースが分配されます。フレックスコンテナの両端には半分のスペースが配置されます。
space-evenly: フレックスコンテナの両端に完全なスペースを持ち、各フレックスアイテムで均等にスペースを分配します。

--instructions--

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

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

--hints--

#box-container 要素の justify-content プロパティを 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>

5.0 KiB Raw Permalink Blame History