Search code examples
cssflexbox

Flexbox justify content, but not include first item


Simply put, is there a way to justify the content of a flexbox but exclude the first item from this? The easiest way is to take the item out of the flexbox, but I'm just wondering if it's possible to skip over the first item before the justify-content takes effect.

<div class="flex">
    <div class="exclude">exclude</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
</div>

Theoretically it should look like:

(1)     (2)     (3)     (4)     (5)
exclude item    item    item    item

Where the space between (1) and (2) is native and not being done by the flex (assume it's 1px between the two words) but the rest of the items are spaced due to justify-content: between; for example.


Solution

  • You can try using a wrapper too:

    .flex-container {
      display: flex;
    }
    
    .flex-wrapper {
      display: flex;
      justify-content: space-between;
      flex-grow: 1;
    }
    <div class="flex-container">
      <div class="item">item</div>
      <div class="flex-wrapper">
        <div class="item">item</div>
        <div class="item">Item</div>
        <div class="item">item</div>
      </div>
    </div>