por Flexbox is an element arrangement system for CSS3 that allows us to place the elements of our website in a more comfortable and flexible way than other traditional methods. Being a very complete system, Flexbox has several properties to know. In this post, we present the property to you flex-flow of Flexbox, a property that combines the power of two other of its main properties.
How does Flexbox work?
Before presenting the property to you flex-flow of Flexbox, we must first understand how this system works.
In the Flexbox element layout system there are two types of properties available: those that affect the container (flex container) and those that affect the children of this container (flex label items). Properties that affect the container tend to affect the elements by inheritance. However, the properties of flex-items They can override these rules and implement their own styles.
Another characteristic that we must understand about Flexbox is its way of thinking about space when defining the arrangement of HTML elements. Unlike the classic positioning system that we present to you in our post about the positioning of elements in CSS, Flexbox doesn’t think about space in terms of Axis y either X axis. In fact, Flexbox thinks about space in terms of a main axis and a transverse axis. The main axis will be the way in which Flexbox will order the elements, which can be horizontally row or in the vertical direction column. These two concepts are key to understanding the logic behind all its properties.
Remember that whenever you want to use a Flexbox property on your element, first you need to insert the property display:flex (display flex row). Only then will the browser understand that you want this element to be placed based on Flexbox rules.
How does the property work flex-flow from Flexbox?
Flexbox’s flex-flow property works as a shorthand for binding properties flex-direction and flex-wrap. Basically, this property groups what the property does flex-direction with what he does flex-wrap on a single label.
To review your knowledge about these two properties, we recommend you read our posts about the property flex-direction and the property flex-wrap.
Flex-direction determines the direction in which the elements will be arranged in space. This can be from left to right (row), from right to left (row-reverse), from top to bottom (column) or from bottom to top (column-reverse) ( flex-flow flex-direction ). For its part, flex-wrap determines how a container’s child elements will behave when they do not fit within the width of the web page. With flex-wrap: nowrap, elements will ignore their size in order to fit the width. With flex-wrap: wrap, The elements will continue on the next line of the transverse axis. In this way, the behavior of the elements with flex-wrap It depends directly on the main axis chosen in flex-direction.
What the property does flex-flow Flexbox is to unite these options into a single property. So, instead of writing the two properties above, we can simply write, for example, flex-flow: row wrap. Thus, you can create any kind of combinations and have the same effect as writing the two properties.
Do you want to continue learning?
Now that you know how property works flex-flow from Flexbox, It’s time for you to start using this element arrangement system! For this reason, we invite you to our intensive bootcamp Full Stack Web Development Bootcamp. There, among many other things, you will continue learning about all the possibilities that CSS can offer you. In the end, you will be able to design your own website. Don’t miss this opportunity to continue learning and sign up now!