0

为什么在此实现中未应用 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>

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

4

1 回答 1

1

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

弹性项目的子项不是弹性盒的一部分。它只是一个flex 容器（带有 的元素display: flex）的子元素（或者你称它们为直接子元素），所以你最里面div的是普通的块级元素，不会响应 set class uk-width-1-1，但它们的父元素会，就像你的第二个样本一样。

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

这也显示在您的第一个复制示例中，其中 flex 项和最内层div都没有设置宽度，因此最内层div的内容将定义 flex 项的宽度，就像嵌套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>

于 2017-08-12T07:58:03.110 回答