ボックスをドラッグして、レイアウトエンジンがFlexboxを推定するのを見る（AI不使用）
インタラクティブなFlexboxレイアウトのプレイグラウンド。ボックスをドラッグ、複数選択、サイズ変更、整列することで、レイアウトエンジンがリアルタイムにFlexboxプロパティを推定します。
この「Show HN」プロジェクトは、ユニークなインタラクティブなFlexboxレイアウトプレイグラウンドを提供します。ブラウザ上で直接ボックスをドラッグし、直感的な操作でFlexboxレイアウトの仕組みを理解できます。AIに依存するのではなく、完全に手動操作に基づいています：空白領域をドラッグして複数の要素を選択し、Ctrlキーを押しながらクリックで新しい要素を追加できます。各要素グループには点線のアウトラインがあり、それをドラッグしてグループ全体を移動でき、隅のドラッグハンドルでサイズを変更します。要素を削除するには、ダブルクリックまたはDelキーを押します。選択した要素を右クリックすると、整列操作がトリガーされます。このプレイグラウンドは、ユーザーの操作に応じてレイアウトエンジンがFlexboxプロパティをリアルタイムで推定・適用する様子を表示し、フロントエンド開発者がFlexboxレイアウトを学び実験するのに最適です。