html - How to increase the frame's width when the number of balls increases -
.containerslave { display: inline-flex; flex-direction: column; flex-wrap: wrap; margin: 2px 2px 2px 2px; padding: 2px 2px 2px 2px; height: 220px; /*item height x 10*/ border: 2px solid red; } .containerslave .ball { width: 20px; height: 20px; border-radius: 50%; line-height: 20px; text-align: center; text-shadow: 0 1px 1px #000; font-size: 15px; color: #ffffff; margin: 2px 2px 2px 2px; background: radial-gradient(circle @ 20px 15px, #7fbbfc, #000); }
when ball under status of limited height , automatically shift longitudinal direction, how make balls covered within frame. frame increase width number of ball increase.
ok i'm using mozilla , seems work. original code set width fixed in containerslave
75px
.
this work , doesn't bad honest going need use outside code js (javascript). if you're open that, can show cool trick fix it.
.containerslave { display: inline-flex; flex-direction: column; flex-wrap: wrap; margin: 2px 2px 2px 2px; padding: 2px 2px 2px 2px; height: 220px; **width:75px;** /*item height x 10*/ border: 2px solid red; } .containerslave .ball { width: 20px; height: 20px; border-radius: 50%; line-height: 20px; text-align: center; text-shadow: 0 1px 1px #000; font-size: 15px; color: #ffffff; margin: 2px 2px 2px 2px; background: radial-gradient(circle @ 20px 15px, #7fbbfc, #000); }
Comments
Post a Comment