Quasar Flexbox

官网文档

Quasar Flex CSS classes apply to either the Container (Parent) or the Container’s items (Children).

Quasar的flex样式同时对父组件和子组件生效

方向

row

column

row inline

column inline

row reserve

column reserve

关于wrap

子组件过多超出父组件时是否自动另起一行或一列

默认自动wrap

可设置属性：

no-wrap

reverse-wrap

关于对齐Alignment

 

关于self-alignment 单独对齐

An item can override the aligned specified on parent

主要属性 self-start, self-center, self-baseline, self-end, self-stretch

 

关于size

尺寸比例

最大为12

col-5，col-3

大于12时会根据wrap情况决定是否自动另起一行或一列

 

关于order

最小的排在最前面

class="order-first"

class="order-last"

style="order: 1"

关于响应式设计Responsive Design

响应式适配

可根据窗口最大宽度进行选择不同的宽度占比