フレックスボックス内のアイテム間に等間隔の垂直線を追加

Question

フレックスボックス内のアイテム間に垂直線を追加する必要があります。各項目に境界線を追加しましたが、垂直線は中央にありません。以下のコードを見つけてください。誰かが助けてくれますか？

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