CODEWITHSUNDEEP
cssflexbox
athi
athi

Reputation: 1683

Add vertical lines in equal distance between items in flexbox

I need to add vertical lines between items in a flexbox. Added border-right to each item but the vertical lines are not in the center. Please find the code below. Can someone please help?

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

Upvotes: 2

Views: 10589

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 105913

You can use the shorthand flex:1; it will spray children evenly . It easily allow to add/remove 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>

Upvotes: 6

Related Questions