如何水平对齐子组件以占据容器宽度的一定百分比？答案

【问题标题】：How to align child components horizontally to occupy a certain percentage of the container's width?如何水平对齐子组件以占据容器宽度的一定百分比？
【发布时间】：2020-10-17 10:02:12
【问题描述】：

我有三个不同的 React 组件，格式如下：

<Container className={"parent"}>
    <h2>Heading</h2>
    <Tabs className={"childOne"}/>
    <Info className={"childTwo"}/>
</Container>

上述每个子组件都会渲染其他子组件和原生 html 标签，例如 <div>s 和 <span>s。

这就是我希望组件在浏览器上呈现的方式：

我已经尝试使用 CSS flex-box 来实现这一点。但是，子组件仅占用其内容的宽度，我无法将它们的宽度分别分配到容器的 66% 和 33% （两者之间有一些差距）。这是我尝试过的 CSS：

.parent {
  display: flex;
  flex-direction: row;
}

.childOne {
  flex-basis: 70%;
}

.childTwo {
  flex-basis: 30%;
}

我还在每个子组件上尝试了display: inline-block; 和float:left，但这甚至没有将子组件水平对齐。

有人可以告诉我如何实现这一目标吗？谢谢！

【问题讨论】：

你应该使用引导程序
bootstrap 不适合我 - 我需要使用一些自定义设计库。

标签： html css reactjs flexbox rendering

【解决方案1】：

最简单的方法是使用 flexbox。这里有一个例子。您可以添加任意数量的列。

基于 Bootstrap 5 的代码。

.row{
  display:flex;
  flex:1 0 100%;
  flex-wrap:wrap;
}
.row > *{
  flex-shrink:0;
  width:100%;
  max-width:100%;
}
.col-4{
  flex:0 0 auto;
  width:33.333333%;
}
.col-8{
  flex:0 0 auto;
  width:66.666667%;
}
/*DEMO*/*{box-sizing:border-box}.col-4,.col-8{padding:1.5rem;border:1px solid red}

<div class="row">
  <div class="col-8">A</div>
  <div class="col-4">B</div>
</div>

【讨论】：

我需要实际使用引导程序吗？
您不需要使用引导程序。这是一个标准的 flexbox :)
这是我通过您的解决方案得到的输出：imgur.com/Wq1cYUR。有什么我可以改变的吗？
可能你和其他 CSS 有冲突？容器呢？
Container其实就是一个简单的
。那里没有自定义 CSS。

【解决方案2】：

您在两者上都使用了flex-basis: 50%，这将是相等的，而不是您所期望的。也许让childOne flex-basis 为 70%？

您还可以在 childOne 上创建 flex: 2，在 child 2 上创建 flex: 1。

这是一个代码示例：https://codepen.io/jsmohamed/pen/XWXaMbp

【讨论】：

抱歉，发布问题时出现错误。我确实尝试了 70% 和 30%。问题已更正
这是我通过您的解决方案得到的输出（与其他答案相同）：imgur.com/Wq1cYUR