i have 4 panels in page. @ time (depending on conditions ) either 1,2,3 or 4 panels displayed. want panels re-align there no empty space panels not present.
how can ?
edit : if panels visible : http://ibin.co/1zrkoffexnrz
if suppose pannel 3 hidden : http://ibin.co/1zrkco4vtjhw
.container { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-flow: row; justify-content: space-around; padding: 0; margin: 0; list-style: none; } .rowitem { background: #ff0000; padding: 2px; width: 50%; height: 50px; margin-top: 6px; line-height: 50px; text-align: center; font-weight: bold; border: 1px solid #fff; }<ul class="container"> <li class="rowitem">01</li> <li class="rowitem">02</li> <li class="rowitem">03</li> <li class="rowitem">04</li> </ul>