Using CSS flexbox grid for populating API data

Question

I'm making a node express website, for the news page I'm using data from news api (https://newsapi.org/) The data does appear on the page but it won't respond to CSS flexbox accordingly. My intention was, each news-row will look like a box containing image, headline, and brief content and the boxes should go like this :
box box box box
box box box box
box box box box

With the Scss below boxes appears like this:
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>

score 1 · Accepted Answer · answered Sep 22 '18 at 18:14

Good attempt of you of using flexbox to address this problem. The one dilemma of flexbox is that it can be hard to use it with table since they're both different ways of displaying things. See also this Stack Overflow question.

Using table solution
A workaround to just use table to achieve what you want is specifically set all the elements to display: flex; and use that. Here's a 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%;
  }
}

Using div solution
There's a solution that uses divs instead of table. Here's the CodePen example for that. It's substantial shorter than the former solution and still it is showing valid HTML and CSS.

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

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

is only needed to make the 'rows' take 25 percent of the width.

Using CSS flexbox grid for populating API data

1 Answers1