flexbox内はline-heightを別に指定したい

記事内のレイアウトでflexboxを使用し、通常指定している行間（例ではline-height:2）と違う値をflexbox内の文章に指定したいのですが、下記CSSの様にすると、flexbox同士の行間もflexbox内で指定した行間隔になってしまいます。

CSS（ flexboxtst.css ）

CSS
1@charset "utf-8";
2
3.entry_body {
4  font-size: 14px;
5  line-height: 2;  
6}
7
8p {
9  margin: 0;
10  padding: 0;
11  border: 0;
12  outline: 0;
13  font-size: 100%;
14  vertical-align: baseline;
15  background: transparent;
16}
17
18/* flexbox 左右均等 -------------------------- */
19.flexbox_c {
20  display: flex;
21  line-height: 1.2;
22  }
23
24.flexbox_c :nth-child(1) {
25  width: 50%;
26  text-align: right;
27  margin-right: 0.5em;
28 }
29
30.flexbox_c :nth-child(2) {
31  width: 50%;
32  text-align: left;
33  margin-left: 0.5em;
34}

HTML
1<meta charset="utf-8">
2<link rel="stylesheet" href="flexboxtst.css">
3
4<div class="entry_body" >
5
6<div style="text-align: center;">
71行目です。<br>
82行目です。<br>
9<p>3行目です。</p>
104行目です。<br>
115行目です。<br>
12<div class="flexbox_c"><p>1行目</p><p>1行目の右</p></div>
13<div class="flexbox_c"><p>2行目</p><p>２２２２２２２２２２２<br>２２２２２２２</p></div>
14<div class="flexbox_c"><p>3行目</p><p>３３３３３３３３３３３３３３３３３</p></div>
15flexboxの間に文章<br>
16<div class="flexbox_c"><p>4行目</p><p>４４４４４４４４４４</p></div>
17<div class="flexbox_c"><p>5行目</p><p>５５５５５５５５</p></div>
18
19</div>
20
21</div>

ブラウザ上での画面コピーです。
（Firefox 57.0.1）

flexbox内のタグを<p>から<div>に変更もしてみたのですが、変わりません。
やり方がまずいんでしょうか。
現状はmargin-bottom で調整しています。

CSS
1.flexbox_c {
2  display: flex;
3  line-height: 1.2;
4  margin-bottom: 0.8em;
5  }

行動規範の内容に同意します

回答1件

ベストアンサー

的外れかもしれませんが、質問者さんが実現したいことは以下のように行えると思います。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        .entry_body,
13        .flexbox_c::before {
14            font-size: 14px;
15            line-height: 3.6;
16        }
17
18        p {
19            font-size: 100%;
20            vertical-align: baseline;
21            border: 0;
22            outline: 0;
23            background: transparent;
24        }
25
26        .flexbox_c::before {
27            content: '\200b';
28        }
29
30        .flexbox_c {
31            line-height: 1.2;
32            display: flex;
33            align-items: center;
34        }
35
36        .flexbox_c p {
37            width: 50%;
38        }
39
40        .flexbox_c p:nth-child(1) {
41            margin-right: .5em;
42            text-align: right;
43        }
44
45        .flexbox_c p:nth-child(2) {
46            margin-left: .5em;
47            text-align: left;
48        }
49    </style>
50</head>
51<body>
52<div class="entry_body">
53    <div style="text-align: center;">
54        1行目です。<br>
55        2行目です。<br>
56        <p>3行目です。</p>
57        4行目です。<br>
58        5行目です。<br>
59        <div class="flexbox_c">
60            <p>1行目</p>
61            <p>1行目の右</p>
62        </div>
63        <div class="flexbox_c">
64            <p>2行目</p>
65            <p>２２２２２２２２２２２<br>２２２２２２２</p>
66        </div>
67        <div class="flexbox_c">
68            <p>3行目</p>
69            <p>３３３３３３３３３３３３３３３３３</p>
70        </div>
71        flexboxの間に文章<br>
72        <div class="flexbox_c">
73            <p>4行目</p>
74            <p>４４４４４４４４４４</p>
75        </div>
76        <div class="flexbox_c">
77            <p>5行目</p>
78            <p>５５５５５５５５</p>
79        </div>
80    </div>
81</div>
82</body>
83</html>

投稿2017/12/03 14:33

s8_chu

総合スコア14731

hgforteratail

2017/12/04 01:58 編集

大変ありがとうございました。望む表現ができました。この after疑似要素の content: '\200b'; は、ちょっと変な表現ですが、だましを入れていると解釈して宜しいんでしょうか。ゼロ幅スペースを入れてそれの行間を再指定していると。あと align-items を指定してやらないと巧く行かないことや、flexboxのプロパティを色々確かめてみて勉強になりました。 HTMLのテストをする時にもheadタグやその他をきちっと入れてやらないと不安定な動作をする事も解り、この点でも大変勉強になりました。

行動規範の内容に同意します