CSS Flexboxの完全チュートリアル w/チートシート

CSS Flexboxの基礎をリフレッシュしましょう。これはCSS flexboxでできること全てについてのチュートリアルとチートシートです。さあ、始めましょう 🎖️

FreeCodeCampでのオリジナル記事はこちら

FlexBoxの構造
flex-direction
justify-content
align-content
align-items
align-self
flex - grow | shrink | wrap | basis
ショートハンド
まとめ

YouTubeでもこのチュートリアルを見ることができますよ：

Flexboxの構造はどうなっているのか？flexアイテム[コンテンツ]はメイン軸とクロス軸に沿って配布されます。そして、flex-directionプロパティに応じて、レイアウト位置は行と列の間で変わります。

このチャートには、flexboxを使ったときに使えるすべてのプロパティと値が含まれています。プロジェクトに取り組む時に参照したり、異なる値で実験するのに役立ちます。

このプロジェクトにはHTML、CSSの基礎とVSコードでの作業方法を少し理解している必要があります。私についてきてください ->

"Project-1"というフォルダを作成し、VSコードを開く
index.htmlとstyle.cssファイルを作成する
Live Serverをインストールし、Live Serverを実行する。

または、Codepenを開いてコーディングを始めることもできます。

このチュートリアルの終わりには、より正確にウェブサイトのレイアウトを作ることができます。

HTML

HTMLでは、bodyタグの中にこれらのコードを書いてください 👇

<div class="container">
    <div class="box-1"> A </div>
    <div class="box-2"> B </div>
    <div class="box-3"> C </div>
</div>

CSS

.containerクラスとすべてのボックスをターゲットにし、すべてのボックスが似たように見えるようにスタイリングします。こんな感じです 👇

注記： コンテナの高さを忘れずに設定してください。

.container{
   height : 100vh;
}

[class ^="box-"]{
    width: 140px;
    height: 140px;
    background-color: skyblue;
    border: 2px solid black;

// 文字が見やすいように
    font-size: 65px;
}

でもちょっと待ってください....

始める前に、親クラスと子クラスの関係を理解する必要があります。

Flexboxは親クラスに対して機能し、子クラスには機能しません。

ここでは、.containerクラスが親で、.box-*クラスが子供です。

ですから、.containerクラス内にdisplay: flexを適用して、文字をボックスの中央に配置するようにします ->

.container{
    display : flex;
    height : 100vh;

// ボックス間に少し隙間を作る
    gap : 25px;
}

[class ^="box-"]{
// 以前のステップのコード

// テキストを中央に配置
    display : flex;
    justify-content : center;
    align-items : center;
}

そして……これで準備完了です！では、コーディングを始めましょう。 😊

Flexboxコンテナ内で、flexアイテムが分配される方向/向き。

flex-direction

この結果を再現するために、CSSに以下のコードを書きましょう ->

注記： 値を変更して、結果を確認してください。

.container{
// セットアップ段階からのコードがここにあります

// 結果を見るために 👇 の値を変更する
    flex-direction : row;
}

justify-content

このプロパティは、Flexコンテナ内のMAIN AXISに沿ってflexアイテムを配置します。

align-content

このプロパティは、Flexコンテナ内のCROSS AXISに沿ってflexアイテムを配置します。これはjustify-contentに似ています。

align-items

このプロパティは、Cross Axisに沿ってFlexアイテムを分配します。

align-self

このプロパティは子クラスで動作し、選択したアイテムをCross Axisに沿って配置します。

flex-grow | shrink | wrap | basis

これから話すプロパティは、ウィンドウのサイズを変更したときに作動します。詳しく見ていきましょう。

ショートハンド

flex-flow : flex-directionとflex-wrapのショートハンドです。
place-content : justify-contentとalign-contentのショートハンドです。

クレジット

Kitty Avatars

次に読むべきもの :

これまで読んでくれてありがとう、あなたのためのメダル❤️

提案＆批評大歓迎 ❤️

YouTube / Joy Shaheb
Twitter / JoyShaheb
Instagram / JoyShaheb

こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/joyshaheb/flexbox-cheat-sheets-in-2021-css-2021-3edl