如何使用Flexbox使台式机上的三列和小型设备中的一列响应？

Question

我有一个页脚节，其中包含三列，我希望它可以使用flex box进行响应：

<div id="footer-main">
   <div class="footer-column">
      <ul>
         <li><a href="/content/8-regulamin" class="underline-from-left">Regulamin</a></li>
         <li><a href="/content/10-zwrot-i-wymiana" class="underline-from-left">Zwrot i wymiana</a></li>
         <li><a href="/content/9-polityka-prywatnosci" class="underline-from-left">Polityka prywatności</a></li>
      </ul>
   </div>
   <!-- footer-column -->
   <div class="footer-column">
      <ul>
         <li><a href="/faq/1-faq" class="underline-from-left">FAQ</a></li>
         <li><a href="" class="underline-from-left">Praca</a></li>
         <li><a href="/content/praca" class="underline-from-left">Kontakt</a></li>
      </ul>
   </div>
   <!-- footer-column -->
   <div class="footer-column">
      <ul>
         <li><a href="content/prasa">Prasa</a></li>
         <li><a href="/content/wholesale">Wholesale</a></li>
      </ul>
   </div>
   <!-- footer-column -->
   <div class="footer-column" id="socialicons">

      <div id="custom-social" class="">
         <a href="https://www.facebook.com/demo" target="_blank" class="button-facebook"></a>
         <a href="https://instagram.com/demo/" class="button-instagram" target="_blank"></a>
         <a href="https://www.pinterest.com/demo/" target="_blank" class="button-pinterest"></a>
      </div>
   </div>
   <!-- footer-column -->
</div>

这是CSS：

#footer-main {
    display: flex;
    justify-content: flex-end;
}


@media (max-width: 768px){
  #footer-main {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

当我尝试通过chrome开发工具检查响应速度时，这是我到目前为止所能获得的

我的代码中缺少什么？

Answer 1

在Chrome开发工具中，模拟分辨率的宽度为914px（如上图所示），大于768px（其中页脚为1列而不是3列）。因此，将浏览器窗口的宽度调整为小于768px-它将起作用:)

• 您可以在顶部的开发栏旁边看到浏览器大小的宽度/高度变化。