使用Overflow-X:滚动带有Justify-content:中心隐藏了较早的块

我必须使用Justify-content：中心将块中心以使其位于父母Div的中心。而且，如果内容超出其宽度所需的范围，我需要使用Overflow-X：滚动，以使所有块都在同一行中。问题是一些起始块使用Justify-content：Center;

注意：如果块的数量限制在3或4或更小的数字。

请浏览此链接

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

我相信您需要在容器下包装ul。请在这里查看我的Codepen。我在这里也粘贴了代码。

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

在没有空间时正确滚动儿童，同时将它们居中时，当他们有自由空间时，您可以离开容器 block toge for容器和 inline-flex 为儿童类型。

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

相关内容

最新更新

热门标签：