• このエントリーをはてなブックマークに追加

なんと言えばいいのか、うまく言葉にできなかったので、いろいろ文字揺れはあるだろうから、こういうのを実現したいときのアイデア。

やりたかったこと

  • display:flexを使っている
  • display:flexを指定しているboxは可変
  • display:flexを指定している子要素は、固定幅
  • 左から右にflex-wrapせずに表示
  • overflowしたい
  • スクロールバーを表示する

ということ。HTML、CSSに詳しくない人が、例えば商品の一覧で、フリックできるようなオーバーフローを許容する可変幅のflexのボックスを準備して、横並びにするときの方法。うまくこれも説明できないけど。

HTML

<div class="sample">
<ul>
<li>あああ</li>
<li>あああ</li>
<li>あああ</li>
<li>あああ</li>
<li>あああ</li>
<li>あああ</li>
<li>あああ</li>
<li>あああ</li>
<li>あああ</li>
<li>あああ</li>
<li>あああ</li>
<li>あああ</li>
</ul>
</div>

CSS

.sample{
overflow: auto;
}
.sample ul{
overflow: auto;
padding-right: 20px;
}
.sample ul::-webkit-scrollbar {
width: 4vw;
}
.sample ul::-webkit-scrollbar-track {
background: #f2f2f2;
}
.sample ul::-webkit-scrollbar-thumb {
background:#0ba29b;
}
.sample ul{
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.sample li{
flex: 0 0 auto;
width: calc(50% - 20px);
border: solid 10px #f00;
}

解説

単位はサンプルの便宜上pxを使っているが、この本質を捉えた上で幅を他の単位にして構築するのも良い。行っているのはul自体をflexにして、その子要素であるliが横に並んで、数が多いために、ulの本来の幅をオーバーしてしまうといったこと。

オーバーしたときにはスクロールバーが表示されるようになっている。