jpanel网格布局添加滚动条_用后端的思维来写布局排版

我是一名后端程序员，我学不会 css。花40美元买本 https://every-layout.dev/ 之后，我想了一种写法来表达前端的布局排版。前端大神们可以退散了

布局原语

vant 里有一个 vant-cell 的组件

这样的布局组件很有用，但是用途非常单一。只能用于左边显示一个label，右边显示一个value，中间留白的情况。用这样的布局组件会导致开发者需要记忆大量的布局组件的名字和布局排版效果的对应关系。我希望像我这样的 css 无能者也能够通过记忆一些简单的布局组件来实现”布局不求人“的效果。虽然这样排版写得很机械，一点也不优雅，不语义化，但是 just works。

布局组件包括（均未实现，仅靠想象）：

• Flex Formatting Context
  • Row：x轴
  • Col：y轴
  • Box：参与 x，y布局时候的宽高占位
• Block Formatting Context
  • Overlay：z轴
• Inline Formatting Context
  • RichText/Span：流式文本布局
• media query：不用组件实现，用 javascript 写，走 react 重渲染的模式

下面是对 every-layout 中的布局的枚举

• Row 布局
  • list of links：Row 的 gap 属性，overflow="wrap"
  • dock to left & right：Row & spacer Box
  • row center：Row & 双 spacer Box
  • media object：minWidth Box
  • sidebar media object：Row折行控制一
  • product list：Row 折行控制二
  • product grid：Row 折行控制三
  • inline form：同 sidebar
  • input group：Row 的 overflow="shrink"
  • reel images：Row 的 overflow="scroll"
  • label with a visual cue：Row 的 inline 属性
• Box 包装
  • padding & border：Box 突出内容
  • auto width：Box维持图片本身的宽高比
  • aspect ratio：Box按指定宽高比裁切
• Column 布局
  • stacked inputs：Col 的 gap 属性
  • splitting the stack：Col & spacer Box
  • column center：Col & 双 spacer Box
• Overlay 布局
  • viewport modal：无 confined
  • obscured content：confined="both"

list of links

宽度足够的时候是这个样子

宽度不够的时候是这个样子

理想的写法

<Row>
  <ul><li>Layout</li><li>CSS</li>...</ul>
</Row>

Row 默认的行为就是宽度不够了之后自动换行。默认有一个 1em 的 gap。如果要调整 gap：

<Row gap="2em">
  <ul><li>Layout</li><li>CSS</li>...</ul>
</Row>

Row 有默认的 gap，就不需要在每个子元素上设置 margin 之类的东西来保持两个子元素之间的间距了。

dock to left & right

宽度足够时候的样子