壊れた給湯器と濡れたボックスが私にフレックスボックスについて教えてくれたこと。

我が家の給湯器が壊れました。ガレージに入ると水の流れる音が聞こえました。家の蛇口が止まっていることを確認し、トイレが流れていないことを確認し、外を確認しました。いいえ、ホースが外れています。ガレージを再確認してください。まだ水が聞こえます。ガスが水を加熱するときの音かもしれません。歩いて行くと床に水が溜まっています。

給湯器の上部から水漏れしていました。床やカーペットの上に水たまりができています。床には古いカーペットが敷かれているので、裸の床は冷たくありません。今ではそこを小川が流れています。

カーペットの上に保管されていた箱が水を吸い込んでしまいました。箱は濡れてびしょ濡れです。内容の一部も同様です。その箱の中には数冊のペーパーバックとジュラシック・パークの恐竜が入っていました。本は水に濡れていますが、ほとんどは乾きます。

これらのボックスは頑丈ではなく、柔軟性があります。

これらのボックス = フレックスボックス。これにより、LinkedIn のようなクリックベイトのタイトルと、フレックスボックスについて書く口実が得られました。

フレックスボックス

CSS では、フレックスボックスは項目を行または列に水平または垂直に配置するために使用されます。アイテムはコンテナ内のスペースを埋めるために曲がります。

フレックスの使用を開始するには、子要素を保持する親フレックスコンテナに display:flex を追加します。

.flex-container {
  display: flex;
}

<flex-container>
  <div>



<p>Then decide if you want row or columns with flex-directionoptions are row, row-reverse, column, and column-reverse. Row lines things up left-to-right, row-reverse lines them right-to-left. You might guess Column and column-reverse are similar but top-to-bottom and bottom-to-top respectively.<br>
</p>

<pre class="brush:php;toolbar:false">.flex-container {
  display: flex;
  flex-direction: row;
}

<flex-container>
  <div>



<h2>
  
  
  Justify Content
</h2>

<p>So how to arrange things horizontally? Use justify-content: to align the books in your boxes. Here you have several options.</p>

<ul>
<li>justify-content: center - Aligns items in the center of the container.</li>
<li>justify-content: space-around - Places space at the front and end of the container plus in between each item.</li>
<li>justify-content: space-between - Pushes items to the front and end of the container and place space evenly between the items.</li>
<li>justify-content: flex-start (default) - Aligns at the start of the container.</li>
<li>justify-content: flex-end - Aligns at end of container.
</li>
</ul>

<pre class="brush:php;toolbar:false">.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: center; 
}

この画像は、箱の中央に本が配置されている様子を示しています。

この画像は、スペースアラウンドが適用された書籍を示しています。ボックスの始まりと終わりの間に隙間があります。

この画像は、スペースが適用された書籍を示しています。本はボックスの前面、中央、端にスペースをあけて配置されます。

この画像はフレックススタートを示しています。すべての本はボックスの先頭または左側に押し込まれます。

この画像はフレックスエンドを示しています。すべての本は箱の端または右側に押し込まれています。

位置合わせ

親コンテナ内の要素を垂直方向に整列するには、align-items を使用します。

• align-items: flex-start - コンテナの上部に揃えます
• align-items: flex-end - コンテナの下部に揃えます
• align-items: center - 項目を垂直方向の中央に配置します
• align-items:baseline - 各項目内のベースラインに沿って整列します。
• align-items:stretch (デフォルト) - コンテナーの高さを満たすようにアイテムを引き伸ばします。

.flex-container {
  display: flex;
}

CSSでイラスト化しました。これらの画像は CSS を使用して作成されました。

結論

これはフレックスボックスの単なる紹介です。詳細な説明については、Wes Bos の「フレックス ボックスとは」または MDN Web ドキュメントを参照してください。