相关疑难解决方法(0)
为什么弹性项目不会缩小内容大小？
我有4个flexbox列,一切正常,但是当我向列添加一些文本并将其设置为较大的字体大小时,由于flex属性,它使得列比应该更宽.
我尝试使用word-break: break-word并且它有所帮助,但是当我将列调整到非常小的宽度时,文本中的字母被分成多行(每行一个字母),但是列的宽度不比一个字母大小小.
观看此视频 (一开始,第一列是最小的,但是当我调整窗口大小时,它是最宽的列.我只想总是尊重flex设置; flex size 1:3:4:4)
我知道,将字体大小和列填充设置为较小会有所帮助......但还有其他解决方案吗？
我不能用overflow-x: hidden.
.container {
display: flex;
width: 100%
}
.col {
min-height: 200px;
padding: 30px;
word-break: break-word
}
.col1 {
flex: 1;
background: orange;
font-size: 80px
}
.col2 {
flex: 3;
background: yellow
}
.col3 {
flex: 4;
background: skyblue
}
.col4 {
flex: 4;
background: red
}<div class="container">
<div class="col col1">Lorem ipsum dolor</div>
<div class="col col2">Lorem ipsum dolor</div>
<div class="col col3">Lorem ipsum dolor</div> …推荐指数
解决办法
查看次数
flex-wrap如何使用align-self,align-items和align-content？
align-self
在以下代码中,align-self使用flex-wrap: nowrap.
flex-container {
display: flex;
flex-wrap: nowrap;
align-content: flex-start;
width: 250px;
height: 250px;
background-color: silver;
}
flex-item {
flex: 0 0 50px;
height: 50px;
margin: 5px;
background-color: lightgreen;
}
flex-item:last-child {
align-self: flex-end;
background-color: crimson;
}<flex-container>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</flex-container>但是当容器切换到时flex-wrap: wrap,align-self属性会失败.
flex-container {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
width: 250px;
height: 250px;
background-color: silver;
}
flex-item {
flex: 0 0 50px;
height: 50px;
margin: …推荐指数
解决办法
查看次数
使用flexbox的谷歌浏览器视口锚定扩展方向
Google Chrome中存在一个问题,即当元素放置在Flexbox容器内且相邻的 Flex项目具有space-between或center对齐内容时,元素在相对于视口的不同方向上展开/折叠.
这在Firefox,IE11,Edge或Safari中不是问题,因为元素总是向下扩展.
我很好奇:
- Chrome的行为是否符合某些规范？如果是这样,哪一个？
- 如果没有,那么为什么在Chrome中完成？(恕我直言,点击触发器随机消失,这是一个可怕的用户体验.)
- 某些人可以修改或禁用Chrome的行为吗？例如.通过CSS或元标记？
更新1:如果可能的话,我已经向铬虫追踪者提交了问题#739860,寻求Chromium开发者的见解/解释.
以下是插入的两个示例.可以在此笔中找到描述该问题的完整测试套件:https: //codepen.io/jameswilson/full/xrpRPg/我已选择在此示例中使用slideToggle,以便展开/折叠动画是动画的并且可见眼.详细信息标记也会出现相同的行为,但是目前还没有跨浏览器支持,并且展开/折叠太过笨拙.
例1:Chrome在合理的Flexbox之间的空间展开/折叠行为
$('button').click(function() {
$(this).next().slideToggle();
})body {
margin: 30px;
font-family: sans-serif;
}
aside,
aside div,
summary,
main,
button,
details p,
button + p {
background: rgba(0,0,0,.09);
border: none;
padding: 20px;
margin: 0;
}
.flexcontainer {
display: flex;
}
aside {
flex: 1;
position: relative;
max-width: 25%;
background: mintcream;
display: flex;
flex-direction: column;
position: relative;
}
aside.space-between {
justify-content: …推荐指数
解决办法
查看次数
如何使图像保持在css网格容器的行内？
下面的代码显示了我在Chrome 60和Firefox 55中调整窗口大小时的预期行为(但在iOS Safari 10.3中没有;这很可能是另一个问题,为什么它在Safari中行为不当).
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: 0;
background-color: lightgrey;
}
.container {
box-sizing: border-box;
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(3, calc((60vh - 12px)/3));
/*grid-template-rows: 1fr 1fr 1fr;*/
/*grid-template-rows: auto auto auto;*/
height: 60vh;
border: 3px solid yellow;
padding: 3px;
/*grid-gap: 20px;*/ /* <-- would also mess things up */
}
.tile {
}
img {
box-sizing: border-box;
display: block;
object-fit: contain;
width: 100%;
height: 100%;
margin: …推荐指数
解决办法
查看次数
Firefox和Chrome之间的缩小差异
以下简化代码示例在Firefox与Chrome上的呈现方式不同.这是浏览器错误的结果吗？如果是这样,哪个是按规格呈现,哪个不是？
如果可以的话,我想获得一个错误报告的链接.
现在,为了我的目的,flex-shrink: 0在这个缩小的例子中添加:navbar,解决了问题,但是我想知道一旦bug修复后这是否也会起作用...
#fixed {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#tall {
height: 300%;
}
.outline {
outline: 1px solid red;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div id="fixed" class="d-flex flex-column">
<nav class="navbar outline">
<a class="btn btn-secondary">Button</a>
</nav>
<div id="tall"></div>
</div>推荐指数
解决办法
查看次数
Flex项目在Chrome和IE11中重叠
我正在尝试创建一个固定高度的flexbox布局,当内部内容太大时,它会滚动内部内容.
此外,如果内容不会导致滚动,我想修复带有按钮的div到容器的底部.
我有一个在Firefox中完美运行的布局,但在Chrome中,当它足够大以引起滚动时,它会导致底部按钮div在内容之上剪辑.
这是Firefox中正确的布局呈现:
这是它在Chrome中呈现不正确的方式:
此外,如果没有足够的内部内容来导致滚动,它应该如何表现:
.container {
height: 150px;
width: 300px;
display: flex;
flex-direction: column;
overflow-y: auto;
border: 1px solid #000;
padding: 4px;
}
.options {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.spacer {
flex: 1 1 auto;
}
.buttons {
display: flex;
flex-direction: row;
justify-content: space-between;
}<div class="container">
<div class="options">
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option"> …推荐指数
解决办法
查看次数
子级div高度超过了Firefox中的父级高度而不是Chrome
如何防止使用滚动条的子div和flex:1超出其在Firefox中的父Flexbox的高度？它在Chrome中正常运行.
CodePen链接(如果您更喜欢Stack Overflow片段):https://codepen.io/garyapps/pen/ZMNVJg
细节:
我有一个固定高度的弹性容器.它有一个flex-direction:column设置,它包含多个垂直堆叠的孩子div.其中一个儿童div被赋予flex:1财产,而其他人则获得固定的高度.
我的期望是带有flex:1财产的子女孩将扩大以填补剩余的垂直空间.这按预期工作.
我还给了孩子div一个overflow-y:scroll属性,所以如果它内的内容超过它的高度,就会出现滚动条.这在Chrome中运行良好.然而,在Firefox中,这个孩子的身高会增加,超过其父div.
在Chrome中:
在Firefox中:
正如您在屏幕截图中看到的,我有两次出现此问题,一次出现在左侧面板中,另一次出现在右侧面板中.在Chrome中,子div的高度保持不变,出现滚动条,并且不会超出父级的高度.在Firefox中,滚动条不会出现,并且子div的高度会增加并超过其父级.
我已经在SO上查看了一些其他类似的问题,并且在很多情况下设置min-height:0属性解决了Firefox中的问题.但是我试过加入min-height:0父母,孩子,父母和孩子,没有运气.
请在Chrome和Firefox中运行下面的代码段,以查看两种浏览器的不同之处.
我很感激有关如何防止儿童成长的任何建议.
(注意正在使用Bootstrap 4.代码片段引用了bootstrap 4 .css文件CDN)
代码片段:
.body-content {
height: 300px;
max-height:100%;
border: 3px dashed purple;
display:flex;
flex-direction: column;
}
#messagescontainerrow {
flex: 1;
border: 5px double black;
}
#leftdiv {
display:flex;
flex-direction:column;
border: 1px solid green;
}
#messagetools {
height: 50px;
background-color: cornsilk;
}
#messagelist {
flex:1;
overflow-y: scroll;
background-color:whitesmoke; …推荐指数
解决办法
查看次数