Day 34 of #100DaysOfCode…

Still on Flexbox, Today we will look at the Flex-wrap and the Flex-basis properties.

FLEX-WRAP : lets say we gave our webpage a max-width of 500px and we shrink our webpage to the point where we can no longer see somethings and we have to scroll sideways to view some content at the end..it behaves that way because it has reached the min-width provided.
So this where the flex-wrap property comes in,it gives the elements in our webpage the ability to avoid being covered by the screen even when it exceeds the max-width…lets see some examples below.

the html document that we will use for this lecture.

Now, in my HTML document i have div with a class of wrapper which holds the entire elements at the center of the webpage.
i also have the container div with the class of flex-container and the inside it are the container items. so lets dive right in to our CSS and get our hands dirty!

As you can see i applied the flex-wrap property directly to the flex-container because that is the display-flex is existing.so lets see the effect of this in the image below.

this is the element when the webpage is not shrinked

the above image shows the elements grows at the same rate due to the flex-grow applied directly to the div(with the class of .box),and notice that all elements are still aligned in the same line side by side..what happens if the browser is shrinked to the point it exceeds the max-width which was given to the flex.container? well lets find out below.

now these are the elements when the webpage is shrinked

Take a look at the above image, you will notice that the elements are no longer aligned side by side instead they are stacked on top of each other,well that’s the flex-wrap property at work there, the elements exceeded the max-width given to the container so instead of scrolling sideways to view the last element,the flex-wrap wraps the elements under each other so that the screen can’t cover it. Now that’s a very nice tool right?

FLEX-BASIS : flex-basis is pretty similar to our width,it defines a starting width of each of our element so instead of writing min-width(200px) we can say flex-basis(200px).
So we would see how that works in a minute but before i show you guys how it works,first i want to teach us some..there is a way we can write our flex-box properties in just one property using the shorthand notation called FLEX.

flex short hand notation

So as we can see from the above example , since our elements has the same class name of box ,instead of giving properties like flex-grow,flex-shrink,flex-basis to the elements individually i just used the flex property to give them the same styles..its just a way to shorten our code.

So, the first number in the flex property represents a flex-grow of one(1), the second number represents the flex-shrink of zero(0) and the last number represents a flex-basis of 200px.

flex-basis

Now as we can see all the elements have the same flex-grow of one and also the same flex-basis of 200px…

So, thats it guys hope you enjoyed the article! don’t forget to share this article.

chibueze ukaegbu Ugwuanyi Chidera Vincent Chibuike SmartZoe CodeNewbie Code Girl Code and Theory