使用flexbox之间的空间

Question

我有4个街区，我需要使用flexbox添加空间，如下面的屏幕截图所示：。

function generateInvoice(Array $schedules, $invoiceNo)

.container {
  display: flex;
  flex-wrap: wrap;
}

.block {
  width: 50%;
}

Answer 1

您可以使用flex-box属性justify-content。 看到这个---：

＆＃13;

＆＃13;

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
}

.block {
	
  width: 40%;
}

＆＃13;

<div class="container">
  <div class="block">
    <h5>New</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien, a scelerisque neque.</p>
  </div>
  <div class="block">
    <h5>Heading</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p>
  </div>
  <div class="block">
    <h5>Cras conva</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p>
  </div>
  <div class="block">
    <h5>Cras nita</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapient.</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

将justify-content:space-between;添加到.container 我想这会解决这个问题！感谢。

Answer 3

将width:50%的{​​{1}}更改为block其工作

＆＃13;

＆＃13;

width:49%

＆＃13;

.container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.block {
  width: 49%;

}

＆＃13;

＆＃13;

＆＃13;

Answer 4

tickPositions

.container {
  display: flex;
  flex-wrap: wrap;
}

.block {
  /* changed the width to 45% and added auto margin */
  width: 45%;
  margin:auto;
  
}
.right{
margin-right:0px;
}
.left{
margin-left:0px;
}

试试这个

Answer 5

请尝试此代码。在这里，您需要缩小block的宽度并将padding-right添加到block类。

.block {
    width: 48%;
    padding-right: 2%;
}

希望这有帮助。

Answer 6

我添加了一个隐身的div space类，恢复了50％div到45％，space 5％

.container {
  display: flex;
  flex-wrap: wrap;
}

.block {
  width: 45%;
}
.space {
width: 5%;

<div class="container">
  <div class="block">
    <h5>New</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien, a scelerisque neque.</p>
  </div>
  <div class="space"></div>
  <div class="block">
    <h5>Heading</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p>
  </div>
  <div class="block">
    <h5>Cras conva</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p>
  </div>
  <div class="space"></div>
  <div class="block">
    <h5>Cras nita</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapient.</p>
  </div>
</div>

Answer 7

如果要在块之间添加空格，可以使用justify-content: space-around或justify-content: space-between。

或者您可以像这样减少块的大小

.block {
  width: 40%;
  margin: 0 2.5%
}

＆＃13;

＆＃13;

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;

}

.block {
  width: 50%;
}

＆＃13;

<div class="container">
  <div class="block">
    <h5>New</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien, a scelerisque neque.</p>
  </div>
  <div class="block">
    <h5>Heading</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p>
  </div>
  <div class="block">
    <h5>Cras conva</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p>
  </div>
  <div class="block">
    <h5>Cras nita</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapient.</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 8

这有点棘手，但并非不可能。使用填充而不是边距。 无论您有多少物品，这都会有效。唯一的限制是只有2列。

.container {
  display: flex;
  flex-wrap: wrap;
}

.block {
  width: 50%;
  box-sizing: border-box; /*Set the box sizing to include paddings and borders into the width calculation*/
}

.block:nth-child(odd) {
  padding-right: 10px; /*Add right padding for odd items (left side)*/
}

.block:nth-child(even) {
  padding-left: 10px; /*Add left padding to even items (right side)*/
}

<div class="container">
  <div class="block">
    <h5>New</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien, a scelerisque neque.</p>
  </div>
  <div class="block">
    <h5>Heading</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p>
  </div>
  <div class="block">
    <h5>Cras conva</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p>
  </div>
  <div class="block">
    <h5>Cras nita</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapient.</p>
  </div>
</div>