2016-08-02 10 views
1

子供の幅を垂直フレックスボックスのコンテンツに制限するにはどうすればよいですか?シアンの背景からわかるように、子の幅はコンテナの幅を占めます。私はそれが必要な幅だけを占有したい。垂直フレックスボックスの子供の幅の幅

.container{ 
 
    display: flex; 
 
    background: yellow; 
 
    flex-direction: column; 
 
    padding: 5px; 
 
} 
 

 
.content{ 
 
    background: cyan; 
 
    margin: 5px; 
 
}
<div class="container"> 
 
    <div class="content">hello whats up</div> 
 
    <div class="content">hello whats up</div> 
 
</div>

答えて

2

フレックスコンテナの初期設定がalign-items: stretchです。

この設定では、フレックスアイテムがコンテナの横軸の全長を拡大します。 (この設定はflexboxの等しい高さの列を許可します)flex-direction: columnに入ると、横軸は水平になり、子はデフォルトでコンテナの全幅を拡張します。

コンテナのデフォルト値をalign-items: flex-start、または各フレックスアイテムのalign-self: flex-startに変更することができます。

.container{ 
 
    display: flex; 
 
    background: yellow; 
 
    flex-direction: column; 
 
    padding: 5px; 
 
} 
 

 
.content{ 
 
    background: cyan; 
 
    margin: 5px; 
 
    align-self: flex-start; /* NEW */ 
 
    
 
}
<div class="container"> 
 
    <div class="content">hello whats up</div> 
 
    <div class="content">hello whats up</div> 
 
</div>

参考文献:

+1

おかげでたくさん。これは動作します! – takeradi

関連する問題