Flexbox 游乐场

一个交互式工具，用于可视化学习和测试 CSS Flexbox 属性。调整容器和项目设置，同时自动生成 Pure CSS、Tailwind CSS 和 SCSS 代码。

使用方法

使用容器属性调整 Flexbox 基本设置

添加或删除项目来查看预览

设置单个项目的属性

复制生成的 CSS、Tailwind 或 SCSS 代码

主要功能

实时预览显示

支持所有 Flexbox 属性

生成 Pure CSS、Tailwind CSS 和 SCSS 代码

动态添加和删除项目

响应式预览支持

选中的项目

3 items

容器属性

Layout Basics

Display

Flex Direction

Alignment

Justify Content

Align Items

Advanced

Flex Wrap

Align Content

Gap

项目属性

Item 1

Flex Properties

Flex Grow

Flex Shrink

Flex Basis

Position

Align Self

Order

预览

Live Preview

Item 1

Selected

Item 2

Item 3

Direction:
row

Justify:
flex-start

Align:
stretch

Wrap:
nowrap

生成的代码

Pure CSS

/* Container Styles */
.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 8px;
}

/* Item Styles */
.flex-item-1 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

.flex-item-2 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

.flex-item-3 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

常见问题 (FAQ)

Flexbox 是 CSS3 中引入的一种布局方法。它提供了在容器内灵活排列和对齐项目的功能，非常适合响应式设计。

justify-content 控制主轴方向的对齐，而 align-items 控制交叉轴方向的对齐。当 flex-direction: row 时，justify-content 影响水平对齐，align-items 影响垂直对齐。

flex-grow 设置填充可用空间时的增长率，flex-shrink 设置空间不足时的收缩率，flex-basis 设置初始大小。这些可以使用 flex 简写属性组合使用。

Tailwind CSS 使用实用程序类，如 flex、flex-row、justify-center 和 items-center 来实现 Flexbox 布局。您可以直接使用此工具生成的类名。

Flexbox 根据屏幕大小自动调整项目位置。使用 flex-wrap 和 flex-direction，您可以为不同设备实现最佳布局。