Question

我正在创建一个节点快递网站，对于新闻页面，我正在使用新闻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 解决方案
一种仅使用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％即可。

使用CSS flexbox网格填充API数据

1 个答案: