1.9 KiB

Czysty Wina Historia

Using alignments

You can align items inside flex and grid layouts.

Align a component relative to its container with `align-self`

<template v-for="alignment in ['start', 'center', 'end', 'auto', 'baseline', 'stretch']" :key="alignment"

🐌 _ align-self={{ alignment }}

<template v-for="alignment in ['center', 'stretch']" :key="alignment"

🐌 _ {{ alignment }}

Align the content of a component with `align-text`

  <Button align-text="left">🐌</Button>
  <Button align-text="center">🐌</Button>
  <Button align-text="right">🐌</Button>
  <Button icon="bi-star" align-text="stretch">🐌</Button>
  <Button icon="bi-star" align-text="space-out">🐌</Button>

🐌 🐌 🐌 🐌 🐌