html - flexbox - 1/3 和 2/3 比例的中心元素

Question

我需要将元素(一个)居中放置在 1/3 的行空间中，并将另一个元素(两个)居中放置在行空间的其余部分(2/3)中。

https://jsfiddle.net/gpe9a5qb/1/

如何将元素居中到它们适合的特定空间，这样它们就不会居中取决于它们的大小，而是取决于它们所签名的空间的大小(1/3 和 2/3)？

body {
  border: 1px dotted yellow;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: brown;
}

.container {
  background: red;
  width: 250px;
  height: 100px;
}

.box {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.one {
  background: green;
  flex: 1 1 auto;
}

.two {
  background: blue;
  flex: 2 1 auto;
}

<div class="container">
  <div class="box">
    <div class="one">1/3</div>
    <div class="two">2/3</div>
  </div>
</div>

.one 应该在 1/3 空间内居中，.two 必须在 2/3 空间内居中。

Answer 1

如果我没听错，你说的是水平居中。

CSS 看起来像这样

body {
  border: 1px dotted yellow;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: brown;
}

.container {
  background:red;
  width: 250px;
  height: 100px;
}

.box {
  display: flex;
}

.box > div {
  display: flex;
  justify-content: center;
}

.one {
  background: green;
  flex-basis: 33.33%; 
}

.two {
  background: blue;
  flex-basis: 66.66%;
}

我在这里所做的是，我将 flex 放在内部 div 上，并将它们的内容居中(而不是父容器，你不能居中，因为它们占用了空间)。