Skip to content

🡔 Layout

Layout flex

Items are laid out in a row and wrapped as they overflow the container. By default, all items in a row assume the same (maximum) height.

template
<Layout flex>
  <Card title="A" style="width:100px; min-width:100px"></Card>
  <Card title="B" :tags="['funk', 'dunk', 'punk']"></Card>
  <Card title="C" style="width:100px; min-width:100px"></Card>
  <Card title="D"></Card>
</Layout>
A
B
C
D

Use additional flexbox properties

--gap: 4px

Find a list of all styles here: Flexbox guide on css-tricks.