por Determining the size of an HTML element using CSS measurement units is not always an easy task. Although over time we can become experts in measurements, the reality is that we almost always need trial and error to insert the exact value that gives us the size we want. For this reason, many designers use relative or flexible sizes. This type of design means that the elements do not depend on an exact value, but rather on the relationship with other elements or with their own content. In this post we will teach you how to use the property flex-basis Flexbox to determine the initial size of a flex element.
How does Flexbox’s flex-basis property work?
The property flex-basis of Flexbox helps us determine the initial size of an element to which we will apply the properties of flex-grow I flex-shrink. These two properties allow us to make an element grow to fill the excess space in its container or shrink to allow other elements to fit when the container is smaller. Typically, growth or shrinkage is based on a size assigned with the property width either height. However, the property flex-basis Flexbox helps us define the initial size of our flexible element taking into account other characteristics.
When inserting a number into the property flex-basis of Flexbox, we are defining the length of the element on the main axis determined with flex-direction. Even so, we can also insert the following options or keywords:
car: It is the default option in flex-basis and determines that the browser should use the size values width either height to generate the size. The browser will look for the value that affects the size of the element on the main axis(width if it is row, height if it is column). content: determines the size taking into account the content of the element. If we have text inside the element, it will adjust its size on the main axis to this text.
How do I group flexible size properties?
You now know how to use the property flex-basis from Flexbox! We also know that we can use it together with the properties flex-grow and flex-shrink to create an HTML element that adapts its size to the needs of the space and its content. But, if it is so common to use these properties together, do we have to insert each value individually every time we want to create a flexible HTML element? The answer with Flexbox is clear: no! Flexbox entered the world of web development to make design easier and for this reason it has created the property flex.
Flex is short for properties flex-grow, flex-shrink and flex-basis. Like flex-flow for properties flex-direction and flex-wrap, the property flex It allows us to unite these three properties in a single label to modify the size of our elements. Then, we will only need to insert the three values we want, one for each property. The first number will be for flex-grow, the second for flex-shrink and the third for the property flex-basis Flexbox. Whatever value we put in our first number will automatically define the next two properties, so giving a value to the last two is optional.
We recommend using the abbreviation flex instead of inserting each property individually, because this will define the values that you do not insert intelligently and automatically.
Do you dare to continue learning?
Now that you know how to use the property flex-basis Flexbox to create flexible elements along with flex-grow and flex-shrink, Do you want to put these properties into practice and continue learning? If your answer is yes, we invite you to our Full Stack Web Development Bootcamp. There, in addition to continuing to learn about the world of web development and its programming languages, you will create and design your own website with the help of our teachers. In the end, You will be an expert in web development! Don’t hesitate to sign up!