css - 使用 CSS flexbox 网格填充 API 数据

Question

我正在制作一个 node express 网站，对于新闻页面，我正在使用来自新闻 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>

Answer 1

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

使用 表 解决方案
仅使用 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%。