在弹性项目上使用边距

问题描述 投票：0回答：5

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

我似乎无法让这个工作如我所愿。

在这里摆弄：https://jsfiddle.net/dba5ehcw/1/

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

因此，目前每个弹性项目都是容器宽度的一半，并且它们可以很好地彼此相邻。

我希望能够为弹性项目添加 1em 的边距，以便给它们一些呼吸空间，但这样做时，它们会变得大于 50%，并且不再彼此相邻堆叠同一条线，因为它们太宽了。

有没有办法在弹性项目上使用边距，并让弹性盒容器考虑到这一点并相应地调整（减少）它们的宽度？

css flexbox
5个回答
66
投票

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

  • 使用

    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 容器中，并使用正的弹性收缩因子

    .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>

43
投票

您需要使用填充来完成此操作 - 在 

border-box
模式下，填充不会使容器大于指定的宽度 - 不是边距，以及嵌套的 
flex
div。这就是所有基于 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>

19
投票

不要使用边距，而是尝试在弹性容器上添加间隙：

.flex-container {
  display: flex;
  gap: 1em;
}
flex-item {
  width: 50%;
}
2
投票

试试这个：-

.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>

1
投票

根据我的理解，我相信我正在尝试实现同样的目标，此外，当视口变得足够小时（在手机/平板电脑上查看时），我希望两个盒子堆叠在一起。

出于某种原因，我认为这会更容易，因为我在观看的 Bootstrap 教程视频中看到了类似的内容，但我认为他使用的是 

row
和 
col
类，以及 
g
gutter 类，而不是 Flex。

无论如何，HTML：

<div class="d-flex flex-wrap flex-half-screen-responsive">
    <div class="col-lg-6">
        Lorem Ipsum
    </div>
    <div class="col-lg-6">
        Lorem Ipsum
    </div>
</div>

CSS：

.flex-half-screen-responsive {
    margin: -0.5em;
}

.flex-half-screen-responsive > * {
    flex: 1 1 48%;
    margin: 0.5em;
}

我不喜欢如何指定硬编码的 48% 值，但它似乎按照我想要的方式工作，所以无论如何；已经在这上面花了太多时间了，哈哈。无论如何，我希望这可以帮助那些寻找相同行为的人。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.