フレックスコンテナをコンテンツに合わせる方法

Question

フレックスコンテナを親の中で最大サイズまで拡大し、アイテムに合わせて縮小したい。

この例では、コンテナを視覚化するためにFlexコンテナの背景色を設定しています。今度は親の幅全体を塗りつぶしますが、右マージンは必要ありません。

これは私がこれまでに得たものである：

Htmlの& CSS：

<div class="lc-category-items-wrap"> 
    <section> 
     Obj 1 
    </section> 
    <section> 
     Obj 2 
    </section> 
    <section> 
     Obj 3 
    </section> 
    <section> 
     Obj 4 
    </section> 
    <section> 
     Obj 5 
    </section> 
    <section> 
     Obj 6 
    </section> 
</div> 

.lc-category-items-wrap { 
    display: flex; 
    flex: 1 1 auto; 
    flex-flow: row wrap; 
    justify-content: flex-start; 
    align-items: flex-start; 
} 

.lc-category-items-wrap > section { 
    width: 244px; 
    min-height: 270px; 
} 

Answer 1

、それは全体のコンテナに随分れますように、.lc-category-items-wrap > sectionのための次のスタイルを追加します。幅にマージンはありません。

flex-grow: 1; 
flex-basis: 0; 

Hereはjsfiddleです。

Answer 2

フレックスマージンの幅を広げることができない限り、このための「本当の」解決法はありません。

あなたがこれを行うにはしたくない場合は、私はこのような状況でjustify-content: space-between;かjustify-content: space-around;を使用することをお勧めします：

.lc-category-items-wrap { 
 
    display: flex; 
 
    flex: 1 1 auto; 
 
    flex-flow: row wrap; 
 
    justify-content: space-between; 
 
    align-items: flex-start; 
 
} 
 

 
.lc-category-items-wrap>section { 
 
    width: 244px; 
 
    min-height: 270px; 
 
    background: #ddd; 
 
    margin: 5px; 
 
}

<div class="lc-category-items-wrap"> 
 
    <section> 
 
    Obj 1 
 
    </section> 
 
    <section> 
 
    Obj 2 
 
    </section> 
 
    <section> 
 
    Obj 3 
 
    </section> 
 
    <section> 
 
    Obj 4 
 
    </section> 
 
    <section> 
 
    Obj 5 
 
    </section> 
 
    <section> 
 
    Obj 6 
 
    </section> 
 
    <section> 
 
    Obj 7 
 
    </section> 
 
</div>

右の余白を回避するために、インラインフレックス