Проблема с flexbox как исправить?

Question

[Римский]

Здравствуйте. Очень нужна ваша помощь. Верстальщик, который делал морозится по пополной((

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

Помогите пожалуйста с данной ситуацией, в замен буду бесконечно благодарен и если нужно помогу с MODx)

Реально не шарю в flexbox, понимаю мой косяк но увы как есть.
Возможно это все можно реализовать через :nth-child, в общем прошу Вашей помощи)

Код:

<main class="events">
      <div class="events__wrapper">
  
        <!-- Контент -->
        <div class="events__container">
          
          <div class="events__row">
  
            <div class="events__column">
              <div class="events-item">
                <a class="events-item__thumb" href="event.html">
                  <img class="events-item__img" src="pic/events-item-1.jpg" alt="Фото">
                </a>
      
                <div class="events-item__textual">
                  <time class="events-item__date" datetime="2016-12-25">25.12.2016</time>
        
                  <div class="events-item__title">
                    <a href="event.html">Место для заголовка новости или события</a>
                  </div>
        
                  <div class="events-item__text">По своей сути рыбатекст является альтернативой традиционному lorem ipsum, который вызывает у
                    некторых клиентов недоумение при попытках прочитать рыбу текст.
                  </div>
                </div>
              </div>
    
              <div class="events-item events-item--reverse">
                <a class="events-item__thumb" href="event.html">
                  <img class="events-item__img" src="pic/events-item-3.jpg" alt="Фото">
                </a>
      
                <div class="events-item__textual">
                  <time class="events-item__date" datetime="2016-12-25">25.12.2016</time>
        
                  <div class="events-item__title">
                    <a href="event.html">Место для заголовка новости или события</a>
                  </div>
        
                  <div class="events-item__text">По своей сути рыбатекст является альтернативой традиционному lorem ipsum, который вызывает у
                    некторых клиентов недоумение при попытках прочитать рыбу текст.
                  </div>
                </div>
              </div>
            </div>
  
            <div class="events-item events-item--vertical">
              <a class="events-item__thumb" href="event.html">
                <img class="events-item__img" src="pic/events-item-2.jpg" alt="Фото">
              </a>
    
              <div class="events-item__textual">
                <time class="events-item__date" datetime="2016-12-25">25.12.2016</time>
      
                <div class="events-item__title">
                  <a href="event.html">Место для заголовка новости или события</a>
                </div>
      
                <div class="events-item__text">По своей сути рыбатекст является альтернативой традиционному lorem ipsum, который вызывает у
                  некторых клиентов недоумение при попытках прочитать рыбу текст.</div>
              </div>
            </div>
            
          </div>
  
          <div class="events__row events__row--reverse">
    
            <div class="events__column">
              <div class="events-item">
                <a class="events-item__thumb" href="event.html">
                  <img class="events-item__img" src="pic/events-item-1.jpg" alt="Фото">
                </a>
        
                <div class="events-item__textual">
                  <time class="events-item__date" datetime="2016-12-25">25.12.2016</time>
          
                  <div class="events-item__title">
                    <a href="event.html">Место для заголовка новости или события</a>
                  </div>
          
                  <div class="events-item__text">По своей сути рыбатекст является альтернативой традиционному lorem ipsum, который вызывает у
                    некторых клиентов недоумение при попытках прочитать рыбу текст.
                  </div>
                </div>
              </div>
      
              <div class="events-item events-item--reverse">
                <a class="events-item__thumb" href="event.html">
                  <img class="events-item__img" src="pic/events-item-3.jpg" alt="Фото">
                </a>
        
                <div class="events-item__textual">
                  <time class="events-item__date" datetime="2016-12-25">25.12.2016</time>
          
                  <div class="events-item__title">
                    <a href="event.html">Место для заголовка новости или события</a>
                  </div>
          
                  <div class="events-item__text">По своей сути рыбатекст является альтернативой традиционному lorem ipsum, который вызывает у
                    некторых клиентов недоумение при попытках прочитать рыбу текст.
                  </div>
                </div>
              </div>
            </div>
  
            <div class="events-item events-item--vertical">
              <a class="events-item__thumb" href="event.html">
                <img class="events-item__img" src="pic/events-item-2.jpg" alt="Фото">
              </a>
    
              <div class="events-item__textual">
                <time class="events-item__date" datetime="2016-12-25">25.12.2016</time>
      
                <div class="events-item__title">
                  <a href="event.html">Место для заголовка новости или события</a>
                </div>
      
                <div class="events-item__text">По своей сути рыбатекст является альтернативой традиционному lorem ipsum, который вызывает у
                  некторых клиентов недоумение при попытках прочитать рыбу текст.</div>
              </div>
            </div>
  
          </div>
          
        </div>
        
        <!-- Еще -->
        <button class="events-more">Показать еще</button>
      
      </div>
    </main>

Comments

[Артур Карапетян]

Код на codepen

[gpyshenko]

Ты все правильно сделал, ты никак не уменьшишь количество оберток, если только не воспользуешься гридами.

[Римский]

Артур: Добавить на codepen?

[Римский]

gpyshenko: я о нем только и думаю но блин поддержка у него плохая(

[Иван]

а что тебе не нравится?Сверстано по-бэму, код нормальный

[Римский]

Иван: На движок не натянуть((

[gpyshenko]

Виталий: Тогда нужно движок подстраивать)) Верстка нормальная))

[Froggyweb]

В чем проблема натянуть на cms тем более модх. Понятно если виджет джумлы или пресса. А так?.... И как сокращение кода поможет натяжке?

[Римский]

Froggyweb: Если вы в теме как это сделать может хоть немного подскажете?

[Андрей]

C ModX не работал а в WP сделал бы так:

Данные в массив в цикле, затем уже вне цикла вставляем элементы массива в HTML-шаблон

Answer 1

[Froggyweb]

events-item в чанк (&tpl) остальное либо в обертку pdoResources или в шаблон. непонятно что именно вызывает проблему.