Flexbox - 如果内容不够长，则项目不居中

Question

我希望我的页面显示如下：

粉色和棕色的盒子应该是绿色的50％

JSFiddle demo

＆＃13;

＆＃13;

.container
{margin:10px;
padding:10px;
border-radius:10px;
background:aqua;}

.green
{padding:10px;
background:green;}

.blue
{text-align:center;
background:blue;}

.violet
{background:violet;}

.pink
{padding:10px;
display:inline-flex;
flex:1 0 100%;
flex-flow:row wrap;
background:pink;}

.cornflowerblue
{display:flex;
justify-content:center;
flex:1 0 100%;
flex-flow:row wrap;
align-items:stretch;
background:cornflowerblue;}

.yellow
{width:100%;
margin:0 auto;
background:yellow;}

.brown
{padding:10px;
display:inline-flex;
flex:1 0 100%;
flex-flow:row wrap;
background:brown;}

.red
{display:flex;
justify-content:center;
flex:1 0 100%;
flex-flow:row wrap;
align-items:stretch;
background:red;}

.orange
{width:100%;
margin:0 auto;
background:orange;}

＆＃13;

<div class="container">
    <div class="green">
        <div class="blue">center</div>
        <div class="violet">left</div>
    </div>
    <div class="pink">
        <div class="cornflowerblue">center</div>
        <div class="yellow">left</div>
    </div>
    <div class="brown">
        <div class="red">center</div>
        <div class="orange">left</div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

获得该布局的基础是使container成为灵活容器，然后为每个green分配一个flex-basis值（flex-basis：100％），pink / brown（弹性基础：50％）

我还清理了一些CSS，所以现在你有一个纤薄的代码渲染你要求的布局

Updated fiddle

Stack snippet

＆＃13;

＆＃13;

.container {
  padding: 10px;
  border-radius: 10px;
  background: aqua;
  display: flex;
  flex-wrap: wrap;
}

.green {
  flex-basis: 100%;
  padding: 10px;
  box-sizing: border-box;
  background: green;
}
  .blue {
    text-align: center;
    background: blue;
  }
  .violet {
    background: violet;
  }

.pink {
  flex-basis: 50%;
  padding: 10px;
  box-sizing: border-box;
  background: pink;
}
  .cornflowerblue {
    text-align: center;
    background: cornflowerblue;
  }
  .yellow {
    background: yellow;
  }

.brown {
  flex-basis: 50%;
  padding: 10px;
  box-sizing: border-box;
  background: brown;
}
  .red {
    text-align: center;
    background: red;
  }
  .orange {
    background: orange;
  }

＆＃13;

<div class="container">
  <div class="green">
    <div class="blue">center</div>
    <div class="violet">left</div>
  </div>
  <div class="pink">
    <div class="cornflowerblue">center</div>
    <div class="yellow">left</div>
  </div>
  <div class="brown">
    <div class="red">center</div>
    <div class="orange">left</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;