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

问题

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?

回答1:

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>

来源：https://stackoverflow.com/questions/45646445/why-does-applying-uk-width-1-1-effect-child-divs-of-uk-grid-but-not-nested-divs

标签

html

css

css3

flexbox

getuikit