HTML - インラインブロック要素が小さく動作するが、大きく見えるようにする

Question

インラインブロック要素（4つ）のセットが、きちんとした小さな行に並べられています。ウィンドウのサイズが変更されると、要素は2行目に折り返されます。ブラウザーが最小幅の最小幅に達するまで、スクロールバーが下部に表示されません。

これは私が探している「演技小」の部分です。 「ビッグ探し」のためとして、私はに要素をたい

は自分のラインの可能な限り多くのスペースを占有するに表示されます。

私が探している最終的な結果は、4つすべてが垂直の行に配置されている場合、すべてが同じ幅、つまり最も幅の広い要素の幅です。 1つの行にX要素があり、別の要素にYがある場合（3番目にZがあるかもしれませんが、時間の経過とともに要素を追加する機能が必要です）、各行の要素が展開され、最も広い行。

これを達成しようと私の試みでは、ラップが開始されると、それらを含むことを意図したシュリンクラップdivが最大幅になることに気付きました。

うまくいけば、これは適度にハックフリーになると思いますが、私はどんな提案もできます。

私は本当にjavascriptを避けたいですが、それが必要な場合は戻ってください。

A Fiddle.

コードフィドルで

<style> 
.centerParent { 
    text-align: center; 
    background-color: white; 
    border: 1px solid black; 
} 

.shrinkwrap { 
    display: inline-block; 
    margin: 0px 12px; 
    border: 1px solid blue; 
} 

span { 
    display: inline-block; 
    padding: 4px 12px; 
    margin: 6px; 
    border: 1px solid black; 
} 
</style> 
<!--Master div for centering children--> 
<div class="centerParent"> 
    <p> 
    other content 
    </p> 
    <!-- ShrinkWrap Container --> 
    <div class="shrinkwrap"> 
    <span>MotherDuck</span> 
    <span>Duckling The First</span> 
    <span>Duck2</span> 
    <span>JackInTheBox</span> 
    </div> 
    <p> 
    -- resize left right -- 
    </p> 
</div> 

ありがとうございました！

Answer 1

、あなたは各アイテムはサイズも、その個々のコンテンツに基づいて拡大/成長、flex: 1 0 auto;

.centerParent { 
 
    text-align: center; 
 
    background-color: white; 
 
    border: 1px solid black; 
 
} 
 
.shrinkwrap { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    margin: 0px 12px; 
 
    border: 1px solid blue; 
 
} 
 
span { 
 
    flex: 1 0 auto; 
 
    padding: 4px 12px; 
 
    margin: 6px; 
 
    border: 1px solid black; 
 
}

<!--Master div for centering children--> 
 
<div class="centerParent"> 
 
    <p> 
 
    other content 
 
    </p> 
 
    <!-- ShrinkWrap Container --> 
 
    <div class="shrinkwrap"> 
 
    <span>MotherDuck</span> 
 
    <span>Duckling The First</span> 
 
    <span>Duck2</span> 
 
    <span>JackInTheBox</span> 
 
    </div> 
 
    <p> 
 
    -- resize left right -- 
 
    </p> 
 
</div>

を使用したい場合

Answer 2

display: flexをコンテナに使用し、すべてのスパンをflex: 1に設定して、使用可能なスペースをすべて埋めることができます。 Error404の答え@に加えて

*{ 
 
    box-sizing: border-box; /* NEW: the widths will take the borders and paddings on them */ 
 
} 
 

 
.centerParent { 
 
    text-align: center; 
 
    background-color: white; 
 
    border: 1px solid black; 
 
} 
 

 
.shrinkwrap { 
 
    display: flex; /* NEW */ 
 
    flex-wrap: wrap; /* NEW: It will make the element goes to the next line if it does not have space inside the container. */ 
 
    margin: 0px 12px; 
 
    border: 1px solid blue; 
 
} 
 

 
span { 
 
    flex: 1; /* NEW: It will fill all the available space he can. */ 
 
    padding: 4px 12px; 
 
    margin: 6px; 
 
    border: 1px solid black; 
 
}

<!--Master div for centering children--> 
 
<div class="centerParent"> 
 
    <p> 
 
    other content 
 
    </p> 
 
    <!-- ShrinkWrap Container --> 
 
    <div class="shrinkwrap"> 
 
    <span>MotherDuck</span> 
 
    <span>Duckling The First</span> 
 
    <span>Duck2</span> 
 
    <span>JackInTheBox</span> 
 
    </div> 
 
    <p> 
 
    -- resize left right -- 
 
    </p> 
 
</div>