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

Spartacus标准开发 同时被 2 个专栏收录
700 篇文章 4 订阅
518 篇文章 5 订阅

如下图所示:

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的原创文章,尽在:“汪子熙”:

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

4.3 一行一个语句 每个语句后要换行。 4.4 列限制:80或100 一个项目可以选择一行80个字符或100个字符列限制,除了下述例外,任何一行如果超过这个字符数限 制,必须自动换行。 例外: 1. 不可能满足列限制行(例如,Javadoc中一个长URL,或一个长JSNI方法参考)。 2.  package和import语句(见3.2节和3.3节)。 3. 注释中那些可能被剪切并粘贴到shell中命令行。 4.5 自动换行 术语说明:一般情况下,一行长代码为了避免超出列限制(80或100个字符)而被分为多行,我们称之为自 动换行(line­wrapping)。 我们并没有全面,确定性准则来决定在每一种情况下如何自动换行。很多时候,对于同一段代码会有好 几种有效自动换行方式。 Tip: 提取方法或局部变量可以在不换行情况下解决代码过长问题(合理缩短命名长度吧) 4.5.1 从哪里断开 自动换行基本准则:更倾向于在更高语法级别处断开。 1. 如果在非赋值运算符处断开,那么在该符号前断开(比如+,它将位于下一行)。注意:这一点与 Google其它语言编程风格不同(如C++和JavaScript)。 这条规则也适用于以下“类运算符”符 号:点分隔符(.),类型界限中&(<T extends Foo & Bar>),catch块中管道符号(catch (FooException | BarException e) 2. 如果在赋值运算符处断开,通常做法在该符号后断开(比如=,它与前面内容留在同一行)。 这条规则也适用于foreach语句中分号。 3. 方法名或构造函数名与左括号留在同一行。 4. 逗号(,)与其前面内容留在同一行。 4.5.2 自动换行时缩进至少+4个空格 自动换行时,第一行后每一行至少比第一行多缩进4个空格(注意:制表符不用于缩进。见2.3.1节)。 当存在连续自动换行时,缩进可能会多缩进不只4个空格(语法元素存在多级时)。一般而言,两个连续行使 用相同缩进当且仅当它们开始于同级语法元素。 第4.6.3水平对齐一节中指出,不鼓励使用可变数目空格来对齐前面行符号。 4.6 空白 4.6.1 垂直空白 以下情况需要使用一个空行: 1. 类内连续成员之间:字段,构造函数,方法,嵌套类,静态初始化块,实例初始化块。在函数体 内,语句逻辑分组间使用空行。 例外:两个连续字段之间空行可选,用于字段空行主要用来对字段进行逻辑分组。 2.  3. 类内第一个成员前或最后一个成员后空行可选(既不鼓励也不反对这样做,视个人喜好而 定)。 4. 要满足本文档中其他节空行要求(比如3.3节:import语句) 多个连续空行允许,但没有必要这样做(我们也不鼓励这样做)。 4.6.2 水平空白 除了语言需求和其它规则,并且除了文字,注释和Javadoc用到单个空格,单个ASCII空格也出现在以下 几个地方: 吧?T10,A Li ­­yinbro 5. Re:精选30道Java笔试题解答 @time_fase你把代码复制过去 调试一下就知道了。... ­­小小配角 阅读排行榜 1. 精选30道Java笔试题解答(10262 0) 2. Java构造和解析Json数据两种方 法详解二(83944) 3. Java构造和解析Json数据两种方 法详解一(80927) 4. 查看Linux版本系统信息方法汇总(5 6159) 5. 如何在真机上调试Android应用程 序(图文详解)(46910) 评论排行榜 1. 谈谈我眼中CSDN吧(68) 2. 我个人知识管理工具一览及相关 经验技巧(67) 3. 百度2014研发类校园招聘笔试题解 答(64) 4. 精选30道Java笔试题解答(60) 5. Visual Studio最好用快捷键(你 最喜欢哪个)(55) 推荐排行榜 1. 精选30道Java笔试题解答(57) 2. 我个人知识管理工具一览及相关 经验技巧(50) 3. 百度2014研发类校园招聘笔试题解 答(32) 4. 如何参与一个 GitHub 开源项 目?(28) 5. 我2014碎碎念—学习篇、实习 篇、工作篇、生活篇(25)
相关推荐
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值