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

Question

我试图了解flex属性.

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

.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;
}

<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>

CodePen演示

Answer 1

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

原因有两个:

1. Flex容器是flex项目可以作为子项出现的唯一内容,因为只有flex容器才会生成flex布局.
2. 与匿名块框和匿名表框不同,没有匿名的Flex容器框这样的东西.

因此,display: flex-item除非元素的父级是flex容器,否则假设将无效,并且由于Flex容器的每个子级无论如何都会自动成为弹性项目,这使得这种显示类型完全冗余.

另一方面,块级和内联级框存在许多种形式.甚至柔性容器可以出现在块级和行内形式,display: flex和display: inline-flex分别.此外,display: block和display: inline-block实际上有很多共同点,他们都是块容器.唯一的区别是一个是块级别而另一个是内联级别(后者总是生成块格式化上下文,但这与此不相关).

所以display: block和display: inline-block实际上是非常相似,display: flex并display: inline-flex在这方面分别(见显示器之间的差异:直列Flex和显示器:弯曲),区别在于前者对处理块布局或直列布局(见的CSS2规范的9.2节)而后一对只处理flex布局.

如果你问为什么Flexbox的设计这样一来,这件事情只有CSSWG可以肯定地回答,但我可以根据我所上述提供了一个猜测:由于块级和行内框可以存在关于各种内部布局类型(框,表,弯曲,网格等),定义为每一个布局类型柔性电平对应所以许多不同的形式将变得非常笨重,即使他们没有介绍的匿名柔性容器盒的一个概念,其将允许元素本身作为弹性项存在.这就是为什么css-display-3 重新定义display属性以<display-outside> <display-inside>采用特殊和遗留值的形式 - 以适应新的布局类型,而无需重新定义整组关键字以与它们一起使用.

您的弹性项目display: block仅仅是因为它是指定的值display.但它们被布置为弹性项目,它总是遵循flex布局中的一组规则,这些规则松散地基于块和内联布局的各种元素的组合,而不是完全落在任一个的域中.这类似于浮点数或绝对定位元素即使您指定display: inline或者display: inline-block- 也不能内联的方式- 因为浮点数和绝对定位的元素总是参与块布局,而不是内联布局.

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