如果你看到本段文字，说明该页面未正常加载全局JS，部分功能无法使用，请点击 刷新 重新加载页面。
如果打开页面显示缩略图创建出错，请点击刷新或页面右上WIKI功能中的刷新按钮清除页面缓存并刷新，如果还有问题，请多尝试几次。
全站通知：

模板:Flex布局

来自碧蓝航线WIKI_BWIKI_哔哩哔哩
跳到导航 跳到搜索


简述

将图片和少量文字塞进多个容器内，生成美观而和谐的自适应图文布局。

代码

完整模板

{{Flex布局|布局开始}}
{{Flex布局|内容区|图片=|标题=|内容=}}
{{Flex布局|布局结束}}

不完整模板（显示效果更好）

{{Flex布局|布局开始}}
<li class="item">
[[File:图片.jpg|150px]]<div class="flex-title">标题</div>
<!-- 内容 -->
</span></li>
{{Flex布局|布局结束}}

示例

上下文间距测试
上下文间距测试


  • 碧蓝航线TV动画 Z23角色曲vol.5封面图.jpg
    完整模板
    演唱：Z23（CV：阿部里果）

    发售日期：2019/11/20
    商品编号：XNST-10007
    价格：1200日元


  • 碧蓝航线TV动画 Z23角色曲vol.5封面图.jpg
    不完整模板

    演唱：Z23（CV：阿部里果）
    发售日期：2019/11/20
    商品编号：XNST-10007
    价格：1200日元


    • 上下文间距测试
    上下文间距测试

    取自“https://wiki.biligame.com/blhx/index.php?title=模板:Flex布局&oldid=128907”