1.6 KiB

Raw Blame History

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.

<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>

Use additional `flexbox` properties

--gap: 4px

align-self: flex-end flex-grow: 1 height: 5rem width: 100%

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