динамическое расположение сетки с использованием flexbox - PullRequest
0 голосов
/ 21 октября 2018

Я планирую сделать разметку сетки на основе пользовательского ввода.Например, если пользовательское значение ввода «3», квадрат 3 x 3 помещается на страницу динамически, как макет игры Tic-Tac-Toc.Я думаю, что flexbox - хороший подход для этого.Однако в зависимости от входного значения ширина и высота каждой ячейки будут разными.Я слышал, что управление размерами путем установки .px было бы нежелательным способом.Я исследовал много примеров, но пока не могу найти пример динамического макета.Есть ли у вас какие-либо советы по этому вопросу?

Способ, который я пробовал, описан ниже.Здесь я использовал bootstrap, но понял, что мне не нужно его использовать, потому что gridcss или flexbox уже предоставили эту функцию.В любом случае, после создания HTML-строки я помещаю их в контейнер, но, как вы ожидаете, высота намного меньше ширины.Что я хочу сделать, это настроить ширину и высоту самостоятельно, что было бы хорошим способом сделать это?Я не хотел устанавливать значения px напрямую.

for (var i = 0; i < num; i++) {
        html += '<div class="row">';
        for (var j = 0; j < num; j++) {
          html += `
            <div class="col-md-1">0</div>`;
        }
        html += "</div>";
}

1 Ответ

0 голосов
/ 22 октября 2018

Предполагая, что частью проблемы здесь является создание ячеек с соотношением сторон 1: 1, ограниченных на игровом поле.

Для этого вы можете использовать изящный CSS-трюк, в который вы вставляете ячейку в другой элемент div, имеющийpadding-top: 100%;.

padding-top относится к width родительского элемента, поэтому при значении 100% соотношение сторон всегда будет 1: 1

Рабочий пример jsFiddle

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...