html - Flexbox 调用不起作用

Question

我有一个页脚，我想用 flexbox space-around 对齐方式水平组织它。无论出于何种原因，当我尝试显示以外的任何内容时，此页脚中的 li 元素会垂直折叠:inline-block;

 #footer {
  width: 75%;
  background: rgba(0, 0, 0, .5);
  height: 150px;
  position: absolute;
  bottom: 0;
}

  #footer ul {
    flex-direction: row;
    justify-content: space-around;
  }

   #footer li {
    width: 30%;
    height: 130px;
    flex-direction: row;
    justify-content: space-around;
    list-style: none;
    border: 1px solid white;
   }

随附的 html 很简单:

                     <footer id="footer">
                          <ul>
                             <li>copyright</li>
                             <li>sitemap</li>
                             <li>contact</li>
                          </ul>
                     </footer>

我已经尝试让 ul 保持不变，并且其显示状态没有明显差异。感谢任何输入，谢谢。

Answer 1

您还没有在页脚 ul 上设置 display: flex。

编辑:http://codepen.io/anon/pen/EjKOZq