为什么应用uk-width-1-1会影响uk-grid的子div，但不能嵌套子div的div？ [英] Why does applying uk-width-1-1 effect child divs of uk-grid but not nested divs of child?

问题描述

为什么在这个实现中没有应用100％宽度（其中类 uk-width-1-1 应用于网格容器的子节点的嵌套div）：

 < div uk-grid> 
<！ - 第01列 - > 
< div> 
 <！ - 这将是一排，堆叠 - > 
< div class =uk-width-1-1 mine>第01行< / div> 
 <！ - 这将是一排，堆叠 - > 
< div class =mine>第02行< / div> 
< / div> 
< / div> 
  

然而，它在实现像这样的时候被应用（其中class uk-width -1-1 应用于网格容器的子节点）：

 < div uk-grid> ; 
<！ - 第01列 - > 
< div class =uk-width-1-1> 
 <！ - 这将是一排，堆叠 - > 
< div class =mine>第01行< / div> 
 <！ - 这将是一排，堆叠 - > 
< div class =mine>第02行< / div> 
< / div> 
< / div> 
  

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

jsFiddle展示了两种实现方式，此处 。

编辑：

我可以使用flex样式复制行为 - 所以我需要弄清楚为什么儿童div可以100％嵌套divs不能？

<！ - 嵌套div只是内容的宽度 - - >< 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><！ - 如果应用于子div，则为父级的100％宽度>< div style =display：flex; flex-wrap：wrap> < div style =width：100％> < div style =background：red>第1项< / div> < div style =background：red>第2项< / div> < / div>< / div><！ - 如果完全不使用flex，则嵌套div是父宽度的100％ - >< div> < DIV> < div style =width：100％; background：red> Item 1< / div> < div style =width：100％; background：red> Item 2< / div> < / div>< / div>

code> flex项目，它是 flex容器中的任何直接子div，默认情况下是其内容的宽度，因此嵌套div如果给定 width：100％，忠实地表示其直接父容器宽度的100％，而不是顶级容器，其中显示：flex 是否定义？


解决方案




为什么应用 uk-width-1-1 code>影响uk-grid的子div，但不是
嵌套的子div？




弹性项目不属于Flexbox。它只是一个 flex容器的子元素（显示：flex ）的元素（或者您称之为 immediate children），所以最内层的 div 是普通的块级元素，并且不会响应设置的类 uk-width-1 -1 ，但他们的父母仍然会这样做，就像你的第二个样本一样。

说到Flexbox，可以简化一下， flex容器的行为类似于块元素，而flex元素则类似于行内块。

这也显示在您的第一个复制样本中，其中flex项目和最内部的 div 的宽度是设置的，所以最内层的 div 的内容将定义flex项目，就像 div 中嵌套的 div 一样，其中外部的 div 设为 display：inline-block 。

---

以下是一些不错的资源：

• < a href =https://www.w3.org/TR/css-flexbox-1/#box-model =nofollow noreferrer> https://www.w3.org/TR/css-flexbox- 1 /＃box-model


• https://css-tricks.com/snippets/css/a-guide-to-flexbox/

---

更新

注意，flex项目同时也可以是一个弹性容器，就像下面的示例一样

< div style =显示：弯曲; flex-wrap：wrap>< div style =display：flex; flex-wrap：wrap; flex-grow：1; >< div style =flex-basis：100％;背景：红色>项目1< / div>< div style =flex-grow：1;背景：红色>第2项< / div>< / div>< / div>

$ b

Why is 100% width not applied in this implementation (where the class uk-width-1-1 is applied to nested div of child of grid container):

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

However it is applied when implementing like this (where the class uk-width-1-1 is applied to child of grid container):

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

I can see how to achieve the effect I want, but would like to know what the logic is behind it so I can understand it better.

jsFiddle showing both implementations is here.

Edit:

I can replicate the behaviour using just flex styles - so I need to figure out why can child div be 100% and nested divs cannot?

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

Perhaps a flex item, which is any immediate child div in a flex container, by default is the width of its content, therefore nested divs, if given width: 100%, faithfully represent 100% of their immediate parent container's width and not the top level container where display: flex is defined?

解决方案

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

Children of flex items is not part of the Flexbox. It is only children of a flex container (an element with display: flex) that is (or as you called them, immediate children), so your inner most div's is normal block level elements and will not respond to the set class uk-width-1-1, their parent will though, as in your second sample.

When it comes to Flexbox, one can, simplified, say they that the flex container behave similar to a block element and the flex item like a inline block.

This is also shown in your 1st replicated sample, where neither the flex item nor the inner most div's have a set width, so the inner most div's content will define the width of the flex item, in the same way a nested div in a div would, where the outer div is set to display: inline-block.

---

Here is some good resources:

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

---

Updated

Note, a flex item can at the same time also be a flex container, like in below sample

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

这篇关于为什么应用uk-width-1-1会影响uk-grid的子div，但不能嵌套子div的div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！