Question 404035 in CSS Question posted in
Some basic documentation can be found here.

Css – 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.

Tags:

3

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    Use the property justify-self on .exclude

    Login or Signup to reply.
  3. 0

    If you would like to keep the actual html content as it is, I would do as follows:

    .flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.exclude {
  margin-right: 1px;
  /* Space between the excluded item and the rest */
}

.item {
  flex-grow: 1;
  /* Allows the items to take up space equally */
}
    <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>

    It is similar to the solution above, but in this case I kept the content as it is.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search