css - 右对齐 Flex 容器

Question

我正在尝试将 flex 容器与其所在 block 的右侧对齐。

我正在使用 Magento 2.2.3

它所在的容器具有以下集合:

box-sizing: border-box;
margin-left: auto;
margin-right: auto;
max-width: 1280px;
padding-left: 20px;
padding-right: 20px;
width: auto;
}

我的 flex 容器和它的 div。

#kidsaw-social-links {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-end;
background-color: red;
}

#kidsaw-social-links > div {
width: auto;
height: auto;
border: 1px dashed red;
}

我已经有了上面的设置，并尝试玩弄我在谷歌上看到的各种东西，但没有任何运气。

如果我在#kidsaw-social-links 上设置宽度，它会起作用，但当缩小我的网络浏览器时，它不会针对移动设备进行缩放。

   .page-bottom, .footer .content {
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    max-width: 1280px;
    padding-left: 20px;
    padding-right: 20px;
    width: auto;
   }
    #kidsaw-social-links {
	  display: flex;
	  flex-direction: row;
	  flex-wrap: nowrap;
	  justify-content: flex-end;
	  background-color: red;
  }
    #kidsaw-social-links > div {
	   width: auto;
	   height: auto;
	   border: 1px dashed red;
   }
    #kidsaw-footer {
    display: flex; 
    flex-direction: row; 
    flex-wrap: nowrap; 
    justify-content: space-between;
   }
   #kidsaw-footer > div {
    width: auto; 
    height: auto; 
    padding: 10px;
   }
   #kidsaw-footer > ul {
   list-style-type: none;
   padding-left: 20px;
   }
   

<div class="page-bottom">

<div id ="kidsaw-social-links">

<div><img title="Like us on Facebook" src="http://i.cubeupload.com/1Iy3Xm.jpg" alt="Like us on Facebook" width="68" height="76"></div>
<div><img title="Like us on Facebook" src="http://i.cubeupload.com/1Iy3Xm.jpg" alt="Like us on Facebook" width="68" height="76"></div>
<div><img title="Like us on Facebook" src="http://i.cubeupload.com/1Iy3Xm.jpg" alt="Like us on Facebook" width="68" height="76"></div>
<div><img title="Like us on Facebook" src="http://i.cubeupload.com/1Iy3Xm.jpg" alt="Like us on Facebook" width="68" height="76"></div>
<div><img title="Like us on Facebook" src="http://i.cubeupload.com/1Iy3Xm.jpg" alt="Like us on Facebook" width="68" height="76"></div>

</div>

<div class="footer content">

<div id="kidsaw-footer">

<div>
<h2>Store Information</h2>
<ul>
<li><a href="/">Homepage</a></li>
<li><a href="/">About Us</a></li>
</ul>
</div>
<div>

<h2>Support</h2>
<ul>
<li><a href="/">Contact Us</a></li>
<li><a href="/">Customer Service</a></li>
<li><a href="/">Orders and Returns</a></li>
<li><a href="/">Privacy and Cookie Policy</a></li>
</ul>
</div>

<div>
<h2>Store Tools</h2>
<ul>
<li><a href="/">Advanced Search</a></li>
<li><a href="/">Search Terms</a></li>
</ul>
</div>

</div>
</div>

Answer 1

在您的情况下，您可以选择 2 种方式中的一种。第一个将 100% 宽度添加到 flex 容器并将 justify-content 添加到 flex-end；

#kidsaw-social-links {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  background-color: red;
}

第二个只是添加 margin-left: auto;右边距:0；到你的容器