‘’’ HI,CHRIS DO THE MARGIN COLLAPSING WORKS IN FLEX-BOX LAYOUT. I am a bit cofused on it.’’’
‘’’ ANOTHER QUESTION: When we have flex-direction:column why all the column elements do not have same height as in flex-direction:row they all have same width when flex:1 is set to all child elements’’’ ‘’‘IS there any reason for it or it just simple logic that why to extend columns more.’’’
No, it doesn’t. We have some really detailed articles how Flexbox works that you might find useful to read:
See this one in particular:
This is an interesting one; the way that flex works is that it shares out the available spare space equally between the child elements that have flex set on them. the “spare space” is the space left when you’ve accounted for the space taken up by the child element’s content, and margins, padding, etc. set on those children.
When flex-direction is row, the spare space available is generally limited by the width of the flex container (the element with display: flex set on it), which in turn is generally limited by the width of the <body> and browser viewport, unless you are doing some clever and complicated.
When flex-direction is column however, the spare space isn’t really limited by anything — the height of the <body> will extend as far as is need to contain all the page content. So therefore flex doesn’t make sense, and the flex children will just become as tall as is needed to contain their contents.
If however you set a fixed height on the flex container, there is a set amount of spare space, so it will be shared out equally among the flex children. In this case, it makes sense.
You can try this, to see what I mean. Go to this page:
In the live example (under “Basic example”), edit the CSS code in the first textbox to this:
.box {
height: 500px;
display: flex;
flex-direction: column;
}
.box > div {
flex: 1;
}
The children inside the column will have an equal height. Now try deleting the line height: 500px;. You’ll see that they no longer behave as you were expecting.
Thanks chris, your explanation is always helpful. Can you suggest any projects that can i work on with knowledge of html and css
