html - Align flex items to the left -
this question has answer here:
i have aligned flex items using justify-content: space-around;
in example given below, need align last item left. please help.
.wrapper { display: flex; justify-content: space-around; flex-wrap: wrap; } .block { width: 30%; border: 1px solid red; margin-bottom: 20px; }
<div class="wrapper"> <div class="block">orem ipsum dolor sit amet, consectetur adipiscing elit. morbi elementum dui quam, </div> <div class="block">orem ipsum dolor sit amet, consectetur adipiscing elit. morbi elementum dui quam, vitae venenatis est ultricies blandit. aenean augue enim, </div> <div class="block">orem ipsum dolor sit amet, consectetur adipiscing elit. morbi elementum dui quam, </div> <div class="block">orem ipsum dolor sit amet, consectetur adipiscing elit. morbi elementum dui quam, vitae venenatis ela enim, dignissim non </div> </div>
use margin instead of justify-content: space-around;
.wrapper { width:100%; display: flex; flex-wrap: wrap; } .block { width: 30%; margin:0 1.45%; border: 1px solid red; margin-bottom: 20px; float:left; }
<div class="wrapper"> <div class="block">orem ipsum dolor sit amet, consectetur adipiscing elit. morbi elementum dui quam, </div> <div class="block">orem ipsum dolor sit amet, consectetur adipiscing elit. morbi elementum dui quam, vitae venenatis est ultricies blandit. aenean augue enim, </div> <div class="block">orem ipsum dolor sit amet, consectetur adipiscing elit. morbi elementum dui quam, </div> <div class="block">orem ipsum dolor sit amet, consectetur adipiscing elit. morbi elementum dui quam, vitae venenatis ela enim, dignissim non </div> </div>
Comments
Post a Comment