css - 在 flexbox 中的元素之间添加等距离的垂直线

Question

我需要在 flexbox 中的元素之间添加垂直线。为每个元素添加了 border-right 但垂直线不在中心。请在下面找到代码。有人可以帮忙吗？

.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; 它会均匀地喷洒 child 。它很容易允许添加/删除 child 。

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