Изменение размера холста на основе количества холстов от родительского div

Question

У меня есть окно просмотра определенного размера. В настоящее время я показываю только одно изображение, которое нарисовано на холсте html5. Но теперь мне нужно показать несколько холстов, которые могут варьироваться от 1 до 6. Требование состоит в том, чтобы изменять размеры холстов на основе количества холстов, чтобы он вписывался в родительский div.

Например: Единственный холст должен принимать 100% родительского div, 2 холста 50-50%. Таким образом, для 6 холстов это будет 2 ряда с 3-мя холстами.

Кроме того, пользователь может переключать отображение/скрытие определенного холста, поэтому им придется переупорядочить.

Как я могу это сделать? Я использую angularjs, javascript и html5 css3.

Answer 1

Ознакомьтесь с CSS Flexbox, который может автоматически настраивать и автоматизировать размещение нескольких холстов внутри контейнера div.

• CSS-Tricks имеет отличный overview of Flexbox

• Wes Bos сделал очень хорошую серию video tutorials of Flexbox

Flexbox проста в использовании после небольшой кривой обучения.

Объявите ваш DIV в качестве контейнера Flexbox:

#theDiv{ display: flex; } 

А потом скажите Flexbox, как вы хотите отображаться холст-элементы:

#theDiv{ flex-flow: row wrap; } 

Вы не подробный, как вы хотите, холсты в увеличивать/уменьшаться, когда размер контейнера изменяется или когда пользователь скрывает/показывает холсты, но у Flexbox есть параметры увеличения/сжатия, которые можно применить ко всем элементам холста и даже к конкретным холстам.