代码之家 › 专栏 › 技术社区 › IWI

CSS在多个跨距的div之间获得相等的间距

flexbox css

IWI · 技术社区 · 4 年前

我有几套 div s、每个人目前有两个 span 里面有文字。他们目前生活在一个灵活的盒子里,生活得很幸福。我工作的设计师希望文本的“块”彼此相距24像素。问题是24px应该从较长跨度的末尾开始。这可能吗?

如下图所示,间距从较长文本的右侧开始,到其旁边的文本块的开头结束。由于跨度的长度不同,下一个块开始的地方不会有同质性。我提出了这个问题,但这是指导。。。

代码看起来像这样。

   <div class="wrapper">
          <div>
            <span>
              <Trans>Ref Code</Trans>
            </span>
            <span>{me.advisor.referralCode}</span>
          </div>
          <div>
            <span>
              <Trans>State/Province</Trans>
            </span>
            <span>
              <Trans>{postalCodeToProvince(me.advisor.postalCode)}</Trans>
            </span>
          </div>
          <div>
            <span>
              <Trans>Plan</Trans>
            </span>
            <span>
              <Trans>{products}</Trans>
            </span>
          </div>
          <div>
            <span>
              <Trans>Create on</Trans>
            </span>
            <span>{moment(me.advisor.stripeCreatedAt).format('YYYY-MM-DD')}</span>
          </div>
          <div>
            <span>
              <Trans>Next User Date</Trans>
            </span>
            <span>{me.advisor.nextAssignment.details.on ? me.advisor.nextAssignment.details.on : "Expired"}</span>
          </div>
          <div>
            <span>
              <Trans>Status</Trans>
            </span>
            <span>
              <Trans>{me.advisor.status}</Trans>
            </span>
          </div>
         </div>

Here is a little codepen i made to outline how i am currently doing the css

2 回复 | 直到 4 年前

Johannes 4 年前

将这些设置应用于flex子项(并删除其他设置),然后删除 justify-content: space-evenly; 从 .wrapper :

.wrapper>div {
  display: flex;
  flex-direction: column;
  margin-right: 24px;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  margin-top: 54px;
  margin-left: 64px;
  max-width: 80%;
}

.wrapper>div {
  display: flex;
  flex-direction: column;
  margin-right: 24px;
  margin-top: 12px; /* whatever setting desired */
}

.wrapper>div span:first-child {
  font-family: "Lato", sans-serif;
  font-weight: bold;
  color: #3c4142;
  font-size: 12px;
  display: block;
}

.wrapper>div span:nth-child(2) {
  position: relative;
  top: 6px;
  font-family: "Lato", sans-serif;
  font-size: 16px;
  color: #a5aeb0;
  text-transform: capitalize;
}

<div class="wrapper">
  <div>
    <span>
                  <Trans>Ref Code</Trans>
                </span>
    <span>001209832u1</span>
  </div>
  <div>
    <span>
                  <Trans>State/Province</Trans>
                </span>
    <span>
                  <Trans>ONTARIO</Trans>
                </span>
  </div>
  <div>
    <span>
                  <Trans>Plan</Trans>
                </span>
    <span>
                  <Trans>FunPlan</Trans>
                </span>
  </div>
  <div>
    <span>
                  <Trans>Create on</Trans>
                </span>
    <span>2020-09-14</span>
  </div>
  <div>
    <span>
                  <Trans>Next User Date</Trans>
                </span>
    <span>Expired</span>
  </div>
  <div>
    <span>
                  <Trans>Status</Trans>
                </span>
    <span>
                  <Trans>Dead</Trans>
                </span>
  </div>
</div>

83C10 4 年前

您可以使用flexbox gap 属性设置列之间的间距。添加 gap: 24px; 并删除 justify-content 和 flex 如下图所示。

.wrapper {
  gap: 24px;
  /* justify-content: space-evenly; */

  div {
    /* flex: 0 16%; */
  }
}