显示：flex认为它是显示：块

Question

在我多年的编码生涯中，我一生中从未遇到过像我现在在屏幕上看到的那样荒谬的事情。

我已经实现了一个

display:flex

属性，代码如下：

.flex-container{
  display: flex;
  text-align: center;
  flex-direction: column;
  justify-content: center;
}

.children{
  padding-inline: 15px;
  flex-shrink: 0;
  flex-grow: 0;
  flex-basis: 66.6666%;
  max-width: 66.666%;
}

这是 HTML 代码：

<div class="flex-container parent--padding-block">
    <div class="children">
        <h2>Header</h2>
        <p>Text text</p>
    </div>
    <div class="children">
        <h2>Header</h2>
        <p>Text text</p>
    </div>
    <div class="children">
        <h2>Header</h2>
        <p>Text text</p>
    </div>
</div>

两个问题：

1. 为什么我不能通过

   children

   水平缩小我的

   flex-basis: 66.6666%;

   元素。为什么我的浏览器完全忽略这个命令？也许它的“头部”是一个

   display:block

   ，它告诉元素跨越视口的整个宽度？

我可以在

flex-direction:row

时通过

flex-basis

调整宽度，但在

flex-direction:column

时不能调整宽度。这是为什么？

2. 看看下面的图片：

我很抱歉，但我真的无言以对。当我告诉它是

flex

项目而不是

block

项目时，到底为什么我会收到此消息。

我没有其他 CSS 属性覆盖这些属性。

到底发生了什么事？

我尝试垂直缩小

children

元素，我希望它按照指示进行。

Answer 1

为什么我不能通过

children

 水平缩小我的 

flex-basis: 66.6666%;

元素

当您为 Flexbox 指定

flex-direction: column

时，其子项的

flex-basis

对应于它们的

height

，但不对应于

width

。因此

flex-basis: 66.6666%

告诉所有

.children

获取

66.6666%

他们父母的身高。

为什么我的浏览器完全忽略这个命令？也许它的“头部”是一个

display:block

，它告诉元素跨越视口的整个宽度？

它显示

display: block

的原因可能是您正在检查

.children

元素，而不是

.flex-container

。而且它并没有占用整个宽度，因为您为它们指定了

max-width: 66.666%;

，我将它们标记为红色边框以清晰可见。

.flex-container {
  display: flex;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  border: solid 1px blue;
}

.children {
  padding-inline: 15px;
  flex-shrink: 0;
  flex-grow: 0;
  flex-basis: 66.6666%;
  max-width: 66.666%;
  border: solid 1px red;
}

<div class="flex-container parent--padding-block">
  <div class="children">
    <h2>Header</h2>
    <p>Text text</p>
  </div>
  <div class="children">
    <h2>Header</h2>
    <p>Text text</p>
  </div>
  <div class="children">
    <h2>Header</h2>
    <p>Text text</p>
  </div>
</div>