javascript - CSS : Justify dynamically created divs with variable width inside parent -
i dynamically generating child divs , appending them parent.each child div has different width.
.parent{ width:250px; border: 1px solid #ddd; display: flex; flex-direction: row; flex-wrap: wrap; } .child{ margin: 2px; float : left; }
<div class="parent"> <div class="child" style="width:50px">1.2345</div> <div class="child" style="width:60px">1:234235</div> <div class="child" style="width:60px">1:234245</div> <div class="child" style="width:70px">1:23426565</div> <div class="child" style="width:30px">1:25</div> <div class="child" style="width:40px">1345</div> <div class="child" style="width:50px">1:23045</div> <div class="child" style="width:50px">1:23265</div> <div class="child" style="width:50px">1:2345</div> <div class="child" style="width:50px">1:2345</div> <div class="child" style="width:30px">1:45</div> <div class="child" style="width:40px">1:234</div> <div class="child" style="width:70px">1:23325545</div> <div class="child" style="width:50px">1:2345</div> <div class="child" style="width:60px">1:232545</div> <div class="child" style="width:60px">1:23425</div> <div class="child" style="width:50px">1:235</div> <div class="child" style="width:40px">1:25</div> </div>
fiddle (with slightly different markup , css): https://jsfiddle.net/tgohguyj/
how can justify child divs here ?
you can use justify-content:space-between
style on parent
read more here > justify-content
edit : can use .parent .child:last-child { margin-right:auto }
if have 2 elements on last row, last element align next previous element
see below
.parent{ width:250px; border: 1px solid #ddd; display: flex; flex-direction: row; flex-wrap: wrap; justify-content:space-between; } .parent .child:last-child { margin-right: auto; } .child{ margin: 2px; border:1px solid red; box-sizing:border-box; }
<div class="parent"> <div class="child" style="width:50px">1.2345</div> <div class="child" style="width:60px">1:234235</div> <div class="child" style="width:60px">1:234245</div> <div class="child" style="width:70px">1:23426565</div> <div class="child" style="width:30px">1:25</div> <div class="child" style="width:40px">1345</div> <div class="child" style="width:50px">1:23045</div> <div class="child" style="width:50px">1:23265</div> <div class="child" style="width:50px">1:2345</div> <div class="child" style="width:50px">1:2345</div> <div class="child" style="width:30px">1:45</div> <div class="child" style="width:40px">1:234</div> <div class="child" style="width:70px">1:23325545</div> <div class="child" style="width:50px">1:2345</div> <div class="child" style="width:60px">1:232545</div> <div class="child" style="width:60px">1:23425</div> <div class="child" style="width:50px">1:235</div> </div>
.parent
behave .child
flex-child ( can add width or not, depending how last row ) .parent{ width:250px; border: 1px solid #ddd; display: flex; flex-direction: row; flex-wrap: wrap; justify-content:space-between; } .parent:after { content: ''; width:50px; } .child{ margin: 2px; border:1px solid red; box-sizing:border-box; }
<div class="parent"> <div class="child" style="width:50px">1.2345</div> <div class="child" style="width:60px">1:234235</div> <div class="child" style="width:60px">1:234245</div> <div class="child" style="width:70px">1:23426565</div> <div class="child" style="width:30px">1:25</div> <div class="child" style="width:40px">1345</div> <div class="child" style="width:50px">1:23045</div> <div class="child" style="width:50px">1:23265</div> <div class="child" style="width:50px">1:2345</div> <div class="child" style="width:50px">1:2345</div> <div class="child" style="width:30px">1:45</div> <div class="child" style="width:40px">1:234</div> <div class="child" style="width:70px">1:23325545</div> <div class="child" style="width:50px">1:2345</div> <div class="child" style="width:60px">1:232545</div> <div class="child" style="width:60px">1:23425</div> <div class="child" style="width:50px">1:235</div> </div>
Comments
Post a Comment