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.


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 class="content">
<div class="details">
<span> </span>
<div class="project-card-title">
<%= @post.title %>
<!-- tried to add this and got assigns error: <%#= @post.title %> -->
<div class="project-card-summary">
<%= truncate @post.body, length: 80, separator: " " %>
<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 class="project-card-done-so-far-one">2.
<%= @post.done_so_far_two_title %>
<div class="project-card-done-so-far-one">3.
<%= @post.done_so_far_three_title %>

Render the posts:

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

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;

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


Also updated the width to fit the page perfectly. Here's the link to codepen:

Hope that helps

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