Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.06.2022, 19:01
Новичок на форуме
Отправить личное сообщение для PsiMagistr Посмотреть профиль Найти все сообщения от PsiMagistr
 
Регистрация: 23.07.2013
Сообщений: 3

Динамическая верстка и flex
Друзья, столкнулся с следующей проблемой.

У меня есть флекс контейнер, куда я программно пытаюсь встроить несколько дивов.

вот код:

[JS]
function createMatrix(col, row){
let len = col * row;
for(let i = 0; i < len; i++){
let cell = document.createElement("div");
cell.classList.add('cell');
matrix.appendChild(cell);
cells.push(cell);
}
}
[JS]

У меня есть некоторый стилевой класс cell

#matrix .cell{
width:19px;
height:19px;
border-bottom:1px solid black;
border-right:1px solid black;
flex-wrap: wrap;
}

Так вот при динамическом добавлении этого класса неверно отрабатывает свойство flex-wrap: wrap;

При этом если я дивы добавляю вручную в верстке, то все хорошо.

если я переношу свойство на сам див (в стилях)

div{
flex-wrap: wrap;
}

То тоже все замечательно.

Проблема при динамическом добавлении класса, причем только свойства flex-wrap: wrap;
Ответить с цитированием
  #2 (permalink)  
Старый 25.06.2022, 20:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

PsiMagistr,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 25.06.2022, 20:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

PsiMagistr,
сейчас можно только гадать, сделайте макет, где будет видно вашу проблему.
Ответить с цитированием
  #4 (permalink)  
Старый 26.06.2022, 08:36
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,701

flex-wrap - это свойство flex контейнера.
Оно на #matrix должно ставиться.
Ответить с цитированием
  #5 (permalink)  
Старый 26.06.2022, 10:56
Новичок на форуме
Отправить личное сообщение для PsiMagistr Посмотреть профиль Найти все сообщения от PsiMagistr
 
Регистрация: 23.07.2013
Сообщений: 3

Все правильно, так и есть.
Сообщение от voraa Посмотреть сообщение
flex-wrap - это свойство flex контейнера.
Оно на #matrix должно ставиться.
Великое спасибо!
Вы правы.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Верстка анимационного сайта (JS/Canvas анимация + JS + HTML/CSS ) aisconverse Работа 1 11.06.2018 09:32
Установка значения flex на ходу khusamov ExtJS 3 07.07.2015 20:21
Верстка бесплатно (для моего портфолио) Alex_1986 Работа 0 21.04.2014 12:05
Не сохраняются настройки grid Fubu_By ExtJS 1 09.07.2013 21:49
Динамическая вёрстка ссылок для навигации:проблемка :( Mitrandir Events/DOM/Window 8 29.12.2008 21:52