HTML5とCSSにめっぽう強い、弓削田です。
今回は、ゲーム作りから少し離れて、通常の仕事をしている時に見つけた、発生しがちな不具合とその対処方法について、
備忘録として残しておきたいと思います。
display:flexによる表示不具合
webページを構築する際に、カルーセル機能や、何かしらのアイテムを整列して並べる時に、displayのflex機能は相当便利に使えます。 サンプルとして、基準のコードは以下のようなものがある場合、<div class="sample-1">
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
</div>
<style>
.sample-1{
width:200px;
display:flex;
border:1px solid black;
}
.sample-1 > *{
width:50px;
height:50px;
margin:10px;
}
.red{
background-color:red;
}
.blue{
background-color:blue;
}
.green{
background-color:green;
}
</style>
最もシンプルに使おうと、次のようなコードで記述すると、都合の悪い不具合が発生してしまいます。
<div class="sample-2">
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
</div>
<style>
.sample-2{
width:200px;
display:flex;
border:1px solid black;
overflow-x:auto;
}
.sample-2 > *{
min-width:100px;
height:50px;
margin:10px;
}
</style>
内部スクロールする箇所の右側のmarginが無くなっている事がわかると思います。
不具合対処方法
上記のようにinnerのmarginが取れてしまう現象を回避するには次のようなコードにする必要があります。<div class="sample-3">
<div class="outer">
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
</div>
</div>
<style>
.sample-3{
width:200px;
border:1px solid black;
overflow-x:auto;
}
.sample-3 > .outer{
display:flex;
float:left;
box-sizing: border-box;
}
.sample-3 > .outer > *{
width:100px;
height:50px;
margin:10px;
}
</style>
