html - 中心栏调整为文本，左右栏均匀拉伸

Question

我必须使用以下三列布局：

|div with stretched image|div adjusted to text|div with stretched image 2|

文本应居中，带有拉伸图像的 div 应均匀拉伸。

一些带有拉伸图像的 div 可能是空的。例如：

<div display="flex">
  <div><img src=...></img>
  </div>
  <div>Text</div>
  <div><img src=...></img>
  </div>
</div>

<div display="flex">
  <div></div>
  <div>Text</div>
  <div><img src=...></img>
  </div>
</div>

<div display="flex">
  <div><img src=...></img>
  </div>
  <div>Text</div>
  <div></div>
</div>

最终结果或多或少应该如下所示：

+----------------------------------------------------------+
|                    |Adjusted to text|                    |
|                      |Adjusted to |                      |
|                        |Adjusted|                        |
|                    |Adjusted to text|                    |
|                      |Adjusted to |                      |
|                        |Adjusted|                        |
+----------------------------------------------------------+

如何使用 flexbox 实现这一点？

标签： htmlcssreactjsflexboxmaterial-ui