Question

在横向模式下，我需要在两列之间分隔/创建一个间隙（大约10-20px），而无需使用边框或类似的东西。我尝试了一切，但仍然无法正常工作，我想念什么？我尝试放入margin，但没有帮助，解决此问题的最佳方法是什么？

@media screen and (min-width: 567px) {
  .container {
    display: flex;
    flex-flow: row wrap;
  }
  .container li {
    flex-basis: 50%;
    max-width: 50%;
  }
}

.item {
  display: flex;
  align-items: center;
  padding-top: 5px;
}

.title {
  font-weight: 500;
  font-size: 22px;
  padding-bottom: 18px;
}

.item-image {
  flex-basis: 85px;
  min-width: 85px;
  padding-bottom: 30px;
}

.item .item-image img {
  display: inline-block;
  vertical-align: middle;
  border-radius: 20px;
  width: 100%;
}

.item .item-info {
  border-bottom: 1px solid rgb(207, 206, 206);
  padding-bottom: 20px;
  flex-basis: 100%;
  margin-left: 15px;
}

<ul class="container">
  <li>
    <div class="item">
      <div class="item-image">
        <a href="">
          <img src="root-icon.png" alt="">
        </a>
      </div>
      <div class="item-info">
        <div class="item-title">Something</div>
        <div class="item-subtitle">Something</div>
        <div class="item-button-container">
          <a class="button" href="#">GET</a>
        </div>
      </div>
    </div>
  </li>
  <li>
    <div class="item">
      <div class="item-image">
        <a href="">
          <img src="root-icon.png" alt="">
        </a>
      </div>
      <div class="item-info">
        <div class="item-title">Something</div>
        <div class="item-subtitle">Something</div>
        <div class="item-button-container">
          <a class="button" href="#">GET</a>
        </div>
      </div>
    </div>
  </li>
</ul>

Answer 1

只需将 gap: 5px 之类的内容添加到具有 flex 布局的容器中

感谢@AbsoluteBeginner，并非所有地方都支持此功能。请参阅此处：https://caniuse.com/flexbox-gap

Answer 2

您可以添加以下CSS规则：

<parentcomp>
<aura:attribute name="showComp" type="Boolean" default="true"/>
<aura:attribute name="mathsQuestions" type="Integer" default="0"/>
<aura:attribute name="scienceQuestions" type="Integer" default="0"/>
<aura:attribute name="englishQuestions" type="Integer" default="0"/>
<aura:handler event="aura:doneRendering" action="{!c.doneRendering}"/>
<aura:attribute name="isDoneRendering" type="Boolean" default="false"/>
<aura:if isTrue="{!v.showComp}">
  <c:childcmp questions="{!v.mathsQuestions}"/>
  <c:childcmp questions="{!v.scienceQuestions}"/>
  <c:childcmp questions="{!v.englishQuestions}"/>
   <aura:set attribute="else">
    Some HTML elements
   </aura:set>
</aura:if>
</parentcomp>

################controller code#################
({
  doneRendering: function(cmp, event, helper) {
    if(!cmp.get("v.isDoneRendering")){
      cmp.set("v.isDoneRendering", true);
      if(cmp.get('v.mathsQuestions')==0 && cmp.get('v.scienceQuestions')==0 && cmp.get('v.englishQuestions')==0)
       cmp.set('v.showComp',false);
   else
       cmp.set('v.showComp',true);
    }
  }
})

它为每个奇数的.item-info（或更确切地说：为ul.container > *:nth-child(odd) .item-info { margin-right: 50px; }元素的每个奇数直接子元素中的每个.item-info）添加了一个空白距

.container

@media screen and (min-width: 567px) {
  .container {
    display: flex;
    flex-flow: row wrap;
  }
  .container li {
    flex-basis: 50%;
    max-width: 50%;
  }
}

.item {
  display: flex;
  align-items: center;
  padding-top: 5px;
}

.title {
  font-weight: 500;
  font-size: 22px;
  padding-bottom: 18px;
}

.item-image {
  flex-basis: 85px;
  min-width: 85px;
  padding-bottom: 30px;
}

.item .item-image img {
  display: inline-block;
  vertical-align: middle;
  border-radius: 20px;
  width: 100%;
}

.item .item-info {
  border-bottom: 1px solid rgb(207, 206, 206);
  padding-bottom: 20px;
  flex-basis: 100%;
  margin-left: 15px;
}
ul.container > *:nth-child(odd) .item-info {
  margin-right: 50px;
}

Answer 3

如果要坚持使用flexbox，请向元素添加margin-right。否则，请尝试使用CSS网格，使用grid-gap非常容易，以添加所需的间隙。

https://www.w3schools.com/css/css_grid.asp

CSS Flex-使div之间产生间隙

3 个答案: