Question

似乎flex-direction：列根本不起作用。另一方面，flex-direction：行； -完美的作品。您只需将“列”换为“行”即可在下面的代码中看到它：

.flex-container {
  display: flex;
  flex-direction: column;
  height: 400px;
  background-color: DodgerBlue;
}

.flex-container>div {
  flex-grow: 1;
  background-color: #f1f1f1;
  margin: 10px;
  line-height: 75px;
}

<h1>Flexible Boxes</h1>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

在列模式下，显示：flex行为与常规显示类似：阻止并且他的孩子们从他身上流出，而不是收缩以适应高度或最大高度：400px;

那是为什么？以及为什么它仅适用于“行”模式？

Answer 1

删除行高或添加溢出：自动添加到容器。基本上，这是每个制作溢出容器的孩子的硬编码高度。

<!DOCTYPE html>
<html>

<head>
  <style>
    .flex-container {
      display: flex;
      flex-direction: column;
      height: 400px;
      background-color: DodgerBlue;
    }
    
    .flex-container>div {
      flex-grow: 1;
      background-color: #f1f1f1;
      margin: 10px;
    }
  </style>
</head>

<body>
  <h1>Flexible Boxes</h1>

  <div class="flex-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
</body>

</html>

Flexbox，列的行为与行不同

1 个答案: