兄弟が削除されると、フレックスアイテムが自動的にスペースを埋めるようにサイズを変更します。

Question

フレックスボックスが4つあり、空きスペースに合わせて自動的にリサイズするようにしました。

私は現在、クローズボタンがすべてのボックスを閉じているので、私のCSSには何か問題があると思います。

どこが間違っているのか分かりますか？フレックス項目にflex-grow: 1を与えることによって

#separator { 
 
    width: 20%; 
 
} 
 
#firstbox { 
 
    width: 20%; 
 
    padding-right: 10px; 
 
    border: 2px solid black; 
 
    padding-left: 10px; 
 
    margin-right: 4px; 
 
    flex-grow: 1; 
 
    flex-shrink: 1; 
 
} 
 
#secondbox { 
 
    width: 20%; 
 
    padding-right: 10px; 
 
    border: 2px solid black; 
 
    padding-left: 10px; 
 
    margin-right: 4px; 
 
    flex-grow: 1; 
 
    flex-shrink: 1; 
 
} 
 
#thirdbox { 
 
    width: 20%; 
 
    padding-right: 10px; 
 
    border: 2px solid black; 
 
    padding-left: 10px; 
 
    margin-right: 4px; 
 
    flex-grow: 1; 
 
    flex-shrink: 1; 
 
} 
 
#fourthbox img { 
 
    width: 30%; 
 
    height: 30%; 
 
    flex-grow: 1; 
 
    flex-shrink: 1; 
 
}

<div class="trancontent"> 
 
    <div id="separator"> 
 
    <br> 
 
    <hr> 
 
    </div> 
 
    <div id="firstbox"> 
 
    <span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>CLOSE</span> 
 
    <?php include 'test2.php';?> 
 
    </div> 
 
    <div id="secondbox"> 
 
    <span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>CLOSE</span> 
 
    <?php include 'test2.php';?> 
 
    </div> 
 
    <div id="thirdbox"> 
 
    <span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>CLOSE</span> 
 
    <?php include 'test2.php';?> 
 
    </div> 
 
    <div id="fourthbox"> 
 
    <img src="greek.jpg" alt="Greek Translation" height="400" width="400"> 
 
    </div> 
 
</div>

Answer 1

、それぞれが利用可能なスペースを消費する拡張されます。したがって、アイテムが削除されると、その兄弟は自動的にその新しいスペースに展開されます。

flex-container { 
 
    display: inline-flex; 
 
    flex-direction: column; 
 
    height: 150px; 
 
} 
 

 
/* key rule */ 
 
flex-container > * { flex: 1; } 
 
/* shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0 */ 
 

 
/* non-essential decorative styles */ 
 
#firstbox { background-color: aqua; } 
 
#secondbox { background-color: pink; } 
 
#thirdbox { background-color: lightgreen; } 
 
flex-container > * { width: 100px; border: 1px dashed black; text-align: center; }

<flex-container> 
 
    <div id="firstbox"> 
 
    <span id='close' onclick="parentNode.remove()">Close Box #1</span> 
 
    <?php include 'test2.php';?> 
 
    </div> 
 
    <div id="secondbox"> 
 
    <span id='close' onclick="parentNode.remove()">Close Box #2</span> 
 
    <?php include 'test2.php';?> 
 
    </div> 
 
    <div id="thirdbox"> 
 
    <span id='close' onclick="parentNode.remove()">Close Box #3</span> 
 
    <?php include 'test2.php';?> 
 
    </div> 
 
</flex-container>

：

は、この単純なアプローチを試してみてください