代码之家 › 专栏 › 技术社区 › James Sinclair

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

flexbox css html

James Sinclair · 技术社区 · 2 年前

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

我已经实现了 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>

两个问题:

为什么我不能水平收缩 children 元素通过 flex-basis: 66.6666%; 。为什么我的浏览器完全忽略了此命令?也许它的“脑袋”里有这样的想法 display:block 哪个告诉元素跨越视口的整个宽度?

当 flex-direction:row 通过 flex-basis ,只是不是什么时候 flex-direction:column 。为什么?

请看下图:

Non-existent issue

children

对不起,我真的无话可说。当我告诉它是一个 flex 项而不是 block 项目

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

到底发生了什么事?

我试着垂直收缩 儿童 元素,我希望它能按照指示进行。

1 回复 | 直到 2 年前

Hao Wu 2 年前

为什么我不能水平收缩 children 元素通过 flex-basis: 66.6666%;

当您指定 flex-direction: column 到您的flexbox flex-basis 因为它的孩子与他们的 height 但不是 width 因此 flex-basis: 66.6666% 告诉了所有人 .children 采取 66.6666% 最初是其父母的高度,但其父母的身高 .flex-container 是未确定的,所以它什么也不做。

为什么我的浏览器完全忽略了这个命令?也许它的“脑袋”里有这样的想法 display:block 哪个告诉元素跨越视口的整个宽度?

它出现的原因 display: block 可能你在检查 儿童 元素,但不是 .flex容器 。并且它没有占用整个宽度,因为您指定了 max-width: 66.666%; 对他们来说,我给他们标记了红色的边界,以便看得清楚。

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

.children {
  padding-inline: 15px;
  /* these are unnecessary */
  /*
    flex-shrink: 0;
    flex-grow: 0;
    flex-basis: 66.6666%;
  */
  width: 66.666%;
  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>