Flexbox | 子要素 | 横並び

例えば、こんなボックスが3つあるとします。

f:id:khirok:20191227214132p:plain

HTMLはこちらです(boxesという親クラスは、box1〜box3の子クラスを持っています)。

<body>
　<div class="boxes">
　　　<div class="box1">
 　　　　box1
　　　</div>
　　　<div class="box2">
 　　　　box2
　　　</div>
　　　<div class="box3">
 　　　　box3
　　　</div>
　</div>
</body>

CSSはこちらです。

.box1 , .box2, .box3 {
 　background-color: paleturquoise;
 　width: 110px;
 　font-size: 50px;
 　border: 5px solid black;
 　padding: 50px;
 　margin: 50px;
}