⭐ 0
🔍
文字 图片 PDF 和文档 音频 音乐 电子电路 时间 公用事业 验证者 玄学 游戏

CSS Flexbox 导航栏 - 左侧徽标，右侧链接

直观地构建 CSS Flexbox 布局：flex-direction、justify-content、align-items、flex-wrap 和容器上的间隙，以及每个子项的 flex-grow、flex-shrink 和 flex-basis，所有这些都具有实时预览和可复制的 CSS。

处理中... 0%

结果

此页面打开预设为经典导航栏布局的 Flexbox 生成器：将 justify-content 设置为 space- Between 并将align-items 设置为 center。在第一个框中放置一个徽标，在最后一个框中放置一行导航链接（或将链接拆分到中间的框中），Flexbox 容器将它们推到栏的两端，同时保持每个项目在同一垂直中心对齐，无论徽标或链接文本有多高。

space- Between 是实现此功能的原因：它将第一个子项固定到起始边缘，将最后一个子项固定到结束边缘，然后将所有剩余的子项均匀地分布在它们之间 - 正是几乎每个站点标题使用的左徽标、右链接形状。 align-items: center 然后解决了过去需要行高技巧或表格单元格显示技巧的垂直对齐。

调整子项计数以匹配您的真实导航栏 - 两个框用于裸徽标和 CTA 栏，更多用于徽标和几个链接 - 并观看布局实时调整。一旦 CSS 块与您的标头匹配，请复制该 CSS 块；如果您想查看某个属性与其近亲的比较，则打开预设之间的空格。

🛡️
在浏览器中执行

您的文件和输入永远不会离开此设备。处理完全离线运行。 100% 安全。

接受的格式和规则

  • 容器控件：flex-direction、justify-content、align-items、flex-wrap 和以像素为单位的间隙输入，实时应用于预览。
  • 默认情况下三个颜色编码的子框（添加最多八个，删除两个），每个都有自己的 flex-grow、flex-shrink 和 flex-basis 字段。
  • 可复制的 CSS 块，其中包含 .flex-container 规则以及每个具有非默认 Flex 属性的子项的 .flex-item-N 规则。

主要优点

✓ 每个容器控件和每个子级的 flex-grow、flex-shrink 和 flex-basis 都会实时更新三个编号的预览框，因此您可以在接触样式表之前准确地看到 Flexbox 规则的作用。
✓ 生成器仅打印实际上与 CSS 默认值不同的子规则，因此复制的代码保持简短且可读，而不是在每个框上重新声明 flex-grow: 0。
✓ 预设页面解决了人们按名称搜索的布局：将 div 居中、徽标-左链接-右导航栏和等宽灵活列 - 打开其中一个，工具就已经配置好了。

使用案例

  • • 通过观看 justify-content 和align-items 在实时预览框中的工作情况，获取精确的 CSS 以水平和垂直居中 div。
  • • 构建一个徽标左、链接右的导航栏布局，其中包含 space- Between 和align-items: center，然后将容器 CSS 直接复制到标头组件中。
  • • 在相同的三个盒子上并排比较间距、周围间距和均匀间距，而不是猜测哪一个与您想要的间距匹配。