1

I have aligned flex items using justify-content: space-around; In the example given below, I need to align the last item to the 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>
athi
  • 1,683
  • 15
  • 26
  • Are you sure you want it aligned to the left, or do you want it to line up with the left edge of the first item? The former might be possible, the latter is definitely not. – Nick Coad Aug 18 '17 at 03:23
  • I want to line it up with the left edge of the first item – athi Aug 18 '17 at 03:25

1 Answers1

2

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>
Jack jdeoel
  • 4,554
  • 5
  • 26
  • 52
  • The problem is there can be any number of blocks. If there are only 2 blocks, I need them center aligned. – athi Aug 18 '17 at 03:29
  • You want to set left align to first item and center align to 2 item !!! It's can't be done by css ! May be javascript (JQuery) – Jack jdeoel Aug 18 '17 at 03:37