html - Auto vertical spacing between random number of elements to fill parent height -


i'm looking way auto-fill space between p elements in div each element equally spaced, first 1 on top margin , last on bottom margin.

here jsfiddle example: https://jsfiddle.net/5b7am7qu/

<div>   <p>1</p>   <p>2</p>   <p>3</p> </div> 

just example div set height, how first paragraph on top margin, bottom paragraph on bottom margin , equidistant vertical spacing between every other p element.

i can't give every paragraph id or class, define first/last-child on parent.

you can using flexbox justify-content: space-between; , flex-direction: column; fiddle

.right {    display: flex;    border: 1px solid black;    margin: 5px;    width: 40%;    height: 200px;    flex-direction: column;    justify-content: space-between;  }    p {    margin: 0;  }
<div class="right">    <p>paragraph 1</p>    <p>paragraph 2</p>    <p>paragraph 3</p>  </div>


Comments