相关疑难解决方法(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> …推荐指数
解决办法
查看次数
Chrome/Safari不会填充100%高度的flex父级
我想要一个具有特定高度的垂直菜单.
每个孩子必须填写父母的高度并且具有中间对齐的文本.
孩子的数量是随机的,所以我必须使用动态值.
Div .container包含一个随机数的children(.item),它们总是必须填充父级的高度.为了实现这一点,我使用了flexbox.
为了使文本链接与中间对齐,我正在使用display: table-cell技术.但使用桌面显示需要使用100%的高度.
我的问题是.item-inner { height: 100% }在webkit(Chrome)中无效.
- 这个问题有解决方法吗？
- 或者是否有一种不同的技术可以使所有
.item填充父级的高度与文本垂直对齐到中间？
这里的示例jsFiddle,应该在Firefox和Chrome中查看
.container {
height: 20em;
display: flex;
flex-direction: column;
border: 5px solid black
}
.item {
flex: 1;
border-bottom: 1px solid white;
}
.item-inner {
height: 100%;
width: 100%;
display: table;
}
a {
background: orange;
display: table-cell;
vertical-align: middle;
}<div class="container">
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div>
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div> …推荐指数
解决办法
查看次数
防止内容扩展网格项
TL; DR:table-layout: fixed CSS网格有什么相似之处吗？
我尝试创建一个带有大型4x3网格的年视图日历,其中包含7x6网格.
日历应填充页面,因此年份网格容器的宽度和高度均为100%.
.year-grid {
width: 100%;
height: 100%;
display: grid;
grid-template: repeat(3, 1fr) / repeat(4, 1fr);
}
.month-grid {
display: grid;
grid-template: repeat(6, 1fr) / repeat(7, 1fr);
}
这是一个有效的例子:https://codepen.io/loilo/full/ryXLpO/
为简单起见,该笔每个月都有31天,周一开始.
我还选择了一个可笑的小字体来演示这个问题:
网格项(=日单元格)非常精简,因为页面上有数百个.一旦日期数字标签变得太大(可以使用左上方的按钮随意使用笔中的字体大小),网格的大小将会增大并超过页面的主体大小.
有什么方法可以防止这种行为吗？
我最初声明我的年度网格在宽度和高度上都是100%,所以这可能是重要的一点,但我找不到任何符合网格的CSS属性.
免责声明:我知道有很简单的方法可以在不使用CSS Grid Layout的情况下设置日历的样式.然而,这个问题更多的是关于该主题的一般知识而不是解决具体的例子.
推荐指数
解决办法
查看次数
CSS Grid Row Height Safari Bug
我已经制作了一个1fr 1fr 1fr行的网格模板.在中间行,有一个内嵌图像列表.
在Chrome和Firefox中,图像尊重网格行的高度并正确适应.但是,在Safari 10.1.2和Safari TP 31中,似乎存在溢出行的图像组合而未适当缩放图像宽度.
也许我做错了什么？或者这是一个Safari bug？如果是这样,有解决方法吗？
Safari 10.1
Safari TP
Chrome 60
#grid {
height: 100vh;
display: grid;
grid-template-rows: 1fr 1fr 1fr;
}
#thumbnailContainer {
position: inherit;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
img {
display: inline;
height: 100%;
width: auto;
}
header,
footer {
background-color: dodgerblue;
}<div id="grid">
<header>Header</header>
<div id="thumbnailContainer">
<img src="https://c2.staticflickr.com/8/7591/16903911106_b7ced9d758.jpg">
<img src="https://c1.staticflickr.com/9/8740/16927517701_810fcb2a7c.jpg">
<img src="https://c2.staticflickr.com/8/7637/16902583636_15138a68f0.jpg">
<img src="https://c2.staticflickr.com/8/7614/16927530091_6755845b13.jpg">
<img src="https://c1.staticflickr.com/9/8700/16741099010_d0ecd9df1f.jpg">
<img src="https://c1.staticflickr.com/9/8745/16927567841_74fd20d01d.jpg">
</div>
<footer>Footer</footer>
</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"> …推荐指数
解决办法
查看次数
为什么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>推荐指数
解决办法
查看次数