フレックスと整列している別の要素と要素を整列する方法は？

Question

フレックスコンテナの内側に、CSSプロパティ-webkit-flex-flow: row wrap;とjustify-content: space-around;を使用して中央に配置された2つの要素の行があります。この行の上には、行内の最も左のdivと垂直に配置されたテキストを持つdivがあります。

要素がdisplay: flex;のプロパティを保持するという要件でCSSのみを使用してこれを行うことはできますか？

は、ここに私のhtmlです：

<div class="flex-container"> 
    <div class="info-box"> 

    </div> 
    <div class="type-one"> 

    </div> 
    <div class="type-one"> 

    </div> 
</div> 

、ここでCSSです：

.flex-container { 
    padding: 0; 
    margin: 0; 

    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 

    -webkit-flex-flow: row wrap; 
    justify-content: space-around; 
} 

.type-one{ 
    width: 45%; 
    height: 50px; 
    background: tomato; 

    text-align: left; 

    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 

    -webkit-flex-flow: row wrap; 
    justify-content: flex-start; 
} 
.info-box{ 
    width: 100%; 
    height: 10px; 
    background: tomato; 
    margin-bottom: 3px; 
} 

Hereはフィドル例です。一番上の行が（flex-startアラインメントを持っているので）左からどのように始まっているのかを見ることができますが、2行目の一番左の要素が始まる位置から開始します。これは所定の要件で可能ですか？

編集：インフォボックスに2.5％の余白を追加するか、幅を95％にすることができることに気付きましたが、タイプ1の要素に相対的な解決策が望ましいので、それらの幅を変更すると、情報ボックスは自動的に再調整されます。

Answer 1

左端に配置するには、親要素の左右のマージンを、中央の列を開始する場所に合わせて設定します。 justify-contentをspace-aroundからspace-betweenに変更して、中央の列の左の間隔が変更されないようにし、それらの要素の幅を使用してそれらの間にスペースを作成します。このような

.flex-container { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
    
 
    padding: 0; 
 
    margin: 0; 
 
    width: 95%; 
 
    margin: auto; 
 
} 
 

 
.type-one{ 
 
    height: 50px; 
 
    background: tomato; 
 
    text-align: left; 
 
    width: 47.5%; 
 
} 
 

 
.type-two{ 
 
    width: 100%; 
 
    margin-top: 10px; 
 
    font-size: 15px; 
 
    text-align: center; 
 
    height: 20px; 
 
    background: tomato; 
 
} 
 

 
.info-box{ 
 
    width: 100%; 
 
    height: 10px; 
 
    background: tomato; 
 
    margin-bottom: 3px; 
 
}

<div class="flex-container"> 
 
    <div class="info-box"></div> 
 
    <div class="type-one"></div><div class="type-one"></div> 
 
    <div class="type-two"></div> 
 
</div>

は