Flexbox question

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
Post Reply
Bethrezen
Posts: 445
Joined: September 13th, 2003, 11:56 am

Flexbox question

Post by Bethrezen »

Hi all

Ok so I just ran in to some weirdness with flex box that I don’t understand and I was wondering if anyone could clarify, ok so say I have the following mark up.

Code: Select all

<!doctype html>
<html>
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}

.container
{
display:flex
}

.container div
{
font-size:35px;
padding:15px;
}

</style>
   
<body>

<div class = "container">
  <div class = "box1">One</div>
  <div class = "box2">two</div>
  <div class = "box3">three</div>
  <div class = "box4">four</div>
  <div class = "box5">five</div>
  <div class = "box6">six</div>
</div>

</body>

</html>
Why is it that when I set display:flex the boxes inside the container end up displayed horizontally on a single line as if I has set display:inline-flex.

Shouldn’t block level elements in a block level flex box be stacked vertically by default since block level element are already 100% of there parents width, and therefore it shouldn’t be possible for them to end up displayed horizontally on a single line by default, that should only happen if I set some additional properties.

Intuitively you would assume that if the default display was set to display block level flex items horizontally on a single line they would still be 100% of there parents width and they would simply overflow there parent container, yet this isn’t what happens instead they are made smaller so they can all fit on a single line which as far as I'm aware should only happen if you set display:inline-flex

So what is going on here why does display:flex appear to be rendering block level flex items incorrectly.
User avatar
BruceAWittmeier
Posts: 3076
Joined: June 9th, 2008, 10:53 am
Location: Near 37.501685 -80.147967

Re: Flexbox question

Post by BruceAWittmeier »

I'm not current on the newer HTML but this seems to work. There is likely a better way.

Code: Select all

<!doctype html>
<html>
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}

.container
{
display:flex
}

.container div
{
font-size:35px;
padding:15px;
border: 2px solid yellow; 
}

</style>
   
<body>

<div class = "container"><clear: right;>
  <div class = "box1" >One</div>
  <div class = "box2">two</div>
  <div class = "box3">three</div>
  <div class = "box4">four</div>
  <div class = "box5">five</div>
  <div class = "box6">six</div>
</div>

</body>

</html>
On Edit:
I get this when using old KomPozer editor: Otherwise I get 1 row of boxes like the OP with the same code I posted.
https://i.imgur.com/D6Xrx7I.jpg
I often take a long windy road to my destination. Upon arrival, I wonder how I missed the shortcut.
Bethrezen
Posts: 445
Joined: September 13th, 2003, 11:56 am

Re: Flexbox question

Post by Bethrezen »

BruceAWittmeier wrote:On Edit:
I get this when using old KomPozer editor: Otherwise I get 1 row of boxes like the OP with the same code I posted.
https://i.imgur.com/D6Xrx7I.jpg
its odd that in the screen shot you posted you get all the boxes stacked vertically because when i run the code above this is what i see

Image

why this is i have no idea but this seems like incorrect implementation because that should only happen when you apply display:inline-flex and not when you apply display:flex; as i did in the code above and yes i know there there are better ways this was simply some basic demo code to display the issue.
Post Reply