时间戳

首页 > 解决方案 > Flex：如果只有一个 div 可见，则使项目居中对齐

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

问题描述

我有一个里面有两个元素的容器。我希望两个元素都位于角落的末端。所以我使用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/

标签： cssflexbox

解决方案

不要使用 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>

推荐阅读