CSS Flex-间距相等但元素左对齐？

Question

CSS Flex-间距相等但元素左对齐？

htmlcssflexbox

3

我有一个实践应用程序，可以动态地将内容填充到4列容器中。

我正在尝试使用flexbox使容器中的内容均匀分布。

当每行只有少于4个项目时，它们离得很远，因为它们没有向左对齐，这看起来不太好。

我可以使用flexbox和每个项目上的边距来调整容器之间的距离，但这样做也会使项目与边框相距甚远，而我想避免这种情况。

希望这讲得通。下面是我想要实现的重现效果，非常感谢您能提供任何建议 :)

html {
  border: 1px solid black;
  margin: 0 auto;
  width: 800px;
}

body {
  margin: 0;
}

ul {
  box-sizing: border-box;
  display: flex;
  flex-wrap:wrap;
  justify-content: space-between;
  padding: 0;
}

li {
  border: 1px solid black;
  box-sizing: border-box;
  list-style-type: none;
  text-align: center;
  width: 180px;
  /* margin: 1%; MUST comment out justify content when using this, to get an idea what I'm trying to achieve. Using margin pushes out the left-hand items, which I'm trying to avoid.*/
}

<div class="container">
  <nav>
    <a>Link 1</a>
    <a>Link 2</a>    
  </nav>

  <div class="content">
    <ul>
      <li><p>1</p></li>
      <li><p>2</p></li>
      <li><p>3</p></li>
      <li><p>4</p></li>
      <li><p>5</p></li>
      <li><p>6</p></li>      
      <li><p>7</p></li>      
    </ul>
  </div>
</div>

- user4609276

使用 li {... flex-basis: 180px; flex-grow: 1...} 替代 width。这将允许 <li> 在填充行时增长/缩小，但当剩余空间少于180像素时换行。另外：不要为 <html> 设置样式，它应该是文档的父容器，包含各种默认值等。请改为为 <body> 设置样式。 - Rene van der Lende

谢谢您的回复，非常感谢。这看起来很棒，但我希望它们具有相同的宽度并均匀间隔，同时也向左对齐。如果我应用 flex-grow，则项目会被拉伸。 - user4609276

这个 StackOverflow 的问题似乎很相关：https://dev59.com/a2Ml5IYBdhLWcg3wCDKW。 - Jacob Lockard

谢谢您的阅读。看起来诀窍是在列表末尾添加一个空的div元素。我尝试了其中的一种解决方法，虽然看起来很有前途，但它破坏了最后一行的布局（仅限于最后一行）。我会继续阅读，谢谢。 - user4609276

不确定是否有帮助，或许可以尝试使用ul的justify-content: start属性，并使用li的margin: 1%属性。然后添加一个CSS类li:nth-child(5n), li:first-child: margin-left: 0px来去除每行第一个元素的左边距。 - Jones Lee

重复：https://dev59.com/a2Ml5IYBdhLWcg3wCDKW?rq=1 - Peter Højlund Palluth

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- nitin9nair · Accepted Answer

根据您的问题，您可以使用以下代码，使所有项目对齐到左侧，并且每行始终有4个项目。

html {
  border: 1px solid black;
  margin: 0 auto;
  width: 800px;
}

body {
  margin: 0;
}

ul {
  box-sizing: border-box;
  display: flex;
  flex-wrap:wrap;
  justify-content: start;
  padding: 1%;
}

li {
  border: 1px solid black;
  box-sizing: border-box;
  list-style-type: none;
  text-align: center;
  flex-basis: 23%;
  margin: 1%;
}

<div class="container">
  <nav>
    <a>Link 1</a>
    <a>Link 2</a>    
  </nav>

  <div class="content">
    <ul>
      <li><p>1</p></li>
      <li><p>2</p></li>
      <li><p>3</p></li>
      <li><p>4</p></li>
      <li><p>5</p></li>
      <li><p>6</p></li>      
      <li><p>7</p></li>      
    </ul>
  </div>
</div>

更新

根据您的评论，我已经更改了答案以获得1%的边距，以便所有项目之间都有相等的间隔。