Flexboxでよく使用するプロパティと値をまとめたチートシートを紹介します。 コンテナ内にアイテムがどのように配置されるかを図やイラストで掲載しており、楽しく直感的にFlexboxの使い方を学べます。 FlexBox Cheat Sheets in 2021 by Joy Shaheb 同じ作者のCSS Gridのチートシートも翻訳しました。 CSS Gridでどのように配置されるかをまとめたチートシート 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Flexboxの構造 Flexboxの各プロパティと値 flex-directionプロパティ justify-contentプロパティ align-contentプロパティ align-itemsプロパティ align-selfプロパティ flex-grow | shrink
![CSS Flexboxでどのように配置されるかをまとめたチートシート](https://cdn-ak-scissors.b.st-hatena.com/image/square/27952c31825c157b94e1c190d1f465f8f6e0d8cf/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202301%2F2023031002-02%402x.png)