HN公開: CSS Flexboxの難所を解決するためのPlayground

 (yoavsbg.github.io)
2 ポイント 投稿者 GN⁺ 2025-01-06 | 1件のコメント | WhatsAppで共有

  • 多様なflexのプロパティを試して、レイアウトへの影響を理解できるツール

  • 変更をリアルタイムで確認し、生成されたCSSコードをコピーできる

  • flex-direction

    • row: 要素を横方向に配置する
    • column: 要素を縦方向に配置する
    • row-reverse: 要素を横方向に逆順で配置する
    • column-reverse: 要素を縦方向に逆順で配置する

  • justify-content

    • flex-start: 要素を開始点に配置する
    • center: 要素を中央に配置する
    • flex-end: 要素を終了点に配置する
    • space-between: 要素間に均等な間隔を配置する
    • space-around: 要素の周囲に均等な間隔を配置する

  • align-items

    • stretch: 要素を引き伸ばして配置する
    • flex-start: 要素を開始点に配置する
    • center: 要素を中央に配置する
    • flex-end: 要素を終了点に配置する
    • baseline: 要素を基準線に合わせる

  • flex-wrap

    • nowrap: 要素を1行に配置する
    • wrap: 要素を複数行で配置する
    • wrap-reverse: 要素を逆順で複数行に配置する

  • サンプルコード

    • .container { display: flex; flex-direction: row; justify-content: space-around; align-items: flex-start; flex-wrap: nowrap; }

  • 制作

    • Yoav Sabagによって作成
    • YouTube、GitHubで詳細情報を確認できる

関連記事

1件のコメント

 
GN⁺ 2025-01-06
Hacker Newsの意見

  • Flexboxはシンプルで理解しやすい面がある一方、プロパティと値の名前が直感的ではない

    • justify-contentやalign-itemsのような名前が混乱を招く
    • Flexboxを学ぶには複数の試行錯誤が必要

  • Flexboxfroggy.comとcssgridgarden.comを推奨した

    • これらのサイトはFlexboxとCSS Gridを学ぶのに役立つ

  • Joshのガイドを推奨した

    • Flexboxの高度なヒントとコツを詳しく解説している
    • flex-basis、auto margins、min-widthなどの概念を扱っている

  • 同様のインタラクティブガイドを作成した経験を共有した

    • 記憶の補完に役立つ

  • justify-contentとalign-itemsの代わりにmain-axis-arrangementとcross-axis-alignmentのほうがわかりやすい名前だと主張している

  • Flexboxをうまく使うのが難しいと嘆いている

    • Flexboxfroggy.comも役に立たなかったと述べた

  • CSSレイアウトを練習できる興味深いチャレンジが必要

    • ChatGPTはCSSデバッグに役立つが、CSSの深い理解が必要

  • FlexboxとGridのシンタックスが説明的だと考えている

    • ボックスモデルを理解し、Firefox DevToolsを使うと助けになる
    • Flexboxfroggyとcssgridgardenは練習に有用である
    • CSS-tricksのチートシートをよく参照している

  • Flexboxの子要素プロパティも重要だと指摘した

    • 4つのコンテナープロパティだけを扱うのは限定的

  • Flexboxプロパティを参照できるチートシートを作成した

    • 他の人にも役立つかもしれない