爲什麼應用uk-width-1-1會影響uk-grid的子div而不是嵌套div的div？

Question

爲什麼100％的寬度在此實現（其中類uk-width-1-1被施加到網格容器的孩子的嵌套格）施加：

<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，如果給定的width: 100%，如實地表示的100％的其直接父容器的寬度，而不是定義了display: flex的頂級容器？

Answer 1

爲什麼應用uk-width-1-1影響uk-grid的子div而不是 嵌套的子div？

的子項目flex項目不是Flexbox的一部分。它只是一個彈性容器（含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>