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>

. Один должен быть центром внутри 1/3, а. Два должны быть центром внутри 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 и центрирую их содержимое (не родительский контейнер, который вы не можете отцентрировать, потому что они занимают место).

Answer 2

Вы были почти там.Требуется всего одна модификация:

Сделайте каждый изгибаемый элемент гибким контейнером с justify-content: center.

Вот и все.

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

.box {
  display: flex;
  align-items: center;
  /* justify-content: space-around */ /* remove; doing nothing */
}

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

  /* NEW */
  display: flex;
  justify-content: center;
}

.two {
  background: blue;
  flex: 2 1 auto;
  
  /* NEW */
  display: flex;
  justify-content: center;
}

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

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

Answer 3

Если я вас правильно понимаю, вы хотите, чтобы ваши элементы .one и .two были вертикально центрированы внутри .box, в то же время занимая одну треть и две трети пространства соответственно.

Для этого вам просто нужно убедиться, что .box занимает все height из .container.

. Этого можно достичь, установив display: flex в .containerвместе с flex: 1 на .box:

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

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

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

.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>

Или просто установив height: 100% на .box:

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;
  height: 100%;
}

.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>