LANG SELRCT

コードを書く場所についてはこちら

2018年1月22日月曜日

flexboxでブロック要素を横に並べる


このような配置の ブロック要素 <p></p> を flexbox を使って実現する

blue

green



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




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

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

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



flex_divの
flexで表示する
横方向に


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


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




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