【質問】flexboxでPCとSPの見た目を一緒にしたい
解決したいこと
PCサイトでulにflexboxを利用して横並びのコンテンツを作っています。
liにwidth: calc(100%/x);を指定してx列に並べています。
これでliが無限に増えてもx列で表示されますが、
スマホにしたときも横スクロールが出て構わないので、PC版と同じような見た目にしたいです。
お恥ずかしい限りですがお知恵を貸して頂けたらと思います。
どうぞよろしくお願いいたします。
0
PCサイトでulにflexboxを利用して横並びのコンテンツを作っています。
liにwidth: calc(100%/x);を指定してx列に並べています。
これでliが無限に増えてもx列で表示されますが、
スマホにしたときも横スクロールが出て構わないので、PC版と同じような見た目にしたいです。
お恥ずかしい限りですがお知恵を貸して頂けたらと思います。
どうぞよろしくお願いいたします。
liもしくはulの親要素のwidthを指定してあげればよいのでは?
スマホサイズの場合もwidth: calc(100%/x);が同値で幅を担保したいのであればこのような感じでどうでしょうか
See the Pen Untitled by southkey47 (@southkey47) on CodePen.
ご回答頂きありがとうございます!
無事に解決いたしました。
@yp_s10 様、まさにその通りでございました…
なんでこんな根本的なことを…とお恥ずかしい限りですがご指摘頂き助かりました。
@southkey47 様、コードまで書き起こして頂きありがとうございました。
まさに求めていた表示です!他にも気になる箇所があったので、参考にさせて頂きました。