为什么应用 uk-width-1-1 影响 uk-grid 的子 div 而不是子的嵌套 div？答案

【问题标题】：Why does applying uk-width-1-1 effect child divs of uk-grid but not nested divs of child?为什么应用 uk-width-1-1 影响 uk-grid 的子 div 而不是子的嵌套 div？
【发布时间】：2017-08-12 19:49:54
【问题描述】：

为什么在这个实现中没有应用 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 的顶级容器？

【问题讨论】：

我的答案中是否缺少某些内容，我可以添加以使其被接受吗？

标签： html css flexbox getuikit

【解决方案1】：

为什么应用 uk-width-1-1 会影响 uk-grid 的子 div 而不是孩子的嵌套 div？

flex items 的子元素不是 Flexbox 的一部分。它只是 flex 容器（带有display: flex 的元素）的唯一子级（或者你称之为immediate 子级），所以你内心最深处的div 's 是普通的块级元素，不会响应 set class uk-width-1-1，但它们的父级会响应，就像在您的第二个示例中一样。

说到 Flexbox，可以简单地说，弹性容器的行为类似于块元素，弹性项目类似于内联块。

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

这里有一些很好的资源：

更新

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

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

【讨论】：