That’s because flex-grow is not an absolute value - it’s a relative value. Well, here’s what it looks like if we set the flex-grow of each square to 999: The confusing part about flex-grow, however, is what the value actually means. The squares collectively take up the entire width of the container, with the space evenly distributed among them. What does that mean? Well, let’s try incrementing flex-grow to 1 for every square: That means the squares are not allowed to grow to take up the space in the container. Now, when it comes to the property called flex-grow, the default is 0. Now we’re going to get a bit more complex.įirst, let’s set all our squares to the same width, 120px: Flex-basis thus alternately determines width or height, depending on flex-direction. Note that we had to switch from setting the height manually to setting the width. Let’s see what happens when we keep our flex-basis the same, but switch the direction of our main axis: What makes flex-basis unique from width, however, is that it corresponds to our good ol’ flex axes:įlex-basis affects an element’s size across the main axis. In the below GIF, this means it is interchangeable with the width property: It’s actually quite straightforward.įlex-basis controls the default size of an element, before it is manipulated by other Flexbox properties (more on that later). Our first property is, in my opinion, one of the least well-explained properties in Flexbox tutorials.īut - don’t worry. ![]() This time, we’re exclusively going to examine sizing applied to child elements. In the last article, we mostly looked at properties that apply to container elements.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |