Back in the ol’ days web developers used HTML tables to style their web pages. Then came along powerful CSS features. Latest in the arena entered Flexbox.
Quasar provides lots of CSS classes to help you deal easily with managing a layout. Long story short, think of it like operating with rows and columns with many options at hand.
The Flexbox Layout (Flexible Box) module (currently a W3C Last Call Working Draft) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”).
The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow.
Most importantly, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based). While those work well for pages, they lack flexibility (no pun intended) to support large or complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.).
Quasar Grid Layout CSS classes apply to either the Container (Parent) or the Container’s items (Children).
One of the following CSS classes is mandatory for the parent in order for the children ones (described in next sections) to have any effect.
|Inline Flex row|
|Inline Flex column|
|Flex row with |
|Flex column with |
You can also wrap content. Use
reverse-wrap classes. By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. Direction also plays a role here, determining the direction new lines are stacked in.
If you explicitly do not want to wrap, use
|Wrap if necessary|
|Do NOT wrap even if necessary|
|Wrap backwards if necessary|
For alignment along the main axis, use classes below. It helps distribute extra free space left over when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.
For alignment perpendicular to the main axis, use classes below. This defines the default behavior for how flex items are laid out along the cross axis on the current line. Think of it as the horizontal-* version for the cross-axis (perpendicular to the main-axis).
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.
|Small gutter between cells|
|Default gutter between cells|
|Big gutter between cells|
|Large gutter between cells|
You can set the order by using
order-i classes, where i is between 1-10. By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container. If you need more granularity, use
order CSS property and assign the desired value.
The width of a column can be set as
width-XofY (where Y is 1 to 5 and X is 1 to Y).
It’s a wrapper over
flex 0 1 X%.
width-1of3 for a 33% width for the cell.
sm-width-1of3 when on a narrow screen only.
auto makes the cell expand to the remaining unused width.
There’s also the possible to offset a cell with
offset-XofY. Example: ‘offset-1of3’,
sm-offset-1of3 (when on narrow screen only),
offset-0 (for no offset, useful when using different offsets based on screen size).
An item can grow if it’s enough space available by using
grow-i classes, where i is between 1-10. This defines the ability for a flex item to grow if necessary. It accepts a unit-less value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.
If all items have
grow-1 class, the remaining space in the container will be distributed equally to all children. If one of the children has
grow-2, the remaining space would take up twice as much space as the others (or it will try to, at least).
An item can shrink if necessary by using
shrink-i classes, where i is between 1-10.
An item can override the aligned specified on parent. This allows alignment to be overridden for individual flex items. Please see the Alignment explanation from Parent Classes to understand the available values (
An item can be displayed or not based on the width of the screen. The following list displays prefixes (can be used as standalone too!) that you can use for all of the above CSS classes.
|Display only on small windows|
|Display only on medium-sized windows|
|Display only on big windows|
|Display only on large windows|
|Display only on lower than medium windows|
|Display only on lower than big windows|
|Display only on lower than large windows|
|Display only on greater than small windows|
|Display only on greater than medium windows|
|Display only on greater than big windows|
One more example:
Prefixes also work with
offset-XofY, on gutters and so on.
What does small, medium, big or large windows mean? Check CSS > Visibility page to see thresholds on window width.