html - 为什么应用 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 显示这两种实现是 here .

编辑:

我可以仅使用 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

Why does applying uk-width-1-1 effect child divs of uk-grid but not nested divs of child?

flex items 的子项不是 Flexbox 的一部分。它只是 flex 容器(具有 display: flex 的元素)的子元素(或者如您所说，直接 子元素)，所以你最里面的 div 是普通的 block 级元素，不会响应集合类 uk-width-1-1，但是它们的父元素会，就像你的第二个样本。

当谈到 Flexbox 时，可以简单地说，flex 容器的行为类似于 block 元素，而 flex 元素类似于内联 block 。

这也显示在您的第一个复制示例中，其中 flex 元素和最里面的 div 都没有设置宽度，所以最里面的 div' s 的内容将定义 flex 元素的宽度，就像 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/

---

已更新

注意，一个 flex 元素可以同时也是一个 flex 容器，如下例所示

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