css - Flexbox 列表溢出容器

Question

我进行了一些卡片设置，其中包括每张卡片底部/页脚的一些链接。我使用 flexbox 设置它们，但是，它们正在扩展到容器之外。

我尝试为列表和页脚 div 指定宽度，但无法使其换行。有什么想法吗？

.container {
    /*added by the editor to correctly reproduce the problem*/
        width:250px;
    /*-----*/
        background: #fff;
        border-radius: 5px;
        border: 1px solid #404040;
        box-shadow: 2px 2px 4px #888;
        margin: 0 auto;
    }

    .body {
        margin: 0 auto;
        width: 90%;
    }

    .footer ul {
        list-style: none;
        display: flex;
        flex: row wrap;
        justify-content: flex-end;
        padding-left: 0;
    }

    .footer li+li {
        margin-left: .5rem;
    }

  .footer li {
      line-height: 1.5rem;
      text-align: center;
      position: relative;
      white-space: nowrap;
  }

<div class="container">
       <div>
          Header Stuff
       </div>
       <div class="body">
          Body Stuff
       </div>
       <div class="footer">
          <ul>
           <li><a href="">Footer Link</a></li>
           <li><a href="">Footer Link</a></li>
           <li><a href="">Footer Link</a></li>
           <li><a href="">Footer Link</a></li>
          </ul>
       </div>
    </div>

Answer 1

您的 .footer ul 上的属性名称不正确。而不是 flex: row wrap，应该是 flex-flow: row wrap

由于该属性值无效，该规则将被忽略，并且没有任何内容告诉浏览器将 flex 元素包装在该 flex 容器中。

.container {
        width:250px;
        background: #fff;
        border-radius: 5px;
        border: 1px solid #404040;
        box-shadow: 2px 2px 4px #888;
        margin: 0 auto;
    }

    .footer ul {
        list-style: none;
        display: flex;
        /*only change is here*/
        flex-flow: row wrap;
        /*--------*/
        justify-content: flex-end;
        padding-left: 0;
    }

    .footer li+li {
        margin-left: .5rem;
    }

  .footer li {
      line-height: 1.5rem;
      text-align: center;
      position: relative;
      white-space: nowrap;
  }

<div class="container">
       <div>
          Header Stuff
       </div>
       <div class="body">
          Body Stuff
       </div>
       <div class="footer">
          <ul>
           <li><a href="">Footer Link</a></li>
           <li><a href="">Footer Link</a></li>
           <li><a href="">Footer Link</a></li>
           <li><a href="">Footer Link</a></li>
          </ul>
       </div>
    </div>