2018年2月5日月曜日

flexboxでインライン要素を縦に並べる


このような配置の インライン要素 <button></button> を flexbox を使って実現する



コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する


index.html
<!DOCTYPE html>
<html>
  <head>
    <style>
    .flex_div {
      display: inline-flex;
      flex-direction: column;
    }

    .flex_div > button {
      padding: 10px;
      background-color: green;
      color: white;
    }

    .flex_div > button:nth-child(1) {
      background-color: blue;
    }
  </style>
  </head>
  <body>
    <div class="flex_div">
      <button>blue</button>
      <button>green</button>
    </div>
  </body>
</html>
意訳
これはHTML5文書です



flex_divの
inline要素をflexで表示する
縦方向に


flex_divの中のbutton要素の
余白を設定
背景色を設定
文字色を設定


flex_divの中のbutton要素の1つめの
背景色を設定する




div要素を置く → classはflex_div
button要素を置く
button要素を置く