Center the middle flexbox element and justify the rest

Question

For an odd number of elements of flexibility, I want the middle one to be in an ideal center, and other objects just flow around it. The middle element has a fixed width, all the rest are fluid and should stick to the middle object, so that the gaskets are fixed.

/* CSS */

.flex-holder {
	display: flex;
	justify-content: center;
}
.middle-item {
	width: 75px;
}

<!-- HTML -->

<ul class="flex-holder">
  <li>Item 1</li>
  <li>Some item</li>
  <li class="middle-item">Middle</li>
  <li>Very long text item</li>
  <li>Test</li>
</ul>

Run code

Is this possible with flexbox? If not, suggest a different solution.

Answer 1

One solution would be to use position: absolutefor the middle element and center it with transform: translate(), but there will be an overflow of elements on a small window size, which you can fix using media queries.

.flex-holder {
  display: flex;
  justify-content: space-around;
  position: relative;
  list-style: none;
  padding: 0;
}

.middle-item {
  width: 75px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<ul class="flex-holder">
  <li>Item 1</li>
  <li>Some item</li>
  <li class="middle-item">Middle</li>
  <li>Very long text item</li>
  <li>Test</li>
</ul>

Run code

, , , - li li ul flex: 1 , div .

ul, .wrap {
  display: flex;
  justify-content: space-around;
  position: relative;
  list-style: none;
  flex: 1;
  padding: 0;
}
.middle-item {
  width: 75px;
  background: lightblue;
  text-align: center;
}

<ul class="flex-holder">
  <li class="wrap">
    <ul>
      <li>Item 1</li>
      <li>Some item</li>
    </ul>
  </li>
  <li class="middle-item">Middle</li>
  <li class="wrap">
    <ul>
      <li>Very long text item</li>
      <li>Test</li>
    </ul>
  </li>
</ul>

Answer 2

, middle-item ( ):

.flex-holder {
  display: flex;
  justify-content: center;
  list-style: none;
  padding:0;
}
.flex-holder li {
  flex: 1;
  border: 1px solid red;
}
li.middle-item {
  flex: 0 0 100px;
  background-color: #ccc;
}

<ul class="flex-holder">
  <li>Item 1</li>
  <li>Some text</li>
  <li class="middle-item">Middle</li>
  <li>Very long text item bla bla bla bla bla bla.</li>
  <li>Test</li>
</ul>

---

. :

body {
    background: url(http://placehold.it/1x200) no-repeat center;
  }
  
  .flex-holder {
    display: flex;
    list-style: none;
    padding: 0;
  }
  
  .flex-holder li {
    display: flex;
    flex: 1;
    border: 1px solid red;
    justify-content: flex-end;
    padding: 0 1em;
  }
  
  .flex-holder li div {
    border: 1px solid green;
    padding: 0 1em;
  }
  
  li.middle-item {
    flex: 0 0 auto;
    background-color: #ccc;
    text-align: center;
    justify-content: center;
  }
  
  li.middle-item ~ li {
    justify-content: flex-start;
  }

<ul class="flex-holder">
  <li>
    <div>Item 1 </div>
    <div> Some item</div>
  </li>
  <li class="middle-item">Middle</li>
  <li>
    <div>
      Very long text item </div>
  </li>
</ul>