Day21 of #100daysOfCode
FOCUS: FLEXBOX , NETNINJA COURSE;
What you’ll see: -simple layout and flex-grow.
Consider a simple layout like so:

To achieve this, we can use one of two things, a flex property or using the traditional float property. Lets see which is more handy.
Basically when you give a “display:flex” property to an element, every direct child of that element becomes a flex item and we can then control their behavior or the behavior of the parent element.Using flexbox properties we can determine how these flex items grow or shrink relative to each other or whether they should be stacked side by side or in column or row form.
First, here’s the index.html file,
And here’s the basic CSS:
Using float property: First we give the .box class a float:left property, this stacks the items together on the left as in the picture above. Unfortunately, the white background and basically the flex-container disappears because the float collapses it. To get our flex-container back, we need to grab the flex-container element and do a pseudo-class:after on it,like this:
Using the flex property: Here you just take the .flex-container and give it a display:flex. Quite simple, you don’t need the pseudo-class:after.
FLEX-GROW
Remember the additional white background in the image above? With flex-grow: property, we can make the colored elements to take up all the remaining spaces. Adding the flex-grow to their general class gives us this:

Here’s the code of what to add
.box {height: 100px;min-width: 100px;flex-grow: 1}
Let’s see something else where we’ll want the elements to grow at various rates like this:

Here’s the code:
In a column system such as in bootstrap,The red background takes four columns, the blue background takes six columns while the green occupies two columns. This is the same as in a twelve column grid system and applying columns to each one of these elements.
So, basically we use flex-grow to expand elements into available space and the rate at which they grow is governed by the number assigned to them.
