私はある次元のビューポートを持っています。現在、私はhtml5キャンバスに描かれている単一の画像しか表示していませんでした。しかし、今私は1-6の範囲にすることができる複数のキャンバスを表示する必要があります。 要件はキャンバスの数に基づいてキャンバスのサイズを変更し、親divに収まるようにすることです。キャンバスの数に基づいてキャンバスのサイズを親ディビジョンに合わせます。
例：単一のキャンバスは親divの100％、2つのキャンバスは50-50％を占める必要があります。だから、6キャンバスの場合、それぞれ3キャンバスの2行になります。
また、ユーザーは特定のキャンバスの表示/非表示を切り替えて並べ替える必要があります。
どうすればいいですか？私はangularjs、javascriptとhtml5 css3を使用しています。
コンテナのdiv内で複数のキャンバスを自動サイズ調整および自動配置できるCSS Flexboxをご覧ください。
CSS-トリック優れたoverview of Flexbox
ウェス・ボスはvideo tutorials of Flexbox
フレキシボックスは小さな学習曲線の後に使いやすいの非常に素晴らしいシリーズを行っているしています。
フレキシボックスコンテナとしてあなたのdivを宣言します。その後、
#theDiv{ display: flex; }
そして、あなたが表示されたキャンバス・アイテムをする方法フレキシボックスに教える：
#theDiv{ flex-flow: row wrap; }
あなたはあなたがキャンバスをする方法の詳細いませんコンテナdivのサイズを変更したり、ユーザーがキャンバスを表示/非表示にしたときに拡大/縮小することができますが、Flexboxはすべてのキャンバスアイテムや特定のキャンバスに適用することができます。
私はサードパーティのライブラリやプラグインを避けようとしています。ちょうどCSSとjavascript/angularjsを使用してこの機能を達成したいと思います。そして、はい、私はキャンバスの隠れ/ショーに基づいてキャンバスの成長/縮小を望みます。コンテナのdivは同じサイズのままです。 –
フレックスボックスは純粋なCSSです！ :-)） – markE
お試しください！ –