css - 无法移动 flexbox 中的元素

Question

我无法将提交按钮移动到左侧 1vw 而不影响右侧的 anchor 标记。此外， anchor 边框中有足够的空间，但在减小浏览器的宽度时，我无法让文本和图像保持在同一行上。

更新:通过将 anchor 显示: block 更改为显示:inline-flex，能够将图像和文本保持在 anchor 中的同一行。

仍然无法在不干扰 anchor 标记的情况下将提交按钮向右移动

#footer-top{
  background-color:white;
  padding: 0 2.87rem;
}

h3{
  color:#b3d7f8;
  font-size: 1.5vw;
  padding-top:3vw;
  padding-left:2vw;
  background-color:#538231;
  margin:0
}

#footer-container{
   padding: 0 2.87rem;
   background-color:white;
}

.myFooter{
  background-color:white;
  display: flex;  
  flex-wrap: nowrap;
}



.myFooter .left{
  flex: 1 1 auto;
  background-color:#538231;
  padding-top:3vw;
  padding-left:2vw;
  padding-bottom:2vw;
  
}

.myFooter label{
  display: block;
  color: #c2d59b;
  margin-bottom:1vw;
  font-size:1vw;
}

.myFooter input{
  padding: .5vw .5vw;
}

#email{
  height:1vw;
  line-height:1;
  font-size:1vw;
  width:25vw;
}

.submit-button {
  background-color: white!important; 
  border: none!important;
  color: black!important;
  padding: .5vw .5vw!important;
  text-align: center!important;
  text-decoration: none!important;
  display: inline-block!important;
  font-size: 1vw!important;
  height:2vw!important;
  width:5vw!important;
  line-height:1vw!important;
}



.myFooter .right{
  flex: 1 1 ;
  background-color:#538231;
  padding-bottom:2vw;
}

.myFooter .right a{
  display: inline-flex;
  color: white;
  border: 1px solid white;
  width: 71%;
  margin: 1vw 0;
  text-decoration:none;
}

 


.myFooter .right img{
  width: 1.5vw;
  height: 100%;
  padding: .59vw 0;
  display:block;
  float:left;
  margin:0 1vw;
}

.myFooter .right span{
  font-size:1vw;
  padding:1vw 0;
  display:inline-block;
  line-height:1;
}






@media screen and (max-width: 961px) {#footer-top,#footer-container{
  padding:0 1.7rem;}
}

<div id ="footer-top">
   <h3>Help create a sustainable and healthy town of Weston</h3>
</div>
<div id="footer-container">
   <div class="myFooter">   
      <div class="left">    
         <form name="message" method="post">
            <section>  
               <label for="email">Join our mailing list:</label><input id="email" type="email"  name="email" placeholder="enter email">
               <input class="submit-button" type="submit" value="Submit"> 
            </section>
         </form>
      </div>
      <div class="right">
         <a href="https://www.facebook.com/groups/1960906387454685">
            <img class="foot-icons" src="https://sustainablewestonma.000webhostapp.com/wp-content/uploads/2019/08/facebook-square-brands-green.png">
            <span class="foot-txt">Like us on Facebook</span>
         </a>

         <a href="https://www.instagram.com/sustainablewestonactiongroup/">
            <img class="foot-icons" src="https://sustainablewestonma.000webhostapp.com/wp-content/uploads/2019/08/instagram-brands-green.png">
            <span class="foot-txt">follow us on Instagram</span>
         </a>

         <a href="https://twitter.com/Weston_SWAG">
            <img class="foot-icons" src="https://sustainablewestonma.000webhostapp.com/wp-content/uploads/2019/08/twitter-square-brands-green.png">
            <span class="foot-txt">Retweet us on Twitter</span>
         </a>
      </div>
   </div>
<div>

Answer 1

由于您的 .left 和 .right 元素应用了 flex-grow: 1(通过 flex速记)它们已经扩展到所有可用空间并且正在接触。因此，任何改变一个元素宽度的东西都会影响另一个元素。

我建议的第一件事是摆脱该规则，而是在容器上使用 justify-content: space-between。

然后，通过给它们 white-space: nowrap 来防止右边的 anchor 换行。同时删除宽度限制，这样文本就不会溢出。

#footer-top {
  background-color: white;
  padding: 0 2.87rem;
}

h3 {
  color: #b3d7f8;
  font-size: 1.5vw;
  padding-top: 3vw;
  padding-left: 2vw;
  background-color: #538231;
  margin: 0
}

#footer-container {
  padding: 0 2.87rem;
  background-color: white;
}

.myFooter {
  /* background-color: white; */
  background-color: #538231; /* adjustment */
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between; /* new */
}

.myFooter .left {
  /* flex: 1 1 auto; */
  background-color: #538231;
  padding-top: 3vw;
  padding-left: 2vw;
  padding-bottom: 2vw;
}

.myFooter label {
  display: block;
  color: #c2d59b;
  margin-bottom: 1vw;
  font-size: 1vw;
}

.myFooter input {
  padding: .5vw .5vw;
}

#email {
  height: 1vw;
  line-height: 1;
  font-size: 1vw;
  width: 25vw;
}

.submit-button {
  background-color: white !important;
  border: none !important;
  color: black !important;
  padding: .5vw .5vw !important;
  text-align: center !important;
  text-decoration: none !important;
  display: inline-block !important;
  font-size: 1vw !important;
  height: 2vw !important;
  width: 5vw !important;
  line-height: 1vw !important;
  
    margin-left: 5px; /* change values here; right anchors don't move anymore */
}

.myFooter .right {
  /* flex: 1 1; */
  background-color: #538231;
  padding-bottom: 2vw;
    padding-right: 2vw; /* new */
}

.myFooter .right a {
  display: block;
  color: white;
  border: 1px solid white;
  /* width: 71%; */
  margin: 1vw 0;
  text-decoration: none;
  white-space: nowrap;  /* new */
  padding-right: 2vw;  /* new */
}

.myFooter .right img {
  width: 1.5vw;
  height: 100%;
  padding: .59vw 0;
  display: block;
  float: left;
  margin: 0 1vw;
}

.myFooter .right span {
  font-size: 1vw;
  padding: 1vw 0;
  display: inline-block;
  line-height: 1;
}

@media screen and (max-width: 961px) {
  #footer-top,
  #footer-container {
    padding: 0 1.7rem;
  }
}

<div id="footer-top">
  <h3>Help create a sustainable and healthy town of Weston</h3>
</div>
<div id="footer-container">
  <div class="myFooter">
    <div class="left">
      <form name="message" method="post">
        <section>
          <label for="email">Join our mailing list:</label><input id="email" type="email" name="email" placeholder="enter email">
          <input class="submit-button" type="submit" value="Submit">
        </section>
      </form>
    </div>
    <div class="right">
      <a href="https://www.facebook.com/groups/1960906387454685">
        <img class="foot-icons" src="https://sustainablewestonma.000webhostapp.com/wp-content/uploads/2019/08/facebook-square-brands-green.png">
        <span class="foot-txt">Like us on Facebook</span>
      </a>

      <a href="https://www.instagram.com/sustainablewestonactiongroup/">
        <img class="foot-icons" src="https://sustainablewestonma.000webhostapp.com/wp-content/uploads/2019/08/instagram-brands-green.png">
        <span class="foot-txt">follow us on Instagram</span>
      </a>

      <a href="https://twitter.com/Weston_SWAG">
        <img class="foot-icons" src="https://sustainablewestonma.000webhostapp.com/wp-content/uploads/2019/08/twitter-square-brands-green.png">
        <span class="foot-txt">Retweet us on Twitter</span>
      </a>
    </div>
  </div>
  <div>

jsFiddle demo