Day 33 of #100DaysOfCode…
Topic: FLEX-B0X CONTAINER,FLEX-GROW AND FLEX-SHRINK…
In my article i gave an overview of how flex box works and it goes like this,
we first have to create a container an element with a display type of flex so that every direct descendant of that element will then become a flex item.So once we have done that we can then control the behavior of those flex items using several CSS properties either applied to the items directly or the container…
These behaviors include how they grow or how they shrink relatively to each other or whether they stack on top of each other or stay side by side,you know that kind of thing.
so we will create a container and some flex item within it just to look at the basic behavior it displays.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8">
<title>Flex Containers</title>
<link rel=”stylesheet” href=”../css/flexbox.css”>
</head>
<body>
<div class=”wrapper”> <div class=”flex-container”> <div class=”box one”></div> <div class=”box two”></div> <div class=”box three”></div> </div> </div>
</body>
</html>
The above is the HTML document, we have a div with a class of rapper which is going to keep everything within and in the center of the page.
I also create a div with class of flex-container and it’s has 3 items or div’s inside it and we are done with the HTML so lets go over to our CSS and style.
Now, looking at the above styling we can see that i only targeted and styled the items or 3 div’s inside the container without styling the container itself.
let’s take a good look at the image above, notice that the boxes or items are stacked on top of each other but we can change the display of this boxes using the CSS (display: flex) property.
.flex-container{
display: flex;
}
//let's see what happens after adding the display flex property.
Now we can see the effect of flex,it stacks the element side by side each other in a row like how it is in the image above.
So now all these are flex items we can do lots of things with it,we can change how they grow or how they shrink etc.FLEX-GROW : this a CSS flex property that we can use to expand elements into the available space in the flex container…now lets demonstrate how to use this property below.
So, the above is how to give an element a flex-grow property.
lets say the width of the container is 100px, the box one with the flex-grow of 2 will take 30px space available in the container,the box two will take 50px space available in the container and then the box three will take the remaining 20px of the available space.FLEX-SHRINK : is just the opposite of flex-grow ,so instead of determining the rate at which they grow it determines the rate at which they shrink.
That’s all for now guys,hope you enjoyed reading the article ? don’t forget to share and clap for this article.
chibueze ukaegbu Ugwuanyi Chidera Vincent Chibuike phavor sparks CodeNewbie CSS Design Awards CSS
