2019年5月20日月曜日

flexboxとposition:fixedを使ったときにぶつかった壁


Flexboxとposition: fixedを組み合わせたときにぶつかった壁

margin-leftで左端からの位置を指定してやることで解決しました

ぶつかった壁

いちご、めろん、りんごのテキストが入った3つのdivをFlexboxで横に並べて


こうしたかったけれど


全部左に寄ってこうなってしまった


※fixedを使わず素直に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