Question

我正在尝试使用包裹的列进行垂直布局（我有一个最大高度）但是我不能水平居中列而不设置宽度（我不想要）。我使用的是flexbox，我认为在proty-content和align-items上使用center也足够了，但它不是。我想将所有垂直列都放在父级中心，如果不为父级设置宽度，我怎么能实现呢？

＆＃13;

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  max-height: 400px;
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 50px;
  height: 50px;
  margin-top: 10px;
  
  line-height: 50px;
  color: white;
  font-weight: bold;
  font-size: 1em;
  text-align: center;
}

＆＃13;

<ul class="flex-container">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
</ul>

＆＃13;

Answer 1

为此，您可以在flex-container上使用align-content: center。通过这个，您可以定义项目沿交叉轴的分布方式，在这种情况下为x，因为您使用的是flex-direction: column，因此y是主轴，而x是交叉轴轴。

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  max-height: 400px;
  border: 1px solid black;
  align-content: center;
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 50px;
  height: 50px;
  margin-top: 10px;
  
  line-height: 50px;
  color: white;
  font-weight: bold;
  font-size: 1em;
  text-align: center;
}

<ul class="flex-container">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
</ul>

Flexbox列水平间隙

1 个答案: