在另一个 flexbox 旁边有一个 flexbox？

Posted 2023-03-05

【中文标题】在另一个 flexbox 旁边有一个 flexbox？

【英文标题】：Have a flexbox next to another flexbox?

【发布时间】：2017-01-15 08:46:22

【问题描述】：

我有两个带有子元素的弹性盒子。我希望每个弹性框都占据页面的 50%。

<div class="flexbox">
    ....
</div>
<div class="flexbox">
    ....
</div>

我试过了：

.flexbox
    display:flex;
    width: 50%;
    ....

我还考虑过将两个 div 包装在一个容器中，并以 50% 的基础在容器上显示 flex。我只是想知道是否有办法在没有容器的情况下做到这一点？

【参考方案1】：

要获得此结果，您需要：

在.flexbox 元素上使用display: inline-flex 从 html 中删除空格 使用box-sizing: border-box 填充和边框

* 
  box-sizing: border-box;

body,
html 
  padding: 0;
  margin: 0;

.flexbox 
  border: 1px solid black;
  display: inline-flex;
  width: 50%;

<div class="flexbox">
    ....
</div><div class="flexbox">
    ....
</div>

【讨论】：

@panthro 这是一个问题还是一个陈述？ :)

两者都有：p，认为这是一个白色问题，我该如何删除它？

您像我在回答中所做的那样，从字面上删除了 html 中 div 之间的空格。

是的，有几种方法可以删除空白，但在这种情况下，我建议使用这种方法或使用 cmets。