9

I am building a homepage for an app and I have four ‘value proposition’ blocks in a row near the top of the website.

I'm using flexbox so that the blocks will respond as the website is resized, and this works well, however I'd like to avoid the case where I have 3 blocks in one row and 1 block as an orphan in the second row, before it wraps to 2x2 then finally a single column.

This is my CSS:

.value-prop {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;

  .prop {
    padding: 10px 20px;
    flex-basis: 25%;
    text-align: center;

    img {
      height: auto;
      margin: 0 0 10px;
      width: 200px;
    }
  }
}

I've tried putting them in two blocks of two, but that starts to get a little funky with the spacing. I know it is possible to do it this way, but I'm hoping there's an easier way I'm not aware of.

Benjamin Humphrey
  • 3,770
  • 2
  • 23
  • 41
  • 2
    This question it's not a duplicate. None of the answers provided to the linked question solve the OP problem. All answers there are about to make a "hard" line break, while the OP here is asking about how to control the "soft" line break (wrap). – Paulo Alexandre Jan 17 '19 at 21:39

0 Answers0