弾性箱モデル（詳細）

まとめ

弾性箱モデルに関しては、属性が多く、属性の値も比較的複雑なため、難易度が高そうですが、いつも勉強しているとマスターできたようで、属性によっては、ゆっくり使わないときに使います。

この記事では、弾性ボックスモデルのプロパティを理解するだけで、すべてのプロパティの値を一覧表示するわけではありません。
暗記するのではなく、理解することがポイントです。

1. フレックスボックスを作成する

フレックスボックスを作成するには、display:flexを使用する必要があることを誰もが知っているはずです。
しかし、実際にはそれを作成する別の方法があります: display:inline-flexです。

一見すると、この属性は display:block および display:inline-block に似ています。
実際、効果は同じです。つまり、作成されたボックスがブロックレベル要素として表示されるか、インラインブロック要素として表示されます。

<style>
  .box{
      
      
    display: flex;
    height: 100px;
    border: 1px solid black;
  }
  p{
      
      
    width: 100px;
    height: 50px;
    background-color: blue;
    margin-right: 10px;
  }
</style>
<body>
    <div class="box">
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
    </div>
</body>

効果はこんな感じです。

ここに画像の説明を挿入

<style>
  .box{
      
      
    display: inline-flex;
    height: 100px;
    border: 1px solid black;
  }
  p{
      
      
    width: 100px;
    height: 50px;
    background-color: blue;
    margin-right: 10px;
  }
</style>
<body>
    <div class="box">
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
    </div>
</body>

ここに画像の説明を挿入

ここでわからない場合は、ブロックレベル要素と行レベル要素の違いを参照してください。

2. 配列方向（フレックス方向）

上記のボックスを柔軟なボックスとして設定した後、ボックス内の要素がブロックレベルの要素であっても、それらはまだ順番に配置されていることがわかります。

つまり、柔軟な箱の中では、どんな要素や特徴を持っていても、素直に順番に並べなければなりません。ここで質問です。これらの要素の配置を変更できますか?

たとえば、私の箱の中の配置は何ですか？
ここに画像の説明を挿入

または、私の箱がどのように配置されているか。それは間違いなく可能です. ここでは弾性ボックスのflex-direction属性
ここに画像の説明を挿入
を設定するだけで済みます. この属性の値はここには記載されていません. 興味のある方は自分で試してみてください.

3. 改行 (フレックスラップ)

上のシーンをイメージして、エラスティックボックスの幅を設定すると、内部の各要素の幅も設定されます。
ボックスを順番に並べても、ボックスの幅が足りない場合、中の要素が飛び出してしまいますか? それとも、自動的に行を変更しますか?

答えは、要素が親要素を超えないように、ボックスがすべての要素を内側に押し込むことです。
ここに画像の説明を挿入
しかし、line-wrap 属性flex-wrap をElastic box に追加すると、内部の要素が自動的に折り返されます。

改行を上にするか下にするかについては、ここの属性を自分で試すことができるので、ここには記載しません。

4. 主軸のコンテンツを調整する (justify-content)

flex-direction が既に設定されているエラスティックボックスの場合、効果は次のようになります。
ここに画像の説明を挿入
配置方向の左側に表示されます。
しかし、私が望む効果がこのようなものである場合:

またはこれらのいくつかの外観:

もちろん、それも達成可能です! justify-content属性は、主軸上の要素の位置を設定するために使用されます。
また、この属性の値は、上記よりも多くの効果を達成することもできます。

5. 縦軸の内容を調整する (align-items)

弾性ボックスの高さを少し大きく設定すると、表示される効果は次のようになります
ここに画像の説明を挿入
。これはalign-items

属性を介して行うことができます。この属性は、縦軸 (主軸方向に垂直な軸) の要素の位置を決定するために使用されます。

6. 縦方向のコンテンツを調整する (align-content)

2 つの属性 align-items と justify-content は、異なる軸を除いて同じですか?

実はよくよく考えてみると、両者の効果は異なり、前者は縦軸の配置の開始位置を決めるだけです。
後者のような主軸方向の配置の影響は判断できません。

したがって、縦軸にプロパティを配置すると、justify-content と同じ効果があります: align-content

この属性を使用すると、要素を次のように配置できます。
ここに画像の説明を挿入
次のようにすることもできます。

次のようにすることもできます。

したがって、ここで align-items と align-content の 2 つの属性を区別する必要があります。

7. 弾性要素

上記のすべての属性は、フレキシブルボックス用です。または、フレキシブルボックス内のすべての要素用であると言えます。属性が何であれ、誰もが一緒に適応できます。

ある弾性要素に何らかの権限を与えたい場合は、これも操作可能です. ここでは、テーブルを使用してこれら 3 つの属性を表示します。

これらのプロパティはフレックスボックスで書かれた CSS ではないことに注意してください。エラスティック要素のcss属性に書かれている

属性	効果	デフォルト
フレックスグロー	ボックスに余分なスペースがある場合、現在の要素の比率が他の兄弟要素に対して増加します	0
フレックスシュリンク	ボックスのスペースが十分でない場合、現在の要素の比率を他の兄弟要素に対して減らす	1
フレックスベース	弾性要素の要素ボックスのサイズを設定できます	自動

まとめ