Question

我试图了解flex属性。

为什么我们将float和display: inline-block应用于嵌套在容器内的元素，而使用display: flex时，我们定义容器本身？内部元素如何display:block并且仍然位于同一行？

＆＃13;

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
}

@media (max-width: 600px) {
  .flex {
    flex-direction: column;
  }
}

#aaa {
  border: 3px solid black;
  flex: 2;
}

#aa {
  border: 3px solid black;
  flex: 1;
}

#a {
  border: 3px solid black;
  flex: 1;
}

#bbb {
  width: 300px;
}

#ccc {
  float: left;
  border: 5px solid yellow;
  width: 200px;
}

#ddd {
  clear: both;
}

.one {
  background: red;
  height: 50px
}

.two {
  background: green;
  height: 50px
}

.tree {
  background: blue;
  height: 50px
}

#eee {
  display: inline-block;
  width: 200px;
}

＆＃13;

<div class=flex>
  <div id=a class="one">flex</div>
  <div id=aa class="two">flex</div>
  <div id=aaa class="tree">flex</div>
</div>
<div class=block>
  <div id=bbb class="one">block</div>
  <div id=bbb class="two">block</div>
  <div id=bbb class="tree">block</div>
</div>
<div class=float>
  <div id=ccc class="one">float</div>
  <div id=ccc class="two">float</div>
  <div id=ccc class="tree">float</div>
</div>
<div class=block>
  <div id=ddd class="one">block</div>
  <div id=ddd class="two">block</div>
  <div id=ddd class="tree">block</div>
</div>
<div class=block>
  <div id=eee class="one">block</div>
  <div id=eee class="two">block</div>
  <div id=eee class="tree">block</div>
</div>

＆＃13;

CodePen demo

Answer 1

在flexbox中，我们为什么要定义容器而不是元素本身？

原因有两个：

Flex容器是flex项目可以作为子项出现的唯一内容，因为只有flex容器才会生成flex布局。
与匿名阻止框和匿名表格框不同，没有匿名弹性容器框这样的东西。

因此，假设display: flex-item不起作用，除非元素的父级是一个弹性容器，并且因为Flex容器的每个子节点都自动成为一个弹性项目，这就是这样的显示类型完全冗余。

另一方面，块级和内联级框exist in many, many forms。甚至 flex容器也可以分别以display: flex和display: inline-flex的块级和内联级形式出现。此外，display: block and display: inline-block actually have a lot in common，因为它们都是块容器。唯一的区别是一个是块级别而另一个是内联级别（后者总是生成块格式化上下文，但这里不相关）。

因此display: block和display: inline-block在这方面实际上非常类似于display: flex和display: inline-flex（参见Difference between display:inline-flex and display:flex），不同之处在于前者pair处理块布局或内联布局（请参阅section 9.2 of the CSS2 spec），后者对只处理flex布局。

如果你问为什么flexbox是这样设计的，那只有CSSWG可以肯定回答的东西，但我可以根据我上面所述的内容提供有根据的猜测：自从对于各种内部布局类型（块，表，弹性，网格等），块级和内联级框可以存在多种不同的形式，为每种布局类型定义弹性级对应框将变得非常笨重，即使它们也是如此确实引入了一个匿名弹性容器盒的概念，它允许元素本身作为弹性项存在。这就是css-display-3 redefines the display property采用<display-outside> <display-inside>形式以及特殊值和遗留值的原因 - 以适应新的布局类型，而无需重新定义整套关键字以与它们一起使用。< / p>

您的展示项目仅为display: block，因为它的指定值为display。但是它们布局作为flex项，它总是遵循flex布局中的一组规则，这些规则松散地基于块和内联布局的各种元素的组合而没有完全属于任何一个领域。这类似于即使指定display: inline或display: inline-block，浮点数或绝对定位元素也不能内联的方式 - 因为浮点数和绝对定位的元素总是参与块布局，从不进行内联布局。

说到浮点数，FYI，浮点数参与块格式化上下文，因此是块布局的某个子集的一部分。它们遵循浮点模型，但浮点模型与块布局的其余部分集成，而不是作为完全独立的布局类型存在。

在flexbox中，我们为什么要定义容器而不是元素本身？

1 个答案: