使用 CSS flexbox 网格填充 API 数据答案

【问题标题】：Using CSS flexbox grid for populating API data使用 CSS flexbox 网格填充 API 数据
【发布时间】：2018-09-23 02:15:27
【问题描述】：

我正在制作一个节点快递网站，我正在使用来自新闻 api (https://newsapi.org/) 的数据的新闻页面数据确实出现在页面上，但它不会相应地响应 CSS flexbox。我的意图是，每个news-row 看起来都像一个包含图片、标题和简短内容的框，并且框应该是这样的：
盒子盒子盒子盒子
盒子盒子盒子盒子
盒子盒子盒子盒子

下面的 Scss 框如下所示：
盒子
盒子
盒子
盒子
盒子

    //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>

【问题讨论】：

标签： css flexbox

【解决方案1】：

您使用 flexbox 解决这个问题的尝试很好。 flexbox 的一个难题是它很难与table 一起使用，因为它们都是不同的显示方式。另见this Stack Overflow question。

使用 table 解决方案
仅使用 table 来实现您想要的解决方法是将所有元素专门设置为 display: flex; 并使用它。这是CodePen example to do that。

$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 解决方案
有一个使用 div 而不是table 的解决方案。这是CodePen example。它比以前的解决方案短很多，并且仍然显示有效的 HTML 和 CSS。

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

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

只需要使“行”占据宽度的 25%。

【讨论】：