弹性容器，如何对齐居中，但当没有边距空间时左对齐

Question

>我有一些代码是显示flex，它有2列，我希望它在有空间时居中对齐，但是当浏览器缩小并且没有空间时，我希望它左对齐。 右侧的内容可以隐藏，但左侧的内容需要保持可见

.menuHeader {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 56px;
z-index: 1000;
width: 100%;
height: 64px;
}

<nav class="menuHeader">
<div class="menuHeader2">
<div class="menuHeaderList"><i class="icon icon-mapMarker"></i>
<div class="label">xxxxxx</div>
<div class="name">xxxxxx</div>
</div>
<div class="menuHeaderNav">
<li><a>Full List</a></li>
<li class="is-selected"><a href="fmtg.html">AAA</a></li>
<li><a>sss</a></li>
<li><a>ddd</a></li>
<li><a href="#">fff</li>
<li><a href="#">ggg</a></li>
<li><a href="#">hhh</a></li>
</div>
</nav>

Answer 1

你想要这样的东西吗？

当宽度小于500px时，将删除列。

.menuHeader {
display: flex;
align-items: center;
	flex-wrap:wrap;
justify-content: center;
width: 100%;
height: 100%;
}
.menuHeader > div{
	flex:1 0 50%;
}
@media screen and (max-width: 500px) {
	.menuHeader {
		flex-direction:column;
	    align-items: left;
	}
	.menuHeader div:nth-child(even){
		display:none;
	}
}

<div class="menuHeader">
<div>Home1</div>
<div>Home2</div>
<div>Content1</div>
<div>Content2</div>
<div>Head1</div>
<div>Head2</div>
</div>

Answer 2

我想出了一个答案。 所以我只是在 .menuHeaderNav 上做了一个溢出：auto，这有助于 .menuHeader2 保持在视图中，而不是滚动到左侧的视图之外