3

Please run the snippet below.

Is there a way to have the flex items not be forced to be in line with the items adjacent to them?

I'd like to eliminate the space that is created by aligning the items. So essentially this (I'd like to achieve this with the current structure. I would rather not go to a 2 column layout):

enter image description here

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
.item-list {
  max-width: 400px;
  border: 1px solid red;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.item-list__item {
  border: 1px solid green;
  width: 50%;
}
<div class="item-list">
  <div class="item-list__item">
    Is we miles ready he might going. Own books built put civil fully blind fanny. Projection appearance at of admiration no. As he totally cousins warrant besides ashamed do. Therefore by applauded acuteness supported affection it. Except had sex limits
    county enough the figure former add. Do sang my he next mr soon. It merely waited do unable.
  </div>
  <div class="item-list__item">
    Is we miles ready he might going. Own books built put civil fully blind fanny. Projection appearance at of admiration no. As he totally cousins warrant besides ashamed do.
  </div>
  <div class="item-list__item">
    Is we miles ready he might going. Own books built put civil fully blind fanny. Projection appearance at of admiration no. As he totally cousins warrant besides ashamed do. Therefore by applauded acuteness supported affection it. Except had sex limits
    county enough the figure former add. Do sang my he next mr soon. It merely waited do unable.
  </div>
  <div class="item-list__item">
    Is we miles ready he might going. Own books built put civil fully blind fanny. Projection appearance at of admiration no. As he totally cousins warrant besides ashamed do.
  </div>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
MarioD
  • 1,703
  • 1
  • 14
  • 24
  • This would seem easier without flexbox. Would that be a viable option? – Jonathan Lam Aug 08 '16 at 18:37
  • Sure, as long as the items can remain in a single list and not be split up into two separate lists. – MarioD Aug 08 '16 at 18:42
  • No, this is not possible without switching to flex columns but then the order would be incorrect. I think you are after a masonry layout and that requires JS more often than not. – Paulie_D Aug 08 '16 at 18:49

0 Answers0