Table of content
Intro
Prerequisites
What is flex-wrap?
Why should you use flex wrap?
How to use flex-wrap?
Example
Conclusion
Good day reader thanks for allowing me to share a little bit of my knowledge with you, so please make yourself comfortable and feel at home as I am going to give you a ride through the world of "flex-wrap"
Prerequisites:
So for the prerequisites for you to easily understand this ride
you have to be familiar with "CSS", "flex box layout"
you can read the prerequisites I listed here so let's get to the better side.
What is flex-wrap:
Flex-wrap is a CSS property under flex box layout sets whether flex items are forced onto one line or can wrap onto multiple lines. if the wrapping is allowed, it sets the direction in that lines are stacked.
Why should you use flex-wrap:
Here I will talk about flex-wrap a little because it is the parent
of flex-wap
CSS flex-box layout allows you to easily format HTML, it also makes it simple to arrange items on our site horizontally and vertically,
when "display: flex" has been added to the particular container it aligns the content horizontal, which sometimes causes the content in the container to cause the site to flow, if the width of the container to which the flex was applied is now more than the page width and that's when flex-wrap comes, in if you add flex-wrap it will automatically arrange the contents in the flexed container to avoid overflowing in the site and no matter the size of the screen it automatically arrange the items that the flex was applied on , and flex-wrap has a different property,
This makes our sites more Responsive
How to use flex-wrap:
let me tell you how to use or apply flex-wrap don't worry I will still show you an example below.
Ok create a div-tag and add let us say 5 or more images in the div you created and give the images height and weight of 70px:70px the images you add in the box will be aligned vertically on default and sometimes it does not look nice to the eyes, so because of that, u will have to add flex-box layout to the div that contain the images by doing this.
Give the div containing the image property of "display: flex"
yes that's it are you surprised yes as easy as that you have
added flex box to the div.
So when "display:flex" has been added to the particular container it aligns the content horizontal,which sometimes causes the content in the container to cause the site to overflow if the width of the container which the flex was applied is now more than the page width,
Note:
most of the time this happens when the width of the devices on which the site is viewed is getting smaller(being viewed on a smaller device).
So this is where our main topic "Flex-wrap" comes in,you will now add a flex-wrap property like this "flex-wrap: wrap;" yes you have
added a flex-wrap property to the div containing the images now check it on the different screen sizes you will see it is automatically arranging the images.
Ok let's see the examples below or click the link below to see the examples in a text editor
Examples:
link: to the text editor
https://codepen.io/sage101/pen/eYrNyMp
image:
link: this link is the link of one of my site that was built with only flex wrap and no css media queries:
https://meta-kitties.netlify.app/
Git hub link: https://github.com/sundaysage;
Email: semenike60@gmail.com;
Twitter: https://twitter.com/sage1040
Conclusion:
flex wrap automatically arrange the contents in the flexed container to avoid overflowing in the site and no matter the size of the screen it automatically arrange the items that the flex was applied on ,and flex-wrap has a different property
and thanks for allowing me to share a little bit of my knowledge with you, I hope you enjoyed the ride
Top comments (0)