为什么应用 uk-width-1-1 会影响 uk-grid 的子 div，但不会影响子的嵌套 div?

Question

为什么在此实现中不应用100%宽度(其中类uk-width-1-1应用于网格容器子级的嵌套div(：

<div uk-grid>
<!-- column 01 -->
<div>
<!-- this will be a row, stacked -->
<div class="uk-width-1-1 mine">Row 01</div>
<!-- this will be a row, stacked -->
<div class="mine">Row 02</div>
</div>
</div>

但是，当像这样实现时，它会应用(其中类uk-width-1-1应用于网格容器的子级(：

<div uk-grid>
<!-- column 01 -->
<div class="uk-width-1-1">
<!-- this will be a row, stacked -->
<div class="mine">Row 01</div>
<!-- this will be a row, stacked -->
<div class="mine">Row 02</div>
</div>
</div>

我可以看到如何达到我想要的效果，但想知道它背后的逻辑是什么，以便我更好地理解它。

jsFiddle显示了这两种实现。

编辑：

我可以只使用 flex 样式复制行为 - 所以我需要弄清楚为什么子div 可以是 100% 而嵌套div 不能？

<!-- nested div is only the width of the content -->
<div style="display:flex; flex-wrap: wrap">
<div>
<div style="width:100%; background: red">Item 1</div>
<div style="width:100%; background: red">Item 2</div>
</div>
</div>
<!-- if applied to child div, is 100% width of parent -->
<div style="display:flex; flex-wrap: wrap">
<div style="width:100%">
<div style="background: red">Item 1</div>
<div style="background: red">Item 2</div>
</div>
</div>
<!-- if not using flex at all, nested divs are 100% width of parent -->
<div>
<div>
<div style="width:100%; background: red">Item 1</div>
<div style="width:100%; background: red">Item 2</div>
</div>
</div>

也许一个flex item，它是flex container中的任何直接子div，默认情况下是其内容的宽度，因此嵌套的div，如果给定width: 100%，忠实地表示其直接父容器宽度的100%，而不是定义display: flex的顶级容器？

Answer 1

为什么应用uk-width-1-1会影响 uk-grid 的子div，

但不会影响 uk-grid 的子div 嵌套的孩子？

弹性项的子项不是弹性框的一部分。它只是flex 容器(带有display: flex的元素(的子元素(或者您称之为直接子元素(，因此您最内在的最div是正常的块级元素，不会响应设置的类uk-width-1-1，但它们的父级会，就像您的第二个样本一样。

当涉及到Flexbox时，可以简化地说，他们说flex容器的行为类似于块元素，而flex项目的行为类似于内联块。

这也显示在您的第一个复制示例中，其中弹性项和最内层div都没有设定的宽度，因此最内层div的内容将定义弹性项的宽度，就像div中的嵌套div一样，其中外部div设置为display: inline-block。

---

这里有一些很好的资源：

• https://www.w3.org/TR/css-flexbox-1/#box-model
• https://css-tricks.com/snippets/css/a-guide-to-flexbox/

---

更新

请注意，弹性项也可以同时是弹性容器，如以下示例所示

<div style="display:flex; flex-wrap: wrap">
<div style="display:flex; flex-wrap: wrap; flex-grow: 1; ">
<div style="flex-basis: 100%; background: red">Item 1</div>
<div style="flex-grow: 1; background: red">Item 2</div>
</div>
</div>