使用FontAwesome时,Flexbox大小调整无法正常工作
Ger*_*ier 20 html css flexbox font-awesome
我正在面对我的页面布局的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
<body>
<div class="layout_wrapper">
<div class="layout_container__content">
<div class="content">
<header class="content__header">
<div class="breadcrumb">
<span class="breadcrumb__text breadcrumb__text--first">From </span><a class="breadcrumb__link" href="#">Dashboard</a><span class="breadcrumb__text"> to </span><a class="breadcrumb__link" href="#">Find records</a><span class="breadcrumb__text"> to </span>
<h1 class="breadcrumb__current">Kylo Ren’s Command Shuttle™</h1>
</div>
<ul class="page_tools">
<li class="page_tools__item">
<button type="button" class="button button--primary">Save</button>
</li>
<li class="page_tools__item">
<button type="button" class="button">Cancel</button>
</li>
</ul>
</header>
</div>
</div>
<div class="layout_container__sidebar">
<div class="sidebar">
<article class="widget">
<h2 class="widget__title">Widget</h2>
</article>
</div>
</div>
</div>
</body>
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;
}
我刚刚完成了对您的代码的审核,并注意到以下内容:
- 有不必要的(嵌套的)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容器的复杂性的情况下完成工作.