当前位置：theitroad>CSS 在弹性项目上使用边距

CSS 在弹性项目上使用边距

声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow 原文地址: http://stackoverflow.com/questions/32765039/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-30 11:29:03 　来源:igfitidea点击:

Using margin on flex items

cssflexbox

提问by Luke Twomey

I was under the impression that a margin can be added to flex items/children, and flexbox should automatically take that into account and calculate the correct spacing between the items.

我的印象是可以为 flex 项目/子项添加边距，并且 flexbox 应该自动考虑到这一点并计算项目之间的正确间距。

I can't seem to get this working as I would like though.

不过，我似乎无法按照自己的意愿进行工作。

Fiddle here: https://jsfiddle.net/dba5ehcw/1/

在这里小提琴：https: //jsfiddle.net/dba5ehcw/1/

.flex-item{
    border: 1px solid blue;
    box-sizing: border-box;
    height: 160px;
    width: 50%;
}

So each flex item at the moment is half the width of the container, and they flow nicely next to each other.

所以现在每个 flex 项目都是容器宽度的一半，并且它们彼此相邻地流动。

I would like to be able to add a margin of say, 1em to the flex-items in order to give them some breathing room, but in doing so, they become larger than the 50% and no longer stack next to each other on the same line because they are too wide.

我希望能够在 flex-items 上添加 1em 的边距，以便给它们一些喘息的空间，但这样做时，它们变得大于 50% 并且不再彼此堆叠在同一条线，因为它们太宽了。

Is there a way to use margin on the flex-items and have the flexbox container take this into account and adjust (decrease) their widths accordingly?

有没有办法在 flex-items 上使用边距并让 flexbox 容器考虑到这一点并相应地调整（减少）它们的宽度？

回答by Adam

You need to do it with padding - which, when in border-boxmode does not make the container larger than it's specified width - not margin, and a nested flexdiv. This is how all flexbox-based grid systems work. Code below:

您需要使用填充来完成它 - 在border-box模式下不会使容器大于指定的宽度 - 不是边距和嵌套的flexdiv。这就是所有基于 flexbox 的网格系统的工作方式。代码如下：

.flex-container{
    border: 1px solid red;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    width: 320px;
}

.flex-item{
    padding:1em;
    box-sizing: border-box;
    height: 160px;
    width: 50%;
    display:flex;
}

.flex-item>div {
    border: 1px solid blue;
    flex: 1 1 auto;
}
<div class="flex-container">
    <div class="flex-item"><div></div></div>
    <div class="flex-item"><div></div></div>
    <div class="flex-item"><div></div></div>
    <div class="flex-item"><div></div></div>
    <div class="flex-item"><div></div></div>
    <div class="flex-item"><div></div></div>
</div>

回答by Oriol

There are multiple ways to do this:

有多种方法可以做到这一点：

  • Use calc:

    .flex-item {
  width: calc(50% - 2em);
  margin: 1em;
}


    .flex-container {
  border: 1px solid red;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  width: 320px;
}
.flex-item {
  border: 1px solid blue;
  box-sizing: border-box;
  height: calc(160px - 2em);
  width: calc(50% - 2em);
  margin: 1em;
}
    <div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

  • Use nested boxes:

    .flex-item {
  width: 50%;
  display: flex;
}
.flex-item > div {
  border: 1px solid blue;
  flex: 1;
  margin: 1em;
}


    .flex-container {
  border: 1px solid red;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  width: 320px;
}
.flex-item {
  height: 160px;
  width: 50%;
  display: flex;
}
.flex-item > div {
  border: 1px solid blue;
  flex: 1;
  margin: 1em;
}
    <div class="flex-container">
  <div class="flex-item"><div></div></div>
  <div class="flex-item"><div></div></div>
  <div class="flex-item"><div></div></div>
  <div class="flex-item"><div></div></div>
  <div class="flex-item"><div></div></div>
  <div class="flex-item"><div></div></div>
</div>

  • Place each row in a nowrap container, and use a positive flex-shrink factor

    .row {
  display: flex;
}
.flex-item {
  width: 50%;
  margin: 1em;
}


    .flex-container {
  border: 1px solid red;
  width: 320px;
}
.row {
  height: 160px;
  display: flex;
}
.flex-item {
  border: 1px solid blue;
  width: 50%;
  margin: 1em;
}
    <div class="flex-container">
  <div class="row">
    <div class="flex-item"></div>
    <div class="flex-item"></div>
  </div>
  <div class="row">
    <div class="flex-item"></div>
    <div class="flex-item"></div>
  </div>
  <div class="row">
    <div class="flex-item"></div>
    <div class="flex-item"></div>
  </div>
</div>

  • Don't use width. Instead, force line-breaks at the right places, and use flex: 1to make the elements grow to fill remaining space.

    .flex-item {
  flex: 1;
}
.line-break {
  width: 100%
}


    .flex-container {
  border: 1px solid red;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  width: 320px;
}
.flex-item {
  border: 1px solid blue;
  box-sizing: border-box;
  height: calc(160px - 2em);
  flex: 1;
  margin: 1em;
}
.line-break {
  width: 100%;
}
    <div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="line-break"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="line-break"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

  • 使用calc：

    .flex-item {
  width: calc(50% - 2em);
  margin: 1em;
}


    .flex-container {
  border: 1px solid red;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  width: 320px;
}
.flex-item {
  border: 1px solid blue;
  box-sizing: border-box;
  height: calc(160px - 2em);
  width: calc(50% - 2em);
  margin: 1em;
}
    <div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

  • 使用嵌套框：

    .flex-item {
  width: 50%;
  display: flex;
}
.flex-item > div {
  border: 1px solid blue;
  flex: 1;
  margin: 1em;
}


    .flex-container {
  border: 1px solid red;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  width: 320px;
}
.flex-item {
  height: 160px;
  width: 50%;
  display: flex;
}
.flex-item > div {
  border: 1px solid blue;
  flex: 1;
  margin: 1em;
}
    <div class="flex-container">
  <div class="flex-item"><div></div></div>
  <div class="flex-item"><div></div></div>
  <div class="flex-item"><div></div></div>
  <div class="flex-item"><div></div></div>
  <div class="flex-item"><div></div></div>
  <div class="flex-item"><div></div></div>
</div>

  • 将每一行放在 nowrap 容器中，并使用正的 flex-shrink 系数

    .row {
  display: flex;
}
.flex-item {
  width: 50%;
  margin: 1em;
}


    .flex-container {
  border: 1px solid red;
  width: 320px;
}
.row {
  height: 160px;
  display: flex;
}
.flex-item {
  border: 1px solid blue;
  width: 50%;
  margin: 1em;
}
    <div class="flex-container">
  <div class="row">
    <div class="flex-item"></div>
    <div class="flex-item"></div>
  </div>
  <div class="row">
    <div class="flex-item"></div>
    <div class="flex-item"></div>
  </div>
  <div class="row">
    <div class="flex-item"></div>
    <div class="flex-item"></div>
  </div>
</div>

  • 不要使用width. 相反，在正确的位置强制换行，并用于flex: 1使元素增长以填充剩余空间。

    .flex-item {
  flex: 1;
}
.line-break {
  width: 100%
}


    .flex-container {
  border: 1px solid red;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  width: 320px;
}
.flex-item {
  border: 1px solid blue;
  box-sizing: border-box;
  height: calc(160px - 2em);
  flex: 1;
  margin: 1em;
}
.line-break {
  width: 100%;
}
    <div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="line-break"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="line-break"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

回答by aphextwix

Try this : -

尝试这个 ： -

.flex-container {
  border: 1px solid red;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  width: 320px;
}

.flex-item {
  justify-content: space-around;
  margin: 1%;
  background: red;
  border: 1px solid blue;
  box-sizing: border-box;
  height: 160px;
  width: 48%;
}
<div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

相关推荐

Bootstrap 响应边距和填充 Less/CSS

Bootstrap 响应边距和填充 Less/CSS

是否有 css 选择器来匹配 select 标签的选项值？

是否有 css 选择器来匹配 select 标签的选项值？

CSS 如何使用 Flexbox 中的媒体查询控制每行的项目数？

CSS 如何使用 Flexbox 中的媒体查询控制每行的项目数？

CSS 里面有文字的css形状

CSS 里面有文字的css形状

相关推荐
最近更新
标签