不同设备上的 Flexbox 和 Flex Wrap 问题答案

【问题标题】：Flexbox and Flex Wrap issues on different devices不同设备上的 Flexbox 和 Flex Wrap 问题
【发布时间】：2018-03-10 18:42:34
【问题描述】：

我正在尝试使用 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;
}

【问题讨论】：

标签： html css flexbox responsive

【解决方案1】：

通过设置 flex-basis: 50% 使两个容器彼此相邻，使它们各自占据行的 50%，并使它们的容器 (body) 成为弹性容器。

当屏幕的最大宽度为 768 像素或更低时，使用媒体查询更改样式。它将容器的flex-direction 更改为column，以便元素垂直堆叠。然后，flex-basis 设置为 100%，因此每个元素占据一整列。

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

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

【讨论】：

谢谢，那也可以整理出两个 div 吗？尽管在每个容器上都使用了 display:flex，但我似乎无法让它们彼此相邻？
不，它没有。我不明白您希望 box-container 如何相对于 container 定位。
谢谢马克，我希望它在移动设备和平板电脑上堆叠，然后在桌面上它们彼此相邻。谢谢。