Question

我有一个容器，里面有两个元素。我希望两个元素都位于拐角处。因此，我将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/

Answer 1

请勿使用辩解内容：空格；

请使用margin属性将它们对齐。

margin-left：auto：向右对齐弹性子项

margin-right：auto：左对齐弹性子项

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>

弹性：如果只有一个格可见，则使项目居中对齐

1 个答案: