CSS/CSS3 Flexbox Layout

Many times you have faced the problem or requirement of equi-heighted divs which have unequal amount of content. You require both divs to have the height of the parent container which should change on changing the height of either of the divs.

There have been some suggested tricky solutions to this problem like by having very large margin of divs and similarly that much large negative pandding and then make the height auto to span it according to the content they have.

But this was solution to only one problem. What about other tricky problems that always needs tricky solutions.

CSS3 has pretty neat solution for this known as Flexbox. The Flexbox Module provides solutions to all the alignment problems of child elements in their parent container element.

Here is example of what the CSS3’s Flexbox Module is capable of! Lets take a container div and this div contains an unordered list. Here we are willing to create a menu which spans on entire page and the menu’s inter item width depends on the number of items.

display: flex This will add the flexbox laout to the container whose children are needed to be evenly spaced.

flex-direction: row Now we need to specify the direction in which the space has to be consumed. row means consume space horizontally and column means consume space vertically

flex-wrap: wrap This will enable the children to be wrapped if they are overflowing the available space. This is needed when content will naturally need more space than available like container being 200px wide and the 5 children have texts needing more than approximately 40px i.e. (available space / total children).

justify-content: space-between This will justify the content; i.e. distribute the space in between the elements. Other good options can be following; there are more but we can refer them on MDN here.

space-around Distribute the empty space around the elements.

space-evenly Distribute the space evenly and don't bother about the content length.

... etc.

Now lets see another example for the content. Let's take a wrapper section and it will have content in articles and see how it distributes with few rules.