Question

我的项目框出现在水平行中，并向右无限延伸，而不是以三行显示。它们最终以长水平线在视口外部渲染。

小提琴：

项目框：

<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>

渲染帖子：

 <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>

我在卡片容器中添加了1/3的宽度：

.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;
}

但是这些框不会以3行显示。

Answer 1

将类find添加到包装器div并将其设置为Flex容器

flexy

还更新了宽度以完美贴合页面。这是codepen的链接： https://codepen.io/Rookie_sai/pen/yzogvz

希望有所帮助

如何使Flexbox项目框以三行显示？

1 个答案: