Flex 布局试验台

1. 设置布局

宽120–1200、高120–800、主轴尺寸20–600、间距0–100 px，数量1–12，均为整数。项目不增长、不收缩，超出时允许在预览框内滚动。

2. 查看原生布局

主轴为水平从左到右；justify-content控制主轴，align-items控制每一行的交叉轴。多行靠交叉轴起点排列。

CSS

.flex-demo {
  box-sizing: border-box;
  display: flex;
  width: 600px;
  height: 240px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  align-content: flex-start;
  gap: 16px;
  direction: ltr;
  writing-mode: horizontal-tb;
}
.flex-demo > .item {
  box-sizing: border-box;
  flex: 0 0 160px;
  min-width: 0;
  min-height: 0;
  overflow-wrap: anywhere;
  padding: 8px;
  background: #d9eef5;
}

HTML

<div class="flex-demo">
  <div class="item">项目 1</div>
  <div class="item">项目 2</div>
  <div class="item">项目 3</div>
  <div class="item">项目 4</div>
</div>

范围与隐私

固定容器尺寸，项目采用flex: 0 0指定尺寸，不模拟内容自动撑宽或响应式断点。横排尺寸指宽，竖排指高。nowrap会溢出；wrap每行独立分配空间，末行不保证与上一行对齐。stretch在多行时受行高影响，单行时可占满交叉轴。预览使用浏览器原生Flex；复制到其他网页后，字体、全局样式和内容可能改变结果。只导出CSS和示例HTML，不执行输入代码，不上传、不自动保存，无需API或密钥。