Day21 of #100daysOfCode

Ugwuanyi Chidera
Sep 8, 2018 · 2 min read

FOCUS: FLEXBOX , NETNINJA COURSE;

What you’ll see: -simple layout and flex-grow.

Consider a simple layout like so:

Take note how the items are arranged and note the white background too

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,

index.html

And here’s the basic CSS:

index.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:

Many logic using the float property.

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.

And that’s it.

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:

Each colored element is growing at the same rate of 1

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:

Notice their unique sizes.

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.

chibueze ukaegbu phavor sparks Bernar May

LearnFactory Nigeria

At LearnFactory we Train proficient software, Outsource them for development work around the world and build software solutions for clients.

Ugwuanyi Chidera

Written by

LearnFactory Nigeria

At LearnFactory we Train proficient software, Outsource them for development work around the world and build software solutions for clients.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade