por Flexbox is an element arrangement system introduced to the world of web development in 2009. This system allows us to place the elements of a web page in a more comfortable and faster way than the classic CSS positioning. In this post, we present one of its main functions: the flex-wrap property of Flexbox or wrap in css.
How does Flexbox’s flex-wrap property work?
The flex-wrap property of Flexbox affects the way a container or container behaves. flex container and the elements within it, also known as flex items. Usually, The elements of a container will try to be arranged so that they occupy only one line (the width of the container).
If we have, for example, five identical elements in a viewport with a width of 1000px, elements with a width of 100px will take up only half a screen. However, when we give them a width greater than the width of the screen, for example 300px, the elements are not transformed to this width. Since the sum of their widths is greater than the width of the screen, the elements ignore their width and distribute the horizontal space of the screen. viewportstaying on a single line, thanks to the flex-wrap.
The flex-wrap property of Flexbox or flexbox wrap. allows us to override this automatic behavior and define what the elements of a container should do when they do not fit on a single line. By default, this property has the option nowrapwhich works like the option car of other properties. This means that this option follows the usual behavior of the elements and does not modify it.
The other option for Flexbox’s flex-wrap property is wrap. This option makes The elements apply the size we have given them and are arranged on the transverse axis instead of on a single line. That is, if we have our five elements of 300px width, with the option wrap They are going to accept this width. Since our screen measures 1000px, only three of the full-width elements fit on a single line, so the others will be arranged below, following the automatic transversal direction, which is vertical. If you are a little lost with what the transversal direction is, we invite you to read our post on the flex-direction property of Flexbox.
Please note that if you change your ownership flex-direction from flex-wrap to option column, you will make the transverse direction horizontal.
However, the elements will not continue into the next horizontal space, but will continue to grow in the vertical space. This is because The website is designed to grow infinitely vertically by adding a bar scroll to continue going down. So, if you want your elements to fit into the excess horizontal space, you will have to give a maximum height to the container in which they are, since the viewport does not have it.
To learn more about the different properties of this system, we invite you to review this complete Flexbox guide, where you will find more concepts related to flex-wrap, css wrap or flexbox wrap.
Do you want to continue learning?
Now that you know how to use the property flex-wrap of Flexbox or flexbox wrap to modify the way your elements fit into the screen space, it’s time to apply this property in your own web page design! At we know that every piece of theory you read motivates you not only to continue learning about web development, but also to create and design your own lines of code with wrap in CSS. That’s why we have the perfect intensive bootcamp for you!
By enrolling in our Full Stack Web Development Bootcamp you will learn about CSS and HTML and use this knowledge to create and design your own website with the help of our teachers. Do not miss it!