2つの列をフレックスボックスレイアウトで整列する方法（親を中心に1つと親の1つを左に配置する方法）

Question

フレックスボックスに新しい。おそらくルーキーの質問です

私が達成しようとしているのは、次のとおりです。 幅と高さが不明な2つの列が、親の左側に1列、中央に1列並べられています。

Answer 1

それはあなたの状況に依存しますが、少し問題を回避するには、第三見えない要素を追加することによって、役立つかもしれません。

例HTML：

<div class="parent"> 
    <div class="left"></div> 
    <div class="center"></div> 
    <div class="right"></div> 
</div> 

例CSS：

.parent { 
    display: flex; 
    justify-content: space-between; 
} 
.left { 
    width: 100px; 
    height: 60px; 
    background: red; 
} 
.center { 
    width: 50px; 
    height: 70px; 
    background: blue; 
} 
.right { 
    width: 70px; 
    height: 100px; 
    background: yellow; 
    visibility: hidden; 
} 

フィドル：あなたは同じ幅で3つの浮動要素を使用することができ曲げるための代替としてhttps://jsfiddle.net/eqcndn3m

と最後のものは空にしておきます：

フィドル更新

<div class="parent"> 
    <div class="column align-left"> 
     <div class="left"></div> 
    </div> 
    <div class="column"> 
     <div class="center"></div> 
    </div> 
    <div class="column"></div> 
</div> 

.parent { 
    text-align: center; 
} 
.column { 
    float: left; 
    width: 33.33%; 
} 
.align-left { 
    text-align: left; 
} 
.left { 
    display: inline-block; 
    width: 100px; 
    height: 60px; 
    background: red; 
} 
.center { 
    display: inline-block; 
    width: 50px; 
    height: 70px; 
    background: blue; 
} 

：通常のDOMの流れからそれを取るために、左の列にabsolute`：https://jsfiddle.net/eqcndn3m/1