What happens when we use display:flex declaration in CSS ?
We all know that the children elements within the the .flex-container will become flex items and we can apply flex properties on the .flex-container parent element to control the behaviour of the flex-items.
But we fail to notice an important behaviour of the parent element with respective to the other outer elements.
Open the sandbox link in a new tab and toggle the display:flex declaration in style.css file and enjoy the eureka moment !
Let us visualise to understand better.
The span element behaves as if we applied display:block and the interesting part is the children of span are flex items.
What happens to the initial styles of the flex-items ?
Open the sandbox link in a new tab and toggle the display:flex declaration in style.css file
The flex-item-3 is actually an anchor element <a href=""></a> with but once we apply display: flex on .flex-container the children will become flex items irrespective of the initial styles.
What is the default behaviour of flex-items ?
By default flex items shrink to fit each other within the container. The maximum width to which a flex-item can shrink is equal to maximum content size within the flex item, for example please observe the flex item 3 by increasing and decreasing the content on index.html in the below sandbox link.
Behaviour of width on flex items
As we have already observed, flex items try to shrink and stretch within the flex container.
NOTE: The default width set on flex-items will be width: auto. Let us have this in mind and let us play by setting width on the flex items.
The important behaviour to notice are the following:
- When we set a very high value(greater than the parent element's width) of width on all flex-items the flex-items will shrink and adjust to fit within the parent container.
- When we set fixed width on the flex-items using like
width: 100px;on smaller screens the content inside the flex items will overflow outside the border.
Behaviour of height on flex items
As we have already observed, flex items try to shrink and stretch within the flex container, the same applies rule applies when we set a height.
NOTE: The default height set on flex-items will be height: auto. Let us have this in mind and let us play by setting height on the first flex item and try to remove lorem ipsum content on the second flex item.
The important behaviour to notice are the following:
- When we set a very high value of height on one of the flex-item all the flex-items will stretch to the height we set on one of the flex-item.
- When we set fixed height on one the flex-item like
height: 100px;the height of the selected flex item will have height of 100px and the other flex-items will have a height of flex-item which has the largest height automatically.
Phew that's it for this blog will follow up more nuances on how flex box works in depth.
Thank you for spending your valuable time by reading the above content and feel free to comment if the quality of the content can be improved.
Always be happy see you soon!