14

I have to use the justify-content: center to center the block to come in the center of their parent div. And if the content are more than it needs to be fit in the width, I need to use overflow-x: scroll so that all the blocks come in same line. The problem is some of the starting blocks get hidden using justify-content: center;

Note: I need to have all the content in the center if the number of blocks are limited to 3 or 4 or smaller number.

Please go through this link

.nav-tabs {
        overflow-x: scroll;
        border: 0;
        display: flex;
        align-items: stretch;
        flex-wrap: nowrap;
        justify-content: center;
    }

    .nav-tabs .nav-item {
        width: 20%;
        min-width: 198px;
        float: left;
        display: flex;
        align-items: stretch;
        text-align: center;
        margin-bottom: 0;
    }
<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
   <a class="nav-link" href="#tab-1">
    <span class="iconWrapper"><i class="fa fa-facebook"></i></span>
    <span class="iconText">TAB 1</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-2">
    <span class="iconWrapper"><i class="fa fa-twitter"></i></span>
    <span class="iconText">TAB 2</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-3">
    <span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
    <span class="iconText">TAB 3</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-1">
    <span class="iconWrapper"><i class="fa fa-facebook"></i></span>
    <span class="iconText">TAB 1</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-2">
    <span class="iconWrapper"><i class="fa fa-twitter"></i></span>
    <span class="iconText">TAB 2</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-3">
    <span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
    <span class="iconText">TAB 3</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-1">
    <span class="iconWrapper"><i class="fa fa-facebook"></i></span>
    <span class="iconText">TAB 1</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-2">
    <span class="iconWrapper"><i class="fa fa-twitter"></i></span>
    <span class="iconText">TAB 2</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-3">
    <span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
    <span class="iconText">TAB 3</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-1">
    <span class="iconWrapper"><i class="fa fa-facebook"></i></span>
    <span class="iconText">TAB 1</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-2">
    <span class="iconWrapper"><i class="fa fa-twitter"></i></span>
    <span class="iconText">TAB 2</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-3">
    <span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
    <span class="iconText">TAB 3</span>
   </a>
  </li>
  
  <li class="nav-item">
   <a class="nav-link" href="#tab-1">
    <span class="iconWrapper"><i class="fa fa-facebook"></i></span>
    <span class="iconText">TAB 1</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-2">
    <span class="iconWrapper"><i class="fa fa-twitter"></i></span>
    <span class="iconText">TAB 2</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-3">
    <span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
    <span class="iconText">TAB 3</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-1">
    <span class="iconWrapper"><i class="fa fa-facebook"></i></span>
    <span class="iconText">TAB 1</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-2">
    <span class="iconWrapper"><i class="fa fa-twitter"></i></span>
    <span class="iconText">TAB 2</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-3">
    <span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
    <span class="iconText">TAB 3</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-1">
    <span class="iconWrapper"><i class="fa fa-facebook"></i></span>
    <span class="iconText">TAB 1</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-2">
    <span class="iconWrapper"><i class="fa fa-twitter"></i></span>
    <span class="iconText">TAB 2</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-3">
    <span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
    <span class="iconText">TAB 3</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-1">
    <span class="iconWrapper"><i class="fa fa-facebook"></i></span>
    <span class="iconText">TAB 1</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-2">
    <span class="iconWrapper"><i class="fa fa-twitter"></i></span>
    <span class="iconText">TAB 2</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-3">
    <span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
    <span class="iconText">TAB 3</span>
   </a>
  </li>
   </ul>
TylerH
  • 20,799
  • 66
  • 75
  • 101
Common Tt
  • 181
  • 1
  • 6
  • 4
    Possible duplicate of [Can't scroll to top of flex item that is overflowing container](https://stackoverflow.com/questions/33454533/cant-scroll-to-top-of-flex-item-that-is-overflowing-container) – Asons Dec 15 '17 at 08:33
  • 1
    No it is not the same. The solution had removed the justify-content: center; to unknown xjustfiy-content: center; which makes it not centered with flex css. – Common Tt Dec 15 '17 at 08:49
  • 1
    It is, it use auto margin to center, and that is how you need to do here, as their is no other way – Asons Dec 15 '17 at 08:52
  • Another possible duplicate https://stackoverflow.com/questions/47635911/how-to-use-safe-center-with-flexbox/47636238#47636238 ... where the new `safe` keyword will solve this, though it is not well supported yet – Asons Dec 15 '17 at 08:59

2 Answers2

1

I believe that you need wrap the ul under a container. Please see my codepen here. I also pasted code here.

.nav-container {
  width: 100%;
  display: flex;
  align-items: flex-start;
  overflow-x: scroll;
}

.nav-tabs {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  justify-content: center;
}

.nav-tabs .nav-item {
  width: 20%;
  min-width: 198px;
  float: left;
  display: flex;
  align-items: stretch;
  text-align: center;
  margin-bottom: 0;
}
<div class="nav-container">
<ul class="nav-tabs" role="tablist">
  <li class="nav-item">
   <a class="nav-link" href="#tab-1">
    <span class="iconWrapper"><i class="fa fa-facebook"></i></span>
    <span class="iconText">TAB 1</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-2">
    <span class="iconWrapper"><i class="fa fa-twitter"></i></span>
    <span class="iconText">TAB 2</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-3">
    <span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
    <span class="iconText">TAB 3</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-1">
    <span class="iconWrapper"><i class="fa fa-facebook"></i></span>
    <span class="iconText">TAB 1</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-2">
    <span class="iconWrapper"><i class="fa fa-twitter"></i></span>
    <span class="iconText">TAB 2</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-3">
    <span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
    <span class="iconText">TAB 3</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-1">
    <span class="iconWrapper"><i class="fa fa-facebook"></i></span>
    <span class="iconText">TAB 1</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-2">
    <span class="iconWrapper"><i class="fa fa-twitter"></i></span>
    <span class="iconText">TAB 2</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-3">
    <span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
    <span class="iconText">TAB 3</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-1">
    <span class="iconWrapper"><i class="fa fa-facebook"></i></span>
    <span class="iconText">TAB 1</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-2">
    <span class="iconWrapper"><i class="fa fa-twitter"></i></span>
    <span class="iconText">TAB 2</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-3">
    <span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
    <span class="iconText">TAB 3</span>
   </a>
  </li>
  
  <li class="nav-item">
   <a class="nav-link" href="#tab-1">
    <span class="iconWrapper"><i class="fa fa-facebook"></i></span>
    <span class="iconText">TAB 1</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-2">
    <span class="iconWrapper"><i class="fa fa-twitter"></i></span>
    <span class="iconText">TAB 2</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-3">
    <span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
    <span class="iconText">TAB 3</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-1">
    <span class="iconWrapper"><i class="fa fa-facebook"></i></span>
    <span class="iconText">TAB 1</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-2">
    <span class="iconWrapper"><i class="fa fa-twitter"></i></span>
    <span class="iconText">TAB 2</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-3">
    <span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
    <span class="iconText">TAB 3</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-1">
    <span class="iconWrapper"><i class="fa fa-facebook"></i></span>
    <span class="iconText">TAB 1</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-2">
    <span class="iconWrapper"><i class="fa fa-twitter"></i></span>
    <span class="iconText">TAB 2</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-3">
    <span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
    <span class="iconText">TAB 3</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-1">
    <span class="iconWrapper"><i class="fa fa-facebook"></i></span>
    <span class="iconText">TAB 1</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-2">
    <span class="iconWrapper"><i class="fa fa-twitter"></i></span>
    <span class="iconText">TAB 2</span>
   </a>
  </li>

  <li class="nav-item">
   <a class="nav-link" href="#tab-3">
    <span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
    <span class="iconText">TAB 3</span>
   </a>
  </li>
   </ul>
</div>
Umesh
  • 2,704
  • 19
  • 21
  • If you add justify-content: center; to the nav-container then you will see the issue I believe the original post mentions. It is the same issue I'm having. Many of the nav-items at the beginning of the ul are hidden and unable to scroll into visibility. – Sophisticake May 19 '20 at 04:39
0

To achieve correct scrolling of children when there are no space and at the same time center them when there are free space, you could leave block type for container and inline-flex type for children.

.nav {
  background: lightblue;
  overflow-x: scroll;
  white-space: nowrap;
  text-align: center;
}

.nav-item {
  background: pink;
  width: 20%;
  min-width: 198px;
  display: inline-flex;
}
<h2>Case 1: not enough space</h2>
<ul class="nav">
    <li class="nav-item">
        TAB 1
    </li>
    <li class="nav-item">
        TAB 2
    </li>
    <li class="nav-item">
        TAB 3
    </li>
    <li class="nav-item">
        TAB 4
    </li>
    <li class="nav-item">
        TAB 5
    </li>
</ul>

<h2>Case 2: extra space</h2>

<ul class="nav">
    <li class="nav-item">
        TAB 1
    </li>
    <li class="nav-item">
        TAB 2
    </li>
</ul>
Sergey Muravjev
  • 1