创建完美的 Flexbox 布局
使用直观的拖放界面可视化、自定义并生成 CSS 弹性盒代码。
Container Properties
Item Properties
3 items
Preview
Item 1
Item 2
Item 3
.flex-container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; } .flex-item { /* Default item styles */ flex: 0 1 auto; order： 0; align-self: auto; }
生成的 CSS 代码
流行的 Flexbox 预设
水平居中
Content
最适合将徽标、按钮或任何元素水平居中或垂直居中。
等间距
Item 1
Item 2
Item 3
利用空格-间距（space-between）或空格-环绕（space-around）在元素之间创建等间距。
垂直菜单
Home
About
Contact
利用一致的间距和对齐方式创建垂直导航菜单。
响应式网格
Box 1
Box 2
Box 3
Box 4
Box 5
创建响应式网格布局，根据可用空间将项目包裹起来。
英雄横幅
主标题
带有行动号召的英雄部分
设计带有标题、副标题和行动号召按钮的英雄横幅。
页脚布局
Company
About Us
Careers
Support
帮助中心
联系我们
© 2023 Flexbox 生成器
建立一个响应式页脚，在较小屏幕上可堆叠列。
真实世界示例
导航栏
Logo
Home
Products
About
Contact
常见的导航栏布局，徽标位于左侧，菜单项位于中间，购物车图标位于右侧。
Card Grid
卡片标题
此处的卡片描述文本
卡片标题
此处的卡片描述文本
卡片标题
此处的卡片描述文本
利用 flexbox 属性适应不同屏幕尺寸的响应式卡片网格。
文章布局
文章标题
发布于 2023 年 1 月 1 日 - 5 分钟阅读
这里是文章内容。 这可以是简短摘要，也可以是文章全文。
一种常见的文章布局，左侧为图片，右侧为文字内容，在移动设备上堆叠排列。
仪表板布局
Header
Sidebar
主要内容
Footer
一种仪表板布局，包含页眉、侧边栏、主要内容区域和页脚，使用 Flexbox 进行水平和垂直对齐。
Flexbox 基础知识
什么是 Flexbox？
灵活盒式布局，通常称为 Flexbox，是一种 CSS3 布局模型，它提供了一种在容器中的项目间分配和对齐空间的有效方法，即使这些项目的大小未知或动态。
柔性布局背后的主要理念是赋予容器改变其项的宽度/高度（和顺序）的能力，以最好地填充可用空间（主要是为了适应各种显示设备和屏幕尺寸）。
关键概念：Flexbox 引入了两个主要概念：柔性容器 and the 柔性项 。 容器是父元素，项是其直接子元素。
主轴与横轴
Flexbox 布局基于两个轴：main axis and the 横轴.
-
主轴：主轴：用于布置柔性项目的主轴。 由
flex-direction. - Cross Axis（十字轴）定义：与主轴垂直的轴。其方向取决于主轴方向。 其方向取决于主轴方向。
主轴 →
← 横轴
Start
Main
End
容器属性
| Property | Description |
|---|---|
display |
定义一个弹性容器；根据给定的值，可以是行内或块级元素。 |
flex-direction |
确定主轴，从而定义弹性项在弹性容器中的排列方向。 |
flex-wrap |
默认情况下，所有弹性项都会尝试排列在同一行上。您可以通过此属性更改默认行为，允许弹性项根据需要换行。 |
justify-content |
沿弹性容器当前行主轴对齐弹性项。 |
align-items |
沿弹性容器当前行交叉轴对齐弹性项。 |
align-content |
当交叉轴存在额外空间时，对齐弹性容器内部的行。 |
项属性
| Property | Description |
|---|---|
order |
默认情况下，弹性项按源顺序排列。然而，order属性控制它们在弹性容器中出现的顺序。 |
flex-grow |
定义弹性项在必要时扩展的能力。它接受一个无单位的值，作为比例。 |
flex-shrink |
定义弹性项在必要时缩小的能力。 |
flex-basis |
定义在根据弹性因子分配可用空间之前，弹性项的初始大小。 |
align-self |
允许覆盖默认对齐方式（或由align-items指定的对齐方式）以对单个弹性项进行自定义。 |