1

Hi guys here is the codepen for more details including html: [https://codepen.io/Onsopen/pen/BmvNJe?editors=1100][1]

body {
  display: flex;
  margin: 0;
  flex-direction: column; // so here i am using body tag as overall container
  min-height: 100vh;
  background: #2c3e50;
}

header {
  display: flex;
  justify-content: space-between;
}

main {
  display: flex; // <-here the main html tag is being set as display flex and by default is row direction. 
  flex-basis: 200px; // <-THE PROBLEM is the 200px are set as height??
}

article {
  flex-basis: 60%; // <- over here i am setting the tags within main tag individually
  background: #ecf0f1;
}

nav {
  flex-basis: 20%; <- over here i am setting the tags within main tag individually
  background: #95a5a6;
  order: -1;
}

aside {
  flex-basis: 20%; <- over here i am setting the tags within main tag individually
  background: #3498db; 
}

header, footer {
  background: #1abc9c;
  flex-basis: 100px;
}

I am trying to make holy grail layout with flexbox and I am facing a strange behavior from flex-basis within the main tag which is set as display: flex with direction as row.So the items all line up as a row.

When trying to set the flex-basis instead of acting on or as the width is actually just acting as height which is strange considering that the flex-basis stretch is dependent on the direction and main axis which within the main tag is set to row with display: flex as default.

Is it because the <body> tag set to flex-direction:column is influencing the <main> tag item thus when setting the main tag item as flex-basis: 200px is actually responding as an individual item within a column, like the other items within tag (nav, aside, article) stretch on the side because of being under flex row direction within main. Was thinking that would be the cause.

However after some research I read at csstricks that items set to display: flex are not influenced by the other parent above them. So kind of when Individual items that are child become parent they are not anymore influenced by the previous parent in terms of direction. Just a guess but would love some help. I figure out to solve this with body tag set to row and it worked well as their are different ways to solve it but on this specific situation seems strange.

Any reason to why so?

Asons
  • 84,923
  • 12
  • 110
  • 165
Alonso
  • 43
  • 1
  • 8
  • Flex-basis is NOT the same as width or height. It's the **initial** dimension. – Paulie_D Nov 30 '17 at 19:36
  • https://stackoverflow.com/questions/34352140/what-are-the-differences-between-flex-basis-and-width – Paulie_D Nov 30 '17 at 19:37
  • No I know but when I flex row direction if you set flex basis will influence the width of the item when in column direction it will influence the height but is not same the problem above is not adding to the width but the height on the main tag. – Alonso Nov 30 '17 at 19:49
  • @Paulie_D as the guy on the answer said the flex basis when in row controls width and when in column controls the height but in my case is not controlling the width but the height when in row. That's the question. I know that are not same. – Alonso Nov 30 '17 at 19:51
  • The `flex-basis` property applies only to flex items, not flex containers. – Michael Benjamin Nov 30 '17 at 20:02
  • I added a drawing to make it more clear how it works. Let me know if you want me to clarify further. – Asons Dec 01 '17 at 12:24

1 Answers1

3

The flex-basis: 200px; set in the main is affecting the height of itself, which is what it's suppose to.

And why, because the flex-basis is a flex item property and whether it affect height or width is based on its parent, the flex container's, flex-direction, which in your case is the body having column.

enter image description here

If to control the main's width, you need to use just that, width:

main {
  display: flex;
  flex-basis: 200px;         /*  height  */
  width: 500px;              /*  width  */
}
Asons
  • 84,923
  • 12
  • 110
  • 165
  • Hi LGSon, thanks for the clarification. My confusion was that flex-basis could also affect all items from the parent flexbox which apparently doesn't work. This makes more sense! Thanks! – Alonso Dec 01 '17 at 12:55