Использование сетки Flexbox CSS для заполнения данных API

Question

Я делаю сайт экспресс-узла, для страницы новостей я использую данные из API новостей (https://newsapi.org/) Данные действительно появляются на странице, но они не будут соответствующим образом реагировать на CSS flexbox. MyНамерение состояло в том, что каждый news-row будет выглядеть как ящик, содержащий изображение, заголовок и краткое содержание, и поля должны выглядеть следующим образом:
box box box box
box box box box
box box box box

При использовании Scss ниже поля выглядят так:
box
box
box
box
box

    //scss file
    .news-container {
        background-color: $light-background;

        .news-tb {
            width: 350px;
            display: flex;

            .news-row {
                display: flex;
                flex-direction: column;
            }

        }
    }

   //ejs file
     <div class="news-container">
        <table class="news-tb">
            <% for(var i = 0; i < data.articles.length; i++) {  %>
                <tr class="news-row">
                    <td class="news-img"><img src="<%= data.articles[i].urlToImage %>"/></td>
                    <td class="news-title"><%= data.articles[i].title %></td>
                    <td class="news-content"><%= data.articles[i].content %></td>
                </tr>
            <% } %>
        </table>
    </div>

Answer 1

Хорошая попытка использования flexbox для решения этой проблемы.Единственная дилемма flexbox в том, что использовать его с table может быть сложно, так как они оба представляют разные способы отображения вещей.См. Также этот вопрос о переполнении стека .

Использование table решение Обходной путь, чтобы просто использовать table для достижения того, чего вы хотите, специально установить все элементы на display: flex; и использовать это.Вот пример CodePen, чтобы сделать это .

$light-background: #eee;

.news-tb {
  background-color: $light-background;
  display: flex;
  flex-flow: row wrap;
  width: 100%;

  tbody,
  tr,
  td {
    display: flex;
  }

  tbody {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .news-row {
    flex: 1 1 25%;
  }
}

Использование Div Solution Есть решение, которое использует div вместо table.Вот пример CodePen для этого.Это значительно короче, чем прежнее решение, и все же показывает действительный HTML и CSS.

.news-tb {
  background-color: $light-background;
  display: flex;
  flex-flow: row wrap;
  width: 100%;

  .news-row {
    flex: 1 1 25%; 
  }
}

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