0
私は以前の質問への迅速なフォローアップをhereに掲載しました。このフレックスボックスの子供を他の子供の存在に応じて配置するにはどうすればよいですか？
私は別の子が存在するか否かに応じて、フレックスボックスの子要素を配置しようとしています。ベストいくつかのパネルで、このcodepen
に可視化
、ICON3はロードされません。コンテナはhiddenのクラスを受けて、私はdisplayまたはopacityなど
でそれを隠すために選択することができます私はICON4が右に滞在したい、とICON2に沿って上に移動すると、ラッパーのためにサイズを変更しますそれに応じて。しかし、私はそれを働かせるように見えることはできません。私が試した何
：
opacity: 0 - これは右側にICON4を保持しますが、ICON3がまだ存在してスペースを取るよう、ラッパーのサイズは変更されません。
display: none - これはちょうどICON3だったときにICON4を移動します。
も.hidden + .fourを使用してスタイリングの組み合わせを試してみましたが、私は実用的なソリューションを見つけることができません。
は、任意のヘルプをお願い申し上げます！
以下のスニペット：
* {
font-family: sans-serif;
}
.wrapper {
display: flex;
align-items: flex-start;
width: 500px;
background-color: #F9F9F9;
padding: 10px;
position: relative;
margin-bottom: 2em;
}
.image {
width: 150px;
margin-right: 1em;
}
.row {
display: flex;
flex-direction: column;
flex: 1 0 0;
}
.more {
font-weight: bold;
margin-top: 1em;
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 4em;
justify-content: space-around;
}
.hidden {
opacity: 0;
/*display: none; // this pushes ICON4 underneath */
}
.hidden + .four {
/*margin-bottom: 1.4em; // this seems to position .four correctly, but doesn't alter height of .wrapper */
}
.four {
margin-top: auto;
}
.ideal {
position: absolute;
bottom: 20px;
right: -44px;
}
.ideal span {
color: green;
font-weight: bold;
opacity: .2;
margin-right: 4em
}
.ideal {
position: absolute;
bottom: 32px;
right: -201px;
}
.ideal span {
color: green;
font-weight: bold;
opacity: .2;
margin-right: 4em
}<div class="wrapper">
<div class="image">
<img src="http://placehold.it/150x68" alt="" />
</div>
<div class="row">
<span>Text content</span>
<span>Text content</span>
<span>Text content</span>
<div class="more">
<span class="one">ICON1
</span>
<span class="two">ICON2</span>
<span class="three hidden">ICON3</span>
<span class="four">ICON4</span>
</div>
</div>
<div class="ideal"><span>ICON4</span>< ideal position and wrapper to resize</div>
</div>