Flexboxとposition: fixedを組み合わせたときにぶつかった壁
margin-leftで左端からの位置を指定してやることで解決しました
ぶつかった壁
いちご、めろん、りんごのテキストが入った3つのdivをFlexboxで横に並べて
こうしたかったけれど
全部左に寄ってこうなってしまった
コード.gs
function doGet() { return HtmlService.createHtmlOutputFromFile("index"); } |
壁にぶつかったindex.html
index.html
<!DOCTYPE html> <html> <head> <style> .flex_row{ display: flex; flex-direction: row; } .fixed { position: fixed; } #div1 { width: 10vw; border: solid 1px red; } #div2 { width: 15vw; border: solid 1px green; } #div3 { width: 20vw; border: solid 1px blue; } </style> </head> <body> <div id="main_div" class="flex_row"> <div id="div1" class="fixed"> いちご </div> <div id="div2"> めろん </div> <div id="div3" class="fixed"> りんご </div> </div> </body> </html> |
以下のようにmargin-leftを追加して解決しました
解決したindex.html
index.html<!DOCTYPE html> <html> <head> <style> .flex_row{ display: flex; flex-direction: row; } .fixed { position: fixed; } #div1 { width: 10vw; border: solid 1px red; } #div2 { width: 15vw; border: solid 1px green; margin-left: 10vw; } #div3 { width: 20vw; border: solid 1px blue; margin-left: 25vw; } </style> </head> <body> <div id="main_div" class="flex_row"> <div id="div1" class="fixed"> いちご </div> <div id="div2"> めろん </div> <div id="div3" class="fixed"> りんご </div> </div> </body> </html> | POINTここにdiv1のwidth分のmargineを入れる ここにdiv1とdiv2のwidth分のmarginを入れる |
補足
margine-leftのイメージ
対象のdiv内でスクロールするにはoverflow: scrollも考えられますが
今回は対象のdiv以外を固定したくてfixedとmargin-leftを使いました
参考
position
overflow
flex