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

Question

我有三个要素，见下图

这是一个1080p的屏幕，它工作正常。但是，在较小的屏幕上，右侧与中央横幅重叠，请参见下面的图片

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

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

左侧的图标和右侧的导航栏是正确的。中间横幅需要在屏幕中居中。但是，当屏幕较小时，它会重叠。如果缺乏空间我需要它移动

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>