HTML - 左右对齐 3 个元素并居中，但如果没有空格则将中间的一个元素向左移动

Question

我有三个元素，见下图

这是 1080p 屏幕，效果很好。但是，在较小的屏幕上，右侧与中心横幅重叠，请参见下图

我该如何解决这个问题？下面是我的代码

<link href="http://www.w3schools.com/lib/w3.css" rel="stylesheet"/>
<div class="w3-container aq-purple" style="box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">


                <img src="images/ficon.png" style="position:absolute;left:30px;top:4px;width:100px">
                <div align="center">
                    <img src="fbanner.png" style="margin-top:15px;width:100%;max-width:500px;">
                </div>
                <div  style="position:absolute;right:15px;top:60px;bottom:0px">
                    <ul class="w3-navbar" style="position:relative;bottom:0px;height:40px">
                        <li>
                            <a class="w3-hover-amber w3-border aq-border-gold" href="#">
                                Home
                            </a>
                        </li>
                        <li>
                            <a class="w3-hover-amber w3-border aq-border-gold" href="gallery.html">
                                Classes
                            </a>
                        </li>
                        <li>
                            <a class="w3-hover-amber w3-border aq-border-gold" href="events.html">
                                Events
                            </a>
                        </li>
                        <li>
                            <a class="w3-hover-amber w3-border aq-border-gold" href="gallery.html">
                                Gallery
                            </a>
                        </li>
                        <li>
                            <a class="w3-hover-amber w3-border aq-border-gold" href="donations.html">
                                Donate
                            </a>
                        </li>
                        <li>
                            <a class="w3-hover-amber w3-border aq-border-gold" href="contact.html">
                                Contact Us
                            </a>
                        </li>
                    </ul>
                </div>

左边的icon，右边的navbar是正确的。中间横幅需要在屏幕中居中。但是，当屏幕很小时，它会重叠。如果空间不足，我需要它移过去

Answer 1

.wrapper {
  display: flex;
  height: 3em;
}

ul,
li {
  list-style: none;
  padding: 0 4px;
}

.left,
.middle,
.right,
li {
  display: inline-block;
  height: 100%;
}
.left {
  background-color: black;
  flex: 0 0 3em;
}
.middle {
  background-color: brown;
  flex: 10 1;
  color: yellow;
  line-height: 3em;
  text-align: center;
}
.right {
  background-color: lightgrey;
  flex: 1 0;
  white-space: nowrap;
}

<div class="wrapper">
  <div class="left">
  </div>
  <div class="middle">Middle middle middle
  </div>
  <div class="right">
    <ul>
      <li><a href="#">first</a>
      </li>
      <li><a href="#">second</a>
      </li>
      <li><a href="#">third</a>
      </li>
    </ul>
  </div>
</div>