5.1 KiB

Raw Blame History

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 に設定してください。

追加の学習
コードエディタ上で 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.1 KiB Raw Blame History