【CSS】flexプロパティでブロック要素を横並びにするよ【flex】

css
  • やることは簡単、横並びにしたい要素を親要素で囲んであげてdisplay:flexを指定するだけでOK
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>SCSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="oya">
        <div class="box green"></div>
        <div class="box yellow"></div>
        <div class="box red"></div>
    </div>
</body>
</html>
.box {
  width: 100px;
  height: 100px;
}
div.green {
  background: green;
}
div.yellow {
  background: yellow;
}
div.red {
  background: red;
}/*# sourceMappingURL=style.css.map */
.oya {
  display:flex;
}

コメント

タイトルとURLをコピーしました