Html 不同设备上的Flexbox和Flex Wrap问题_Html_Css_Flexbox_Responsive

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

html css

Html 不同设备上的Flexbox和Flex Wrap问题,html,css,flexbox,responsive,Html,Css,Flexbox,Responsive,我正在尝试使用flexbox实现以下布局，我有两个相邻的div容器。在第一个div中有6个框，它们必须是3，然后换行到下一行。第二个div包含文本。我已经尝试了许多不同的方法，因为我希望它们都可以堆叠在手机和平板电脑上，然后放在桌面上到目前为止，我掌握的代码是： <div class="container"> <div class="child">Test</div> <div class="child">Test</div>

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


试验
试验
试验
试验
试验
试验
你好
.集装箱{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
宽度：800px；
边框：1px纯红；
}
.孩子{
弹性：0计算（33.3%-20px）；
边框：1px纯蓝色；
}
.盒式集装箱{
显示器：flex；
}

通过设置

弹性基准：50%

使两个容器彼此相邻，使它们各自占据行的50%，并使其容器（

主体

）成为弹性容器

当屏幕最大宽度为768px或更低时，媒体查询用于更改样式。它将容器的

弹性方向

更改为

列

，以便元素垂直堆叠。然后，

flex basis

被设置为100%，因此每个元素占据整个列

.container{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
弹性基准：50%；
边框：1px纯红；
}
.孩子{
弹性：0计算（33.3%-20px）；
边框：1px纯蓝色；
}
.盒式集装箱{
显示器：flex；
弹性基准：50%；
}
身体{
显示器：flex；
}
@仅介质屏幕和（最大宽度：768px）{
.集装箱{
弯曲方向：立柱；
弹性基准：100%；
}
.孩子{
弹性基准：100%；
}
身体{
显示器：flex；
弯曲方向：立柱；
}
.盒式集装箱{
弹性基准：100%；
}
}


试验
试验
试验
试验
试验
试验
你好