我正在面对我的页面布局的flexbox非常奇怪的行为.我正在使用FontAwesome来呈现某些符号.

基本上,我在另一个flexbox项目中有2个flexbox项目,这些子项目比父项目更宽.

1)我有一个.content__header对象,它在另一系列flexbox对象中呈现为flexbox对象.

2)该.content__header对象包含2个子对象:.breadcrumb和.page_tools.这些子对象也呈现为flex项.

3)在.breadcrumb对象内部,我有一些span对象(.breadcrumb__test),其内容被FontAwesome图标替换.使用::after伪元素的绝对定位来完成替换.

4)当我删除所有.breadcrumb__textHTML元素或.breadcrumb__text::after从样式表中删除定义时 - 定义了FontAwesome字体的使用 - 子对象(.breadcrumb和.page_tools)以正确的宽度呈现.所以我猜它与FontAwesome图标的替换有关.

.breadcrumb__text::after {
  font-family: "FontAwesome";
  font-weight: 400;
}

---

问题的视觉表示

绿线表示父宽度与实际内容之间的差异.

Code&Fiddle如下.

浏览器:谷歌浏览器47.0.2526.106米

---

小提琴:

https://jsfiddle.net/44gymmw2/6/

---

更新

当我text-indent: 100%;从.breadcrumb__textCSS定义中删除时,.breadcrumb按预期呈现.但是,当我离开text-indent原位并删除.breadcrumb__text::after样式表顶部的定义(如上所述)时,它也会正确呈现.

这个问题可能与FontAwesome或text-indentflexbox有关吗？

---

码

HTML

  


    

      

        


          

            From Dashboard to Find records to 
            
Kylo Ren’s Command Shuttle™
          

          

            

              Save
            
            

              Cancel
            
          

        

      
    

    


      

        

          
Widget
        
      

    

  

CSS

/* Removing this makes it work */
.breadcrumb__text::after {
  font-family: "FontAwesome";
  font-weight: 400;
}

/* Don't remove anything below */
.breadcrumb__text--first {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

* {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
}

html, body {
    padding: 0;
    margin: 0;
}

body {
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch;
}

.layout_wrapper {
  flex: 1 1 auto;
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
}

.layout_container__content {
  flex: 0 0 75vw;
}

.layout_container__sidebar {
  flex: 0 0 25vw;
}

.content {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: stretch;
}

.content__header {
  outline: 1px solid blue;
  background-color: #434649;
  color: #ffffff;
  flex: 0 0 100%;
  display: flex;
  flex-flow: row nowrap;
}

.breadcrumb {
  outline: 3px dashed purple;
  flex: 1 1 auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

.breadcrumb__text {
  flex: 0 0 2em;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  position: relative;
  text-align: center;
}

.breadcrumb__text::after {
  content: '\f105';
  padding: 0;
  text-indent: 0;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
}

.breadcrumb__text--first {
  flex: 0 0 0;
}

.breadcrumb__text--first::after {
  content: none;
}

.breadcrumb__link {
  flex: 0 0 auto;
  display: inline-block;
  font-size: 0.8571rem;
}

.breadcrumb__current {
  flex: 0 0 100%;
  margin: 0;
}

.page_tools {
  outline: 3px dashed red;
  flex: 0 0 auto;
  display: flex;
  flex-flow: row nowrap;
  list-style: none outside none;
}

pesla.. 8

我刚刚完成了对您的代码的审核,并注意到以下内容:

有不必要的(嵌套的)flex容器(由使用引起display: flex;).

有不必要的与flex相关的声明(只是声明默认行为,例如flex-flow: row no-wrap;和align-items: stretch).

在各种不相关的选择器的上下文中有几个不必要的声明.在测试/调试时可能会遗留下来的声明.

也就是说,让我们继续你的问题.这不明显,所以需要一些介绍.

Pangloss介绍了您问题的一个重要因素,它会影响使用text-indent.从W3:

该框相对于线框的左侧(或右侧,右侧到左侧布局)边缘缩进.用户代理必须将此缩进呈现为空格.

[...]

如果值为text-indent负或超过块的宽度,则上述第一个框可以溢出块.值overflow将影响溢出块的此类文本是否可见.

换句话说:text-indent影响应用它的框的尺寸.

你宣布overflow: hidden;了.breadcrumb__text.显然,为了使该声明具有所需的效果,您应用它的框需要a width,否则它将没有剪切边缘.

.breadcrumb__text应该从flex-basis声明(特别flex: 0 0 2em;)应用它的宽度.嗯......这种情况至少没有发生,并不像你期望的那样完全发生.即使它的宽度似乎是2em,由于某种原因它不会触发溢出行为.这似乎是您使用的特定Chrome版本中的一个错误,因为它在Canary中已修复(例如,版本49及更高版本).

所以:这似乎是Chrome中的flexbox实现的一个问题.也就是说,凭借这些知识,您的问题可以通过多种方式得到解决.一些例子:

text-indent: -100%

使用text-indent: -100%修复您的问题,因为它会占用受影响元素右侧的额外空白.(→ jsfiddle)

width: 2em

您可以将声明添加width: 2em到.breadcrumb__text.这将解决flex-basis声明的意外行为.(→ jsfiddle)

overflow: hidden; 在父容器上

添加overflow: hidden;在.breadcrumbs修复您的问题.现在,父容器具有剪切边缘并处理由使用引起的空白text-indent: 100%.(→ jsfiddle)

最后的评论

Flexbox是一种功能强大的布局模式,非常适合进行实验.但是,算法很复杂,浏览器实现还没有解决问题.确保在使用flexbox时考虑到这一点.

查看代码时的另一个问题是您使用flexbox的方式.Flexbox可供您使用,但它不一定要替换处理布局的其他方式.display: inline-block;或者display: table;,甚至float可能在不引入嵌套Flex容器的复杂性的情况下完成工作.

1> pesla..：

---

我刚刚完成了对您的代码的审核,并注意到以下内容:

有不必要的(嵌套的)flex容器(由使用引起display: flex;).

有不必要的与flex相关的声明(只是声明默认行为,例如flex-flow: row no-wrap;和align-items: stretch).

在各种不相关的选择器的上下文中有几个不必要的声明.在测试/调试时可能会遗留下来的声明.

也就是说,让我们继续你的问题.这不明显,所以需要一些介绍.

Pangloss介绍了您问题的一个重要因素,它会影响使用text-indent.从W3:

该框相对于线框的左侧(或右侧,右侧到左侧布局)边缘缩进.用户代理必须将此缩进呈现为空格.

[...]

如果值为text-indent负或超过块的宽度,则上述第一个框可以溢出块.值overflow将影响溢出块的此类文本是否可见.

换句话说:text-indent影响应用它的框的尺寸.

你宣布overflow: hidden;了.breadcrumb__text.显然,为了使该声明具有所需的效果,您应用它的框需要a width,否则它将没有剪切边缘.

.breadcrumb__text应该从flex-basis声明(特别flex: 0 0 2em;)应用它的宽度.嗯......这种情况至少没有发生,并不像你期望的那样完全发生.即使它的宽度似乎是2em,由于某种原因它不会触发溢出行为.这似乎是您使用的特定Chrome版本中的一个错误,因为它在Canary中已修复(例如,版本49及更高版本).

所以:这似乎是Chrome中的flexbox实现的一个问题.也就是说,凭借这些知识,您的问题可以通过多种方式得到解决.一些例子:

text-indent: -100%

使用text-indent: -100%修复您的问题,因为它会占用受影响元素右侧的额外空白.(→ jsfiddle)

width: 2em

您可以将声明添加width: 2em到.breadcrumb__text.这将解决flex-basis声明的意外行为.(→ jsfiddle)

overflow: hidden; 在父容器上

添加overflow: hidden;在.breadcrumbs修复您的问题.现在,父容器具有剪切边缘并处理由使用引起的空白text-indent: 100%.(→ jsfiddle)

最后的评论

Flexbox是一种功能强大的布局模式,非常适合进行实验.但是,算法很复杂,浏览器实现还没有解决问题.确保在使用flexbox时考虑到这一点.

查看代码时的另一个问题是您使用flexbox的方式.Flexbox可供您使用,但它不一定要替换处理布局的其他方式.display: inline-block;或者display: table;,甚至float可能在不引入嵌套Flex容器的复杂性的情况下完成工作.