宽度100％可选，可使用边距

Posted 2021-04-12

我一直使用边框，并避免使用边距（在其位置使用填充）来实现这一目标，但它似乎总是很烂。当然有更好的方法吗？

更多详细信息：我有一排3个用flex box布置的元素。我将其设置为100％宽度，因为我希望所有元素都填充可用空间。我通过使用margin-left隔开元素来确保元素被隔开。由于使用了边距，右侧超出了100％。

帮助！

答案

因此，如果我理解正确，那么您有一个宽度为100％的伸缩容器，并希望3个元素均匀间隔。您可能可以这样做：

div#flex-container{ //Put your container name here
  display: flex;
  flex-direction: row;
  justify-content: space-evenly; //Or space-around depending on what you want
}

否则，建议您查看元素的边距和宽度，并确保它们不超过100％。只需添加所有宽度和边距，如果它们的总和超过100％，就可以对其进行更改。

另一答案

似乎您需要这样的东西：

.flex-elem { //add your class here
  margin-left: 10px; //put your own number of pixels here and margin direction
  width: calc(100% - 10px); //add the number of pixels equal to margin value
}

无论如何，如果您在此处提供代码，会更好。