por Flexbox is a relatively new element arrangement system that allows us to place elements on our website in a more comfortable and faster way than classic positioning. In this post, we present its main function: the flex-direction property of Flexbox.
How does Flexbox work?
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 items). In general, properties that affect containers tend to be inherited by children. However, a property inserted into a child can override the parent’s rule. If you want to know which properties affect which element, we invite you to review this complete Flexbox guide.
Remember that, whenever you want to use the Flexbox system, you must add the display:flex property to your container. This property tells the browser that the element will follow Flexbox rules for placement.
What does the flex-direction property of Flexbox do?
The flex-direction property of Flexbox is part of the properties that allow us to modify the containers or flex container. As you can see in more depth in our post on advanced positioning with Flexbox, This system of arrangement of elements does not speak in terms of Axis y either X axisbut in terms of main axis and transverse axis.
The flex-direction property of Flexbox allows us to determine what the main axis of our container is so that we can play with the direction of the elements either flex items inside the container.
In principle, Flexbox is a one-way element layout system. Therefore, it is useful for us to think of our elements as being arranged in horizontal rows or vertical columns. If we take these two options as a starting point, we find four possible directions for a container.
row: This option determines that the elements will be sorted from left to right.
row-reverse: This option means that the elements will be sorted from right to left.
column: This option defines that the elements will be sorted from top to bottom.
column-reverse: This option tells the browser that elements will be sorted from bottom to top.
You can see how this property works on your elements directly from the browser’s inspector. Just by clicking on the label flex In the inspector’s item bar, the same browser creates a border that selects the container and stripes the white space. Additionally, it creates a dotted border for each element, allowing you to analyze which element the style is being generated on. But what’s even more interesting about the compatibility between Flexbox and the inspector is that You can transform the direction of your elements directly from the styles section of the inspector. Just one click on the flex icon is enough to choose between columns and rows in the property flex-direction from Flexbox.
Do you dare to continue learning?
Now that you’ve had this introduction to property flex-direction from Flexbox, We are sure that you can’t wait to continue learning about all the possibilities that this system has at your disposal. At we know that, with every post you read about web development, your desire to learn grows. Therefore, we recommend taking a look at our intensive bootcamp Full Stack Web Development Bootcamp. There you will continue learning, among many other things, about programming languages for web development. In a few months, you will be an expert in this area of the IT sector and you will be able to fulfill your dream of being a professional web developer. Feel free to request more information and sign up now!