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 上，并将它们的内容居中（不是父容器，你不能居中，因为它们占据了空间）。