如下图所示:

6个banner的父节点,cx-page-slot, 是一个flex container:

this element is causing an element to overflow.

如果去掉display:flex属性,效果如下:

如果保留display:flex, 但是去掉flex-wrap:wrap,效果如下:

flex-wrap默认值是nowrap,即在一条水平线上显示。

  • nowrap (default): single-line which may cause the container to overflow
  • wrap: multi-lines, direction is defined by flex-direction
  • wrap-reverse: multi-lines, opposite to direction defined by flex-direction
    wrap-reverse 的显示效果:

this element behaves like a block element and lays out its content according to the grid model.

In HTML programming, a block-level element is any element that starts a new line (e.g., paragraph) and uses the full width of the page or container. A block-level element can take up one line or multiple lines and has a line break before and after the element.

更多Jerry的原创文章,尽在:“汪子熙”:

SAP Spartacus b2b home页面的自动换行是怎么做到的相关推荐

  1. SAP Spartacus B2B 列表页面的 (i) icon popover Component 的声明位置

    SAP Spartacus B2B 页面的列表页面,一共有 6 个类似 SAP Fiori Language 里的 tile(磁贴): 点击去之后,能看到列表页面有一个绿色 icon 图标,点击之后, ...

  2. SAP Spartacus B2B User 页面的数据读取逻辑设计

    点击SAP Spartacus B2B的Users页面后: 触发selector: 看到user 列表: B2B user模块,从设计上说,位于Spartacus工程项目的feature-libs文件 ...

  3. SAP Spartacus B2B 页面 Disable 按钮的显示原理

    SAP Spartacus B2B 页面 disable 按钮如下图所示. 这个高亮的 disable 按钮,和左边相邻的 Edit 按钮,实现位于不同的 Component. disable 按钮有 ...

  4. SAP Spartacus B2B 页面信息提示图标的弹出窗口显示实现逻辑

    这个弹出窗口的技术实现,通过SAP Spartacus 自定义的popover Component实现而成: 注意,当我刚接触Angular时,误以为下图标号为1的a标签,和标号为2的自定义标签cx- ...

  5. SAP Spartacus B2B OrgUnit 和 OrgUser 的路由映射差异比较

    SAP Spartacus B2B 页面类似 SAP Fiori Launchpad,共有 6 个 tile(磁贴),点击某个磁贴,能跳转到对应的列表页面. 路由映射就是指点击某个 url 之后(例如 ...

  6. SAP Spartacus B2B ListComponent响应回车事件的实现

    SAP Spartacus B2B的List页面: 和回车键事件相关的实现: <cx-table*ngIf="data.values?.length > 0; else empt ...

  7. SAP Spartacus B2B Popover Directive 和 Popover Component 的生命周期管理

    解析 SAP Spartacus B2B list 实现,即list.component.html时,因为在Component 模板里遇到了[cxPopover]指令,因此触发依赖注入: 首先创建di ...

  8. SAP Spartacus B2B table的配置信息的merge原理

    以SAP Spartacus b2b unit table的配置信息为例:位于文件units.config.ts里: 运行时,这些配置信息,被merge在table.service.ts的this.c ...

  9. SAP Spartacus shipping address页面请求2 - Put Address

    注意,这是一个HTTP PUT请求: /occ/v2/electronics-spa/users/current/carts/00008679/addresses/delivery?addressId ...

最新文章

  1. Oracle SQL Developer 的一个Bug
  2. 计算机count的功能是,全国计算机二级Access每日练习4
  3. sdcms的一个bug,总是提示,该文件不允许被上传
  4. (九)OpenStack---M版---双节点搭建---Swift安装和配置(单存储节点)
  5. Enterprise Library 2.0 技巧(4):如何用编程的方法来配置Logging Application Block
  6. 手机能上wifi电脑不行_锦囊在此(电脑手机如何配置使用WIFI)
  7. java mojo是什么_java – 为什么Maven不能找到我的定制Mojo?
  8. PHP Sessions
  9. QQ for Linux 安装和卸载
  10. 微信小程序--几个常用标签
  11. 马克·扎克伯格(Mark Zuckerberg)的第一幅作品成交价为30,201美元
  12. 给IBM的黑科技跪了:量子计算机强势来袭!
  13. A Multi-task Learning Framework for Opinion Triplet Extraction (EMNLP 2020)阅读记录
  14. 还在用电脑多控手机?你out了,手机多控手机,全新神器
  15. 数据页和数据行(第八周翻译)
  16. 2022河南联赛第(二)场:河南理工大学 ---复盘
  17. 音频之PCM与WAV
  18. mysql icp特性_MySQL:关于ICP特性的说明(未完)
  19. 【自动驾驶】高精地图在无人驾驶中的应用
  20. 适配器(Adapter)模式

热门文章

  1. 职业生涯中的愚蠢想法
  2. python json的简单学习
  3. 推荐:偷懒利器 EmEditor
  4. 展望Silverlight 5.0新版本更新与发展
  5. 十几行程序代码搞定 Master-Detail GridView(内含子 GridView)
  6. 引用和指针-内存的分配方式有几种
  7. STM32 的加密实现(转)
  8. 屯题 (bestcoder #62~#75)
  9. [转]jQuery 读取 xml
  10. [redis] 分布式 Redis 的 CRUD 实现