我已经写了声明 display: flex 数不清的次数,偶尔还是会忘记是否如此 justify-content 或 align-items that 连续控制垂直轴。那不是无知;它是一个布局模型的诚实现实,其行为会根据情况而翻转 flex-direction.当方向为 row、 justify-content 水平工作。切换到 column and same property now works vertically。anyone who claimed they never open the browser dev tools to nudge these values until the box land where they want is or lying or has a much better memory than mine。
的 柔性盒生成器 是我希望在学习这个模型时拥有的工具,以及当我想在不触摸样式表的情况下原型布局时我仍然触及的工具。您设置容器属性,一排示例框实时回流,生成您所看到内容的确切 CSS 坐落在下面一个可复制框中。它会转动"记住哪个属性执行什么"进入"单击直到它看起来正确,然后读出答案。"
TL;博士: Flexbox 是一个一维布局模型, 容器驱动它通过六个属性:
flex-direction、flex-wrap、justify-content、align-items、align-content、和gap。这个生成器全部曝光,显示实时预览,并发出干净的CSS。因为预览渲染的声明与它输出的声明相同,所以你看到的正是你粘贴的。它完全在你的浏览器中运行,没有注册。
Flexbox 生成器解决了什么问题?
Flexbox 之所以强大,正是因为它是相对的,你描述意图("将这些项目之间以相等的空间展开," "将此集中在两个轴上"),浏览器计算像素。但相对的系统很难在你的脑海中保持,因为每个属性的效果取决于其他属性的状态。 align-content zhi物包裹前什么都不做, 改变方向时主轴和横轴互换。 space-between 並 space-around 看起来很相似,直到你并排比较它们。
1个相干系统建立直觉最快的办法是操纵它并观看,1个生成器将编辑-保存-刷新循环折叠成1个交互:换下拉,看箱子移动,经过10分钟的实时预览,控制十字轴的属性停止是你记忆的事实,变成你感受到的,并且当你完成探索时,你没有留下心灵笔记来转录;正在工作的CSS已经为你写好了。
容器控制哪些属性?
Flexbox 将责任分给容器和它的物品,容器决定整体安排,而那是生成器关注的地方,因为它是大多数布局决策的所在,以下是每个容器属性所做的事情。
| 财产 | 它控制什么 | 共同值 |
|---|---|---|
flex-direction |
主轴及其方向 | row、 column、 row-reverse、 column-reverse |
flex-wrap |
项目是否溢出到新行 | nowrap、 wrap、 wrap-reverse |
justify-content |
沿主轴的间距 | flex-start、 center、 space-between、 space-evenly |
align-items |
定位在横轴上 | stretch、 center、 flex-start、 baseline |
align-content |
交叉轴上缠绕线的间距 | stretch、 center、 space-between |
gap |
物品之间的空间 | 例如,任何长度 16px |
Zhe根棒的心智模型,就是规范中的两轴思路,物品沿主轴流Li,其中 flex-direction sets。十字轴总是垂直于它。 justify-content 在主轴上分配空间; align-items 横轴上的位置。一次 flex-direction 於 column的,主轴是垂直的,所以 justify-content 现在将项目从上到下堆叠起来 align-items zuo向右摆放。属性什么都没有改变;轴在它们下面转动。
如何用 Flexbox 集中 div?
这是搜索次数最多的 flexbox 问题,答案是三行。将容器设置为 display: flex那么 justify-content: center 並 align-items: center。 将子轴同时居中在主轴和十字轴上,对于默认行来说,这意味着水平和垂直的死点。
在生成器中,您选择 center 对于对齐控件和示例框, 都会跳转到预览区域的中间。然后输出框显示:
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
这个食谱值得通过单击而不是记忆来构建的原因是,当您的要求发生轻微变化时,例如您希望项目固定在顶部但水平居中,您更改一个下拉并查看结果,而不是猜测哪一个需要编辑的两个属性。
对齐内容什么时候重要?
align-content is 属性人设置然后想知道为什么什么都不会发生答案在规范中:只在有多行flex项时影响布局。与 flex-wrap: nowrap(e),每一项都坐在一行上,因此没有一组行可以分配,性质是惰性的。
生成器对这条规则进行编码,这样您就不会被它误导。当包裹关闭时, align-content control 被禁用,生成的 CSS 完全省略了属性,打开包装就变得活跃起来,你可以观看它将成排的包装物品推到一起,或者在十字轴上分开,只有当它做某事时才发出属性,这才使输出保持诚实:复制规则中的每个声明都是一个对你的布局有明显影响的声明。
合理内容值之间有什么区别?
的 justify-content 关键词是实时预览赢得保留的地方,因为差异是空间性的,很难用散文来描述。 flex-start 在主轴的起点包装物品。 center 将它们包装在中间。 space-between 将第一项和最后一项推到边缘,并将剩余空间平均分配给其他项目,因此外边缘没有空间。 space-around 为每个项目两侧提供相等的空间,这意味着两个项目之间的间隙是边缘间隙的两倍。 space-evenly 使每个间隙相等,包括边缘。
读那段话几乎什么都教不教,点击屏幕上五个框的五个值,秒教你,你永远不会混淆 space-between 与 space-around 再次,一旦您并排看到边缘行为。这就是通过操作而不是通过记忆来构建布局的论据,并且保持一组可视化 CSS 工具的关闭背后的论据是相同的: 梯度生成器 和 盒影生成器 existing 出于同样的原因,因为渐变和阴影也比盲写更容易用眼睛拨入,组装那种工具包的更广泛案例就在这件作品上 web开发人员工具包。
Flexbox 还是 CSS 网格?
这个问题不断出现,认为这是竞争的框架就是错误 Flexbox 是一个维度:它沿着单个轴放置项目,告诉时进行包装,并且它擅长于您希望浏览器协商大小的行工具栏、导航栏、按钮组和卡行,这些都是自然的 flexbox 作业 CSS Grid 是二维的:它将行和列控制在一起,并且它擅长于您想要显式轨道的页面级结构。
在真实的项目中,它们不断嵌套。网格定义页面区域,而 flex 容器将项目排列在其中一个区域内。彻底学习 flexbox 不会使网格冗余,反之亦然;它使您能够流利地使用适合每个作业的生成器,这是一种快速达到一维情况流畅性的方法,一旦容器属性成为第二性质,手动读取和写入 flex 布局就不再需要参考。
如何使用 Flexbox 生成器?
该流程反映了您对布局的看法。
- 选择
flex-direction以及物品是否应该包装。这设定了轴和溢出行为,这两个决定其他一切都取决于。 - 设置对齐方式。调整
justify-content在主轴线上和align-items在十字轴上,直到预览与您头脑中的排列相匹配。 - 调音间距。设置
gap在带有滑块的项目之间以及包装开启时,设置align-content为线条留出空间。 - CSS 复制。生成的规则针对的是 a
.containerclass和更新live。一键复制,粘贴到你的样式表中。
您还可以添加或删除预览项目来测试布局在不同内容下的行为方式。 A space-between navbar 在三件物品上看起来不错,在七件包裹物上看起来非常不同,并且在观看时能够改变计数是您在制作之前捕捉到的方式。
间隙是否取代了间距的边距?
Da部分,是的,而且是真正的改进,以前 gap 采用柔性容器支撑,间隔物品意味着为每个孩子添加边距,然后与第一个或最后一个孩子上的额外边距(通常使用 a)进行战斗 :last-child 覆盖或对母公司负利润。 gap 直接设置项目之间的空间,在缠绕的线之间应用,并且在外边缘上不添加任何内容,因此整类边缘错误都会消失。
生成器处理 gap 为像素滑块的一流控制,并且它省略了间隙为零时的声明,因此输出保持最小,对于生产工作, gap on flex容器在当前浏览器中得到了很好的支持,因此很少有理由回溯到保证金方法,如果您在工作时正在转换单位之间的间距值,则 CSS单元转换器 处理 px 到 rem 没有计算器的算术。
生成的 CSS 有哪些限制?
生成器生成容器规则。它不会像设置每个项目的属性 flex-grow、 flex-shrink、或者 flex-basis的,它控制单个项目如何扩展和收缩来填充空间,那些是项目级别的决策,取决于您的具体内容,对于大多数布局,容器属性加上 flex: 1 on 应该增长的物品就是你所需要的,当你确实需要精细的每件物品控制时,生成的容器规则仍然是建立在正确的基础之上。
Out 使用标准、未修复的属性,对于那些已经失去支持的浏览器,需要使用 Flexbox 的供应商前缀,因此现代样式表不应该携带它们,而今天添加它们是噪声,生成的 CSS 已经准备好生产,如所写,这就是重点:你留下一个可以粘贴的规则,而不是你必须完成的起始草图,对于更广泛的一组小型实用程序,使前端工作更快,这个概要 开发人员生产力工具 是一个好伴侣,就像 梯度生成器导轨 如果视觉 CSS 是您想要加速的部分。
我可以用它构建哪些常见布局?
1把食谱涵盖了大部分的flexbox日常工作,每个都是生成器中的几下,左边有logo,右边有链接的导航栏是 justify-content: space-between 与 align-items: center on a row。完美居中的英雄,经典"页面居中一个框,"是 justify-content: center 並 align-items: center.形式场的一个垂直堆栈是 flex-direction: column 着一个 gap 为一致的间距,这比每个字段上的边距更干净。在窄屏幕上将一排响应式卡片包裹到新行是一排 flex-wrap: wrap 和一个 gap那么 flex: 1 在卡片本身上,它们会长起来填满行。
在生成器中构建这些而不是从内存中复制它们的价值在于,您立即看到边缘情况。 A space-between navbar只有一个项目将该项目固定到开头,在你理解之前,它可能看起来像一个错误 space-between has nothing to distribute with a single item。a 包装卡行在两张卡对六张卡上的行为不同,并且预览's可调项目计数让您在发货前检查两者。通过操作构建布局意味着令人惊讶的案例表面,而您仍在工具中,而不是在用户报告它们之后。
一旦食谱在你的手指中,你就不再需要生成器了,直接写五行。那是健康的结束状态。该工具既是老师又是制作人:您通过点击构建的每个布局都是您下次手写时更了解的布局,这正是良好的视觉实用程序应该如何使自己逐渐不再需要基础知识,同时又可以方便地处理繁琐的案例。
常问问题
什么是 CSS 灵活盒生成器?
CSS flexbox 生成器是一种可视化工具,可让您设置 flex 容器属性并复制生成的 CSS。您调整 justify-content、对齐-items、方向、包装和间隙,查看实时预览,并将生成的规则粘贴到样式表中。
如何用 Flexbox 集中 div?
将容器设置为显示:flex,然后justify-content:center 和align-items:center。将项目集中在主轴和横轴上。在此工具中,选择 center 来进行对齐控件并复制 CSS。
合理内容和对齐项目有什么区别?
justify-content 沿着主轴分布项目,主轴对于行是水平的,对于列是垂直的。对齐项目将项目定位在横轴上,垂直于主轴。改变弯曲方向交换,每个轴控制哪个轴。
对齐内容何时产生影响?
align-content 仅当项目包裹到多于一行时才会影响布局,因为它会在交叉轴上将这些行间隔开。将 flex-wrap 设置为 nowrap 时,只有一行,因此属性不执行任何操作,并且此工具会从输出中省略它。
Flexbox 中的间隙属性有什么作用?
gap 在 flex 项目之间设置一致的空间,而不会给每个项目添加边距,它适用于同一行上的项目之间以及包裹线之间,并且避免了基于边距的间距所产生的边距问题。
Flex 和内联 Flex 有什么区别?
display:flex使容器成为块级盒子,它采用完整的可用宽度display:inline-flex使它成为位于文本流中的内联级盒子,并且仅与其内容一样宽,而两者都以相同的flex规则来布局他们的孩子。
Flexbox 是否取代了 CSS 网格?
No。Flexbox是单轴铺设物品的一维模型,非常适合工具栏、导航、卡片行,CSS Grid是行列在一起的二维,它们是互补的,经常用于相同的布局。
生成的 CSS 在生产中使用安全吗?
是的。每个现代浏览器都支持 Flexbox,该工具会发出标准、未修复的 CSS 属性。所有处理都发生在您的浏览器中,因此一旦加载,就不会上传任何内容,工具会离线工作。
