flexboxで真ん中を中心に可変するには？

やりたいこと

flexboxで、ウインドウサイズを変えても、真ん中を中心に可変するようにしたい。

現状

今は左寄りになっています。
[文字] [画像] [文字] の構成になっていて、『真ん中の [画像] が絶対真ん中で、両サイドの [文字] はそれに合わせる』ように可変したいです。
コードをいじってみても効かず、左寄りのままになってしまいます。

コード

html
1<div class="left">　　<!--文字-->
2  <section class="~">
3    <p class="~">~</p>
4  </section>
5</div>
6
7<div class="middle">　　<!--画像-->
8  <img src="~.png" alt="~" width="411" />
9</div>
10
11<div class="right">　　<!--文字-->
12  <section class="~">
13    <p class="~">~</p>
14  </section>
15</div>

css
1html {font-size: 62.5%;}
2
3body {display: flex;}
4
5.left,.middle,.right {
6  margin-top: 11.9rem;
7}
8
9/* 上→右→下→左 */
10.left {
11  padding: 0 0 0 5.6rem;
12  margin-right: auto;
13}
14
15.middle {
16  flex-grow: 1;
17  justify-content: center;
18  align-items: center;
19}
20
21.right {
22  justify-content: flex-end;
23  padding: 0 5.6rem 0 0;
24}

よろしくお願いします。

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

回答2件

自己解決

左右のflexコンテナのwidthを一緒にして、middleにtext-align: center;入れたら真ん中で可変できました。

css
1.left {
2  padding: 0 0 0 5.6rem;
3  margin-right: auto;
4  width: 30rem;
5}
6
7.middle {
8  flex-grow: 1;
9  line-height: 0;
10  margin-left: 3rem;
11  margin-right: 3rem;
12  text-align: center;
13}
14
15.right {
16  padding: 0 5.6rem 0 0;
17  width: 30rem;
18}

画像を同比率で伸縮するのは、

css
1@media screen and (max-width: 480px) {
2  img {
3    max-width: 100%;
4    height: auto;
5  }
6}

ありがとうございました。

投稿2019/02/18 08:34

EXIT

総合スコア43

html
1    <body>
2        <div class="root">
3            <div class="left">
4                left
5            </div>
6            <div class="middle">
7                middle
8            </div>
9            <div class="right">
10                right
11            </div>
12        </div>
13
14        <style>
15            .root{
16                display: flex;
17            }
18            .left{
19                flex-grow: 1;
20                background-color: green;
21                height: 200px;
22            }
23            .middle{
24                flex-grow: 2;
25                background-color: red;
26                height: 200px;
27            }
28            .right{
29                flex-grow: 2;
30                background-color: aqua;
31                height: 200px;
32            }
33        </style>
34    </body>