在flexbox中的项目之间添加相等距离的垂直线

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>