相关疑难解决方法(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> …推荐指数
解决办法
查看次数
使用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: …推荐指数
解决办法
查看次数
为什么Chrome和Firefox显示不同的Flex布局结果？
当只有一行“弹性项目”时，Chrome和Firefox显示不同的结果。当有多行（换行）时，Chrome和Firefox显示相同的结果！
那么为什么会这样呢？那是一个错误，还是我缺少一些“默认值”或差异？
body{
background-color: teal;
}
.flexContainer{
background-color: blue;
border: 1px solid black;
height: 300px;
}
.flexItem{
background-color: red;
border: 1px solid black;
}
.flexContainer{
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
align-content: flex-start;
}
.flexItem{
flex: 0 1 0;
}<div class="flexContainer">
<div class="flexItem">1111111111111111111</div>
<div class="flexItem">2222<br/>2222</div>
<div class="flexItem">3333<br/>3333<br/>3333</div>
<div class="flexItem">4444444444444444444</div>
</div>推荐指数
解决办法
查看次数