Flex：如果只有一个 div 可见，则使项目居中对齐答案

【问题标题】：Flex: Make the item center aligned if only one div is visibleFlex：如果只有一个 div 可见，则使项目居中对齐
【发布时间】：2018-12-30 16:49:00
【问题描述】：

我有一个容器，里面有两个元素。我希望两个元素都位于角落的末端。所以我用display: flex 和justify-content: space-between。但是如果其中一个元素被隐藏，另一个元素应该居中而不是左对齐。

function showHide() {
  var el = document.getElementById('firstEl'),
    elStyle = el.style,
    elDisplay = elStyle.display;
  elStyle.display = elDisplay != 'none' ? 'none' : 'block';
}

.container {
  width: 200px;
  border: 1px solid gray;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

<div class="container">
  <div id="firstEl" class="first-element">one</div>
  <div class="secondelement">second</div>
</div>

<button onclick="showHide()">show/hide</button>

JS 小提琴：http://jsfiddle.net/ugb3nwc0/

【问题讨论】：

flex-direction: row; 不是必需的。 flex-direction 的默认值为 row。

标签： css flexbox

【解决方案1】：

不要使用 justify-content: space-between;

改为使用margin 属性对齐它们。

margin-left:auto : 右对齐 flex 子项

margin-right:auto : 左对齐 flex 子项

function showHide() {
  var el = document.getElementById('firstEl'),
    elStyle = el.style,
    elDisplay = elStyle.display;
  elStyle.display = elDisplay != 'none' ? 'none' : 'block';
}

.container {
  width: 200px;
  border: 1px solid gray;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.first-element {
  margin-right: auto;
}

<div class="container">
  <div id="firstEl" class="first-element">one</div>
  <div class="secondelement">second</div>
</div>

<button onclick="showHide()">show/hide</button>

【讨论】：

第二个元素未定位到中心。
欢迎 :) @VinodGubbala