0

as the title, I use flex css layout, I had seen the link( Flex-box: Align last row to grid). but the last row can not aligned.

thanks

html,body {
  display: flex; 
  flex-wrap: wrap; 
  justify-content: space-around;
}

div {
  width: 300px;
  height: 300px;
  background-color: blue;
  border: 1px solid red;
}

body:after {
  content: "";
  flex: auto;
}
<body style='display: flex; flex-wrap: wrap; justify-content: space-around;'>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>

  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  
  <div></div>
  <div></div>
</body>
Jinu Kurian
  • 9,128
  • 3
  • 27
  • 35
dyh333
  • 385
  • 1
  • 5
  • 15
  • this is my codepen: https://codepen.io/dyh333/pen/YrbBjB – dyh333 Oct 24 '17 at 06:15
  • 1
    You should post code within the question, not as a comment, nor as a 3rd party link, and you can use Stack snippets the same way as codepen, fiddle, etc. – Asons Oct 24 '17 at 06:17
  • 1
    Btw, check all the answers in that post and you will find a solution, and a hint; "it is not the first answer..." – Asons Oct 24 '17 at 06:24
  • You might want to consider using CSS Grid layout for your purpose, since it has the layout behavior of what you're looking for. – Terry Oct 24 '17 at 06:53
  • @lgson, but the duplicate link used the 'width: 25%', that is not my want. if you remove it, it will work wrong. right? – dyh333 Oct 24 '17 at 07:55
  • The 2nd answer in the dupe link is the one that gives the best solution in your case, and with your code it will be like this: https://codepen.io/anon/pen/GMaLzB – Asons Oct 24 '17 at 07:58
  • And if you won't have more than 3 items per row, you can use the pseudo like this: https://codepen.io/anon/pen/jGooPO – Asons Oct 24 '17 at 08:05
  • thanks, the https://codepen.io/anon/pen/GMaLzB is work, and the https://codepen.io/anon/pen/jGooPO is not work if my screen width change to 1920px – dyh333 Oct 24 '17 at 11:20

0 Answers0