回答編集履歴
1
追記
answer
CHANGED
|
@@ -20,11 +20,13 @@
|
|
|
20
20
|
```
|
|
21
21
|
```css
|
|
22
22
|
dl{
|
|
23
|
+
display: table-cell; /*（追記）vertical-align:middle;を使えるように*/
|
|
23
24
|
padding: 10px 0; /*上下に10pxの余白*/
|
|
24
25
|
}
|
|
25
26
|
dt,dd{ /*親要素の半分の幅で並べる*/
|
|
26
27
|
display: inline-block;
|
|
27
28
|
width: 50%;
|
|
29
|
+
vertical-align: middle; /*（追記）上下中央揃え*/
|
|
28
30
|
}
|
|
29
31
|
dt{
|
|
30
32
|
text-align: left; /*左寄せ*/
|
|
@@ -40,10 +42,11 @@
|
|
|
40
42
|
上の記述から`dt,dd{display: inline-block;}`を外すと，要素は横並びされません．これは，以前「ブロック要素」と呼ばれていたものの挙動です．旧「ブロック要素」は，必ず縦に並ぶものと決められており，`dt`,`dd`などの仕様もこれに該当するため，このような結果になります．
|
|
41
43
|
|
|
42
44
|
また，上の例のHTMLでは，`dt`と`dd`の間に`<!---->`（コメントアウト）が挟まれていますが，これがない場合，`<dt>`と`<dd>`の間に存在する改行文字（`\n` ※通常は表示されない）のせいで，marginのようなものが出来てしまい，全体の幅が「50% + 改行文字の幅 + 50%」となるため，要素が収まりきらず，カラム落ちが発生し，横並びにすることができません
|
|
45
|
+
（追記：改行文字の幅を消すには，dt,ddの閉じタグを省略する方法もあります）
|
|
43
46
|
|
|
44
47
|
このあたりまで説明されれば，flexboxの「うまみ」がかなり伝わるかと思います
|
|
45
48
|
|
|
46
|
-
x_xさんの例では，左右に寄せる記述を`justify-content: space-between;`という記述でまとめて行ってい
|
|
49
|
+
x_xさんの例では，左右に寄せる記述を`justify-content: space-between;`，上下中央揃えを`align-items: center;`という記述でまとめて行っており，コードが分かりやすくなっています．
|
|
47
50
|
|
|
48
51
|
flexboxの扱い方はここに分かりやすく載っています．ぜひ参照してください
|
|
49
52
|
- [CSS Flexbox の各プロパティの使い方を詳しく解説](https://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html)
|