Please see the “Alignment” explanation from “Managing Parent” to understand the available values ( self-start, self-center, self-baseline, self-end, self-stretch). This allows alignment to be overridden for individual flex items. Self AlignmentĪn item can override the aligned specified on parent.

Should you wish to disable this, use the no-wrap CSS helper class. (with col-10 only, since it was wrapped to its own line). Note that we take into consideration the current line only 12, so next element wraps to next line ->. This allows you, among other things, to dynamically stack rows vertically on smaller screens while displaying them on a single line on bigger screens. You are not bound to use exactly 12 points per row.

Wrapping is a key feature in understanding Flex CSS classes. For example: offset-4 offsets a third of space (4/12 = 1/3 = 33%). col, on the other hand, tries to fill all space available while also shrinking if needed.ĬSS helper class col-grow makes the cell fill at least the space it needs to be rendered, with the possibility to grow when more space is available.ĬSS helper class col-shrink makes the cell fill at most the space it needs to be rendered, with the possibility to shrink when not enough space is available.Īnother example with a visual representation below it: 1 1 1 1 2 1 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. There is also the convenience flex-center CSS class which is equivalent to items-center + justify-center.

Inline flex center