Question

我试图让以下布局使用flexbox工作，我有两个div容器彼此相邻。在第一个div中有6个盒子，它们必须是3个，然后换行到下一行。第二个div包含文本。我已经尝试了许多不同的方法，因为我希望它们全都堆放在手机和平板电脑上，然后放在桌面上。

我到目前为止的代码：

 <div class="container">
  <div class="child">Test</div>
  <div class="child">Test</div>
  <div class="child">Test</div>
  <div class="child">Test</div>
  <div class="child">Test</div>
  <div class="child">Test</div>
</div>
<div class="box-container">
  <h1>hello</h1>
</div>


.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  width: 800px;
  border: 1px solid red;
}

.child {
  flex: 0 0 calc(33.3% - 20px);
  border: 1px solid blue;
}

.box-container{
  display:flex;
}

Answer 1

通过设置body使两个容器彼此相邻，以便它们各自占据行的50％并使其容器（flex-direction）成为灵活容器。

当屏幕的最大宽度为768px或更低时，媒体查询用于更改样式。它将容器的column更改为flex-basis，以便元素垂直堆叠。然后，.container { display: flex; flex-wrap: wrap; justify-content: space-between; flex-basis: 50%; border: 1px solid red; } .child { flex: 0 0 calc(33.3% - 20px); border: 1px solid blue; } .box-container { display: flex; flex-basis: 50%; } body { display: flex; } @media only screen and (max-width: 768px) { .container { flex-direction: column; flex-basis: 100%; } .child { flex-basis: 100%; } body { display: flex; flex-direction: column; } .box-container { flex-basis: 100%; } }设置为100％，因此每个元素占用整列。

＆＃13;

<body>
    <div class="container">
        <div class="child">
            Test
        </div>
        <div class="child">
            Test
        </div>
        <div class="child">
            Test
        </div>
        <div class="child">
            Test
        </div>
        <div class="child">
            Test
        </div>
        <div class="child">
            Test
        </div>
    </div>
    <div class="box-container">
        <h1>
            hello
        </h1>
    </div>
</body>

＆＃13;

public IOrderedQueryable<TEntity> Query<TEntity>(Expression<Func<TEntity, bool>> filter,
    params Tuple<Expression<Func<TEntity, object>>, bool>[] orderBy)
{
    IQueryable<TEntity> query = DbContext.Set<TEntity>();
    if (filter != null)
    {
        query = query.Where(filter);
    }
    if (orderBy != null)
    {
        query = orderBy.Aggregate(query, (current, tuple) => 
        current.OrderBy(tuple.Item1, tuple.Item2));
    }

    return query;
}

＆＃13;

Flexbox和Flex Wrap在不同设备上出现问题

1 个答案: