javascript - Expand Image to container width when moving to next line -
is there way make width of image, when transitions line take room possible?
for example, if images displayed next each other, 1 of them drops next line, image on next line expands container's width.
i believe saw being achieved flexbox can't remember how , if there's alternate ways it, i'm ears.
fiddle:https://jsfiddle.net/jzhang172/6kpyhpbh/
body,html{ padding:0; margin:0; } *{ box-sizing:border-box; } .grid img{ float:left; height:100px; } .grid{ display:flex; flex-grow:2; flex-wrap:wrap; }
<div class="grid"> <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt=""> <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt=""> <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt=""> <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt=""> <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt=""> </div>
add flex:1
image.
body, html { padding: 0; margin: 0; } * { box-sizing: border-box; } .grid { display: flex; /* flex-grow: 2; <-- can removed; not doing anything; applies flex items */ flex-wrap: wrap; } .grid img { /* float: left; <-- can removed; floats ignored in flex container */ height: 100px; flex: 1; /* new; tells flex items distribute available space evenly; single flex item on line consume 100% of space; 2 flex items take 50% each; etc. */ }
<div class="grid"> <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt=""> <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt=""> <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt=""> <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt=""> <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt=""> </div>
Comments
Post a Comment