Grid and flexbox layout - view page

HTML & CSS
1

this thread is related to Grid and flexbox layout - flexbox header and image grid - front page

following is part of mark up on my view.html
see http://buildandtest.atspace.cc/view.html

<main class="view">
    <div>
      <a href="http://www.yahoo.com" target="_blank">
        <img src="images/view.jpg" alt="" width="986" height="740" title="www.yahoo.com">
        <span>www.yahoo.com</span>
      </a>
    </div>
    <div><img src="images/view.jpg" alt="" width="986" height="740"></div>
    <div><img src="images/view.jpg" alt="" width="986" height="740"></div>
    <div><img src="images/view.jpg" alt="" width="986" height="740"></div>
</main>

Since I have display: flex and flex-direction column on the body
‘header’, ‘main’ and ‘footer’ become flex items.

Rachel Andrew in one of her introductory articles about Flexbox says “When we add display: flex, we are really defining display: block flex. The outer display type of our flex container is block; it acts like a block level element in normal flow. The inner display type is flex, so items directly inside our container will participate in flex layout.”

Flexbox spec says “Loosely speaking, the flex items of a flex container are boxes representing its in-flow contents.”

Even though they added this new display type: flex ‘main’ in the above markup is still a box and divs inside ‘main’ still remain block level…kind of ‘box inside box’ concept we have in block layout? So as Rachel puts it display: block flex, the second value ‘flex’ my guess would be is related to all those flex properties that allow to manipulate flex items content…?

2

I’m not 100% clear what you are asking and your link isn’t loading for me at the moment but I’ll try to explain as best I can :slight_smile:

A flex container will automatically display as a block element in that it will accept dimensions and behave like a block element but it’s main job will be to act as a flex parent for its direct children. Of course as a flex parent it has a number of special flex values that will apply to it in order to create the layout needed.

What this means is that if you applied display:flex to a span then you can consider the span will behave as a block element and not as an inline element. The span will now take dimensions, margin and padding in the same way as a block element. Of course the rules of html cannot be changed so you can’t nest block elements inside a span just because it’s display is block.

This is not unique to flex in that display: table, display: inline-block, position:absolute (to mention a few) will also afford the element a block display but with the special characteristics of its actual display value.

Direct children of a flex container (not grandchildren) will become flex items and even if they are spans they will behave like a block item but with the special properties that being a flex item imbues.

Grandchildren will not directly be affected at all by the flex properties as they are children of a flex-item and will behave as normal within the bounds of their parent.

1 Like
3

For the link try http://buildandtest.atspace.cc/ and then just click on the first thumb on the left - it would take you to view.html I was referring above.

Anyway your explanation anwers my main question - in the above mark up divs are grandchildren and are not affected by flex properties

4

This is what I read in one of Eric Meyer’s books

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.