In the example above, col-8 fills two thirds (2/3) of the row width, because 8/12 = 2/3 = 66%, while col-2 occupies one sixth (2/12 = 1/6 ~ 16.67%).ĬSS helper class col-auto makes the cell fill only the space it needs to be rendered. Here are some examples of the available CSS helper classes: two thirds one sixth auto size based on content and available space fills remaining available space

Quasar uses a 12 point column system for distributing the size of row children. The next classes align a flex container’s lines within when there is extra space in the cross-axis, similar to how horizontal-* aligns individual items within the main-axis. I provide here the Codepen for you to play around with.There is also the convenience flex-center CSS class which is equivalent to items-center + justify-center. This value is barely used and we only can see the effect when we have elements with text in them. It aligns the items based on the first line of texts to be in line with each other. Usually, it is used if we need to reset or override an applied value.

It stretches the height of the items based on the highest item. This is the default value of align-items. It aligns the items on the bottom (end) of the flex container. It aligns the items vertically on the center of the flex container. ⭐ This value is used most often to control the vertical position of flex items. It aligns the items on the top (start) of the flex container, and the height of each item is maintained as it is. By default, flex is stretching the height of the items based on the highest item.īut when we need to, we can control the vertical position ( cross axis) of the items with align-items.Ĭontrolling The Vertical Position of Flex ItemsĪlign-items property is good to be applied when we have an element that has background color/shadow/borders so we can see the effect.

Display flex align