RubyRube RubyRube - 3 years ago 147
CSS Question

How do I make Flexbox project boxes appear in rows of three?

My project boxes are appearing in a horizontal row, and stretching to the right infinitely, instead of appearing in rows of three. They eventually render outside the viewport in a long horizontal line.

Fiddle:

https://jsfiddle.net/qk1pkkcd/2/

Project boxes:

<div class="card-container">
<div class="card-top learn">
<img class="card-top.create card-top" src="<%= Citybuilder.ProjectPic.url({@post.project_pic, @post}) %>" />
<span class="project-type"><%= @post.project_location %></span>
<div class="blur"></div>
</div>
<div class="content">
<div class="details">
<span> </span>
<span>...</span>
</div>
<div class="project-card-title">
<%= @post.title %>
</div>
<!-- tried to add this and got assigns error: <%#= @post.title %> -->
<div class="project-card-summary">
<%= truncate @post.body, length: 80, separator: " " %>
</div>
<h3 class="house-divider-unicode">~</h3>
<div style="text-align: center">
<div class="project-card-done-so-far-one">1.
<%= @post.done_so_far_one_title %>
</div>
<div class="project-card-done-so-far-one">2.
<%= @post.done_so_far_two_title %>
</div>
<div class="project-card-done-so-far-one">3.
<%= @post.done_so_far_three_title %>
</div>
</div>


Render the posts:

<div class="center-wrap">
<table id="posts" class="table posts flex-table-posts">
<tbody>
<%= for post <- @posts do %>
<%= render "_post_variants.html", conn: @conn, post: post, upvote: @upvotes[post.id], forks_count: @forks_count %>
<% end %>
</tbody>
</table>
</div>


I added a width of 1/3 to the card container:

.card-container {
font-family: "Open Sans", sans-serif;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
display: inline-block;
min-width: 24.92em;
height: auto;
margin-right: 2em;
margin-bottom: 2em;
border-radius: 0.5em;
background-color: #fff;
box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.3);
position: relative;
padding-bottom: 3em;
width: calc(100% * (1/3));
flex-grow: 1;
}

.flex-parent-container {
display: flex;
flex-wrap:wrap;
}


But the boxes are not rendering in rows of 3.

Answer Source

Add a class flexy to the wrapper div and set it as flex container

.flexy{
    display:flex;
    flex-wrap:wrap;
}

Also updated the width to fit the page perfectly. Here's the link to codepen: https://codepen.io/Rookie_sai/pen/yzogvz

Hope that helps

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download