布局

Display 显示

块级、flex、grid、inline 等显示模式。

块级与行内

block 独占行 inline-block inline

<div class="pvs-flex pvs-gap-4 pvs-flex-wrap pvs-items-center">
  <span class="pvs-block pvs-p-2 pvs-border pvs-bg-surface-muted">block 独占行</span>
  <span class="pvs-inline-block pvs-p-2 pvs-border">inline-block</span>
  <span class="pvs-inline pvs-p-2 pvs-border">inline</span>
</div>

Flex 与 Grid

flexB

gridBC

<div class="pvs-stack pvs-gap-3">
  <div class="pvs-flex pvs-gap-2 pvs-p-3 pvs-border">
    <span class="pvs-p-1 pvs-border">flex</span>
    <span class="pvs-p-1 pvs-border">B</span>
  </div>
  <div class="pvs-grid pvs-p-3 pvs-border" style="--pvs-grid-columns:3;--pvs-gap:0.5rem">
    <span class="pvs-p-1 pvs-border pvs-bg-surface-muted">grid</span>
    <span class="pvs-p-1 pvs-border">B</span>
    <span class="pvs-p-1 pvs-border">C</span>
  </div>
</div>

行内 Flex

文字里标签inline-flex 不换段

<p class="pvs-m-0">文字里 <span class="pvs-inline-flex pvs-gap-1 pvs-items-center pvs-p-1 pvs-border">
  <span class="pvs-badge">标签</span>
  <span class="pvs-text-sm">inline-flex</span>
</span> 不换段</p>

隐藏

可见隐藏不占位后续文字

<p class="pvs-m-0">可见 <span class="pvs-hidden">隐藏不占位</span> 后续文字</p>

表格显示（少用）

cell Acell B

<div class="pvs-table pvs-border">
  <div class="pvs-table-row">
    <span class="pvs-table-cell pvs-p-2 pvs-border">cell A</span>
    <span class="pvs-table-cell pvs-p-2 pvs-border">cell B</span>
  </div>
</div>

响应式

移动优先；在类名前加 sm: md: lg: xl:，仅在该断点及以上生效。详见响应式。

块md:flex

<div class="pvs-block md:pvs-flex pvs-gap-3 pvs-p-3 pvs-border pvs-bg-surface-muted">
  <span>块</span>
  <span>md:flex</span>
</div>

类名速查

类	样式
`pvs-block`	display: block
`pvs-inline-block`	inline-block
`pvs-inline`	inline
`pvs-flex`	flex
`pvs-inline-flex`	inline-flex
`pvs-grid`	grid
`pvs-hidden`	none
`md:pvs-flex`	响应式 flex