HTML, CSS だけで1行の均等割付、両端揃え

shige · shige · commit d9adaba5d72e · 2020-04-20T22:49:15.000+09:00
diff --git a/justify/index.html b/justify/index.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="ja">
+
+<head>
+    <meta charset="utf-8">
+    <title>justify</title>
+
+    <style>
+        .center {
+            width: 50%;
+            margin: auto;
+        }
+
+        .justify {
+            display: flex;
+            justify-content: space-between;
+        }
+
+        .text-area {
+            border: 1px solid #aaa;
+            margin: 50px;
+        }
+    </style>
+
+</head>
+
+<body>
+    <div class="center">
+        <div class="justify text-area">
+            <span>均</span>
+            <span>等</span>
+            <span>割</span>
+            <span>付</span>
+        </div>
+
+        <div class="justify text-area">
+            <span>両</span>
+            <span>端</span>
+            <span>ぞ</span>
+            <span>ろ</span>
+            <span>え</span>
+        </div>
+    </div>
+</body>
+
+</html>
