在Flexbox中的项目之间添加等于距离的垂直线

Question

我需要在flexbox中的项目之间添加垂直线。在每个项目中增加了边界权利，但垂直线不在中间。请在下面找到代码。有人可以帮忙吗？

.details-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
  padding-bottom: 30px;
  background-color:pink;
}
.details-wrapper div {
  flex-basis: 25%;
  text-align: center;
  border-right: 1px solid #fff;
}
.details-wrapper span {
  display: block;
  margin-top: 30px;
  margin-bottom: 34px;
  font-size: 24px;
  color: #000;
}
.details-wrapper p {
  font-size: 16px;
  color: #000;
}

<div class="details-wrapper">
  <div>
    <span>Where does it come from</span>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </div>
  <div>
    <span>Where does it come from</span>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </div>
  <div>
    <span>Where does it come from</span>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </div>
</div>

Answer 1

您可以使用速记flex:1;均匀地喷洒孩子。它很容易允许添加/删除孩子。

.details-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
  padding-bottom: 30px;
  background-color: pink;
  margin-bottom:3px;
}
.details-wrapper div {
  flex: 1;
  padding: 0.5em;/* add some padding ?*/
  text-align: center;
  border-right: 1px solid #fff;
}
.details-wrapper div:last-child {
  border: none; /* remove border ? */
}
.details-wrapper span {
  display: block;
  margin-top: 30px;
  margin-bottom: 34px;
  font-size: 24px;
  color: #000;
}
.details-wrapper p {
  font-size: 16px;
  color: #000;
}

<div class="details-wrapper">
  <div>
    <span>Where does it come from</span>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </div>
  <div>
    <span>Where does it come from</span>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </div>
  <div>
    <span>Where does it come from</span>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </div>
</div>
<div class="details-wrapper">
  <div>
    <span>Where does it come from</span>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </div>
  <div>
    <span>Where does it come from</span>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </div>
</div>
<div class="details-wrapper">
  <div>
    <span>Where does it come from</span>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </div>
  <div>
    <span>Where does it come from</span>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </div>
  <div>
    <span>Where does it come from</span>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </div>
  <div>
    <span>Where does it come from</span>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </div>
</div>