flex容器，如何对齐中心，但在没有边距空间时左对齐答案

【问题标题】：flex container, how to justify center, but left align when no space for marginflex容器，如何对齐中心，但在没有边距空间时左对齐
【发布时间】：2018-08-03 17:44:55
【问题描述】：

我有一些显示 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>

【问题讨论】：

你试过引导网格系统吗？ getbootstrap.com
需要更好地解释所需结果。左边什么内容右边什么......正确地提出你的问题。提供更好的代码sn-ps

标签： html css flexbox

【解决方案1】：

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

【讨论】：

【解决方案2】：

你想要这样的东西吗？

当宽度小于 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>

【讨论】：