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
