相关疑难解决方法(0)
Flexbox - 具有"无包装"文本的流体柱
我正在尝试设置一个包含三列的flexbox布局.左列和右列具有固定的宽度.中间列具有流体宽度以填充可用空间,但它包含一个长文本,不应该包装,而是使用省略号.
遗憾的是,非包装文本不能提供列占用可用空间的能力,并将整个布局推送到父元素的边界之外.
img {
max-width: 100%;
}
#container {
display: flex;
max-width: 900px;
}
.column.left {
width: 350px;
flex: 0 0 350px;
}
.column.right {
width: 350px;
flex: 0 0 350px;
}
.column.center {
// fluid width required
}
h1 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}<div id="container">
<div class="column left">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="">
</div>
<div class="column center">
<h1>
This is long text. If overflow use ellipsis
</h1>
</div>
<div class="column right">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="">
</div>
</div>链接到小提琴: …
推荐指数
解决办法
查看次数
一旦元素突破父母的宽度,元素就会丢失所有宽度
为什么以下示例中的元素会自行折叠？
即使元素设置为box-sizing: border-box,它的边框也会保留,但是一旦元素突破其父级的边界,该元素就会丢失其全部宽度.
到底是怎么回事？
let t = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at velit commodo, facilisis ex vitae, viverra tellus.'
let c = 0
const e = document.getElementById('statement-container')
const i = setInterval(function(){
if (t[c] !== ' ') e.innerHTML += t[c]
else e.innerHTML += ' '
c++
if (c >= t.length) clearInterval(i)
}, 100)* {
box-sizing : border-box;
}
body {
width : 100vw;
height : 100vh;
margin : 0;
}
section:first-child {
width …推荐指数
解决办法
查看次数
响应式两列布局：在其他列之间移动一列
我有一个响应式网站，在大型浏览器窗口中具有两列布局。两列布局目前是使用浮动实现的。在较小的屏幕上，我只想只有一栏。另一列的内容应显示在主列的两个元素之间，如下所示：
<div class="two-columns">
<div class="main-column">
<div class="red-element"></div>
<div class="yellow-element"></div>
</div>
<div class="sidebar-column">
<div class="green-element"></div>
</div>
</div>
我尝试使用基于 Flex-box 的方法，基本上就是这个问题中描述的方法，但在 Safari中flex-basis似乎仍然不受支持。适当的 Safari 支持是必须的，因为 Safari 是我的访问者的主要浏览器。flex-directioncolumn
有没有一种方法可以仅使用 CSS 来实现这一点，而不必在我的标记中放置两次绿色元素？
推荐指数
解决办法
查看次数
嵌套的 flex 元素不会使父元素增长
我正在尝试用月份名称和该月份名称正下方的所有日子撰写标题。
天项目有固定的宽度，所以我想：为什么不使用 flexbox？
由于某些原因，.day元素正在从其父级下降而父级不会增长。
您能否给我一个提示，为什么flex-basis: auto在几天的插槽溢出后不使月份插槽增长？
至于实现，我已经找到了使用float: left而不是使用 flexbox 的解决方法。但我不明白为什么它会这样工作。
.main {
display: flex;
}
.month {
flex: 0 0 auto;
}
.days {
display: flex;
}
.day {
flex: 0 0 2em;
}<div class='main'>
<div class='month'>
<div class='name'>Jan</div>
<div class='days'>
<div class='day'>1</div>
<div class='day'>2</div>
<div class='day'>3</div>
<div class='day'>4</div>
<div class='day'>5</div>
<div class='day'>6</div>
</div>
</div>
<div class='month'>
<div class='name'>Feb</div>
<div class='days'>
<div class='day'>1</div>
<div class='day'>2</div>
<div class='day'>3</div>
<div class='day'>4</div>
<div class='day'>5</div>
<div class='day'>6</div> …推荐指数
解决办法
查看次数
带弹性盒的计算器键盘布局
我正在用 Flexbox 构建一个计算器。我想要其中一个键的高度是两倍，另一个键的宽度是两倍。
我用谷歌搜索了很多，但找不到这两个案例。
对于两倍高度的键，我发现的唯一答案是制作flex-direction为column。但在这种情况下，我将无法制作双宽度键。
这是我的代码（在 codepen.io 上）。请帮忙。
$(function() {
var curr = "",
prev = "";
var updateView = function() {
$('#curr').html(curr);
$('#prev').html(prev);
};
$('.keysNum').on('click', function(e) {
curr += $(this).html();
console.log(this);
updateView();
});
$('.keysOp').on('click', function(e) {
});
});.flexBoxContainer {
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
min-height: 100vh;
}
.calculator {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
width: 100%;
min-height: 100vh;
}
@media …推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
flex-grow何时切换到flex-shrink,反之亦然？
我不明白是什么让flex项目从成长变为收缩行为？起初我认为这是flex-basis价值,但如果只有一个项目有,或者没有？
此外,规格flex-basis说:
flex-basis CSS属性指定flex基础,它是flex项目的初始主要大小.
那是什么意思？如果我有一个项目,其余的是默认的,为什么它通常比值大一点？增加的空间来自哪里？
推荐指数
解决办法
查看次数
柔性物品的宽度正在减小
我正在尝试制作一个可在移动设备中水平滚动的导航菜单.要做到这一点,我想使用它flexbox,但当我设置移动视图时,导航项的宽度减少.
我尝试使用flex-grow和flex-basis性能将它们设置为1与0分别,但没有奏效.
在这种情况下,我使用导航部分的虚拟名称,但它们可以具有不同的长度.
ul {
display: flex;
margin: 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
overflow-y: hidden;
overflow-x: auto;
}
li {
flex-grow: 1;
flex-basis: 0;
margin-left: 10px;
}<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>推荐指数
解决办法
查看次数
Flex 框填充父级，但不要在溢出时拉伸父级
这是一个与Can You make a flexbox child expand to fit parent but not contents类似的问题。，但是，该解决方案对我不起作用。
我有一个布局，这样整个页面应该总是适合屏幕（页眉和页脚之间），如果内容太大，那么它的容器应该滚动。（基本上最后一个例子来自：https : //css-tricks.com/snippets/css/a-guide-to-flexbox/）
我已经尝试了我上面链接的问题的解决方案：
#chat {
background-color: #ceecf5;
flex-grow: 1;
overflow: auto;
}
但是父级仍然被拉出页面。
如果我为#chat它设置了手动高度，它可以正常工作，但它只适合我制作的屏幕尺寸，所以我想要一个自动高度。
#chat {
background-color: #ceecf5;
flex-grow: 1;
overflow: auto;
}
#flex-container {
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
min-width: 300px;
flex: 1;
}
#header {
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background-color: red;
}
#column-flex-container {
display: flex;
flex-flow: row wrap-reverse;
justify-content: …推荐指数
解决办法
查看次数
在嵌套的flexbox中滚动
我正在开发一个React应用程序,它有一个带有一些Tabbed内容的模态,偶尔需要滚动.但是,问题是我无法设法滚动正确的内容.
模态分为3个主要部分:
- 头
- 应始终在模态的顶部可见
- 内容
- 应该填充页眉和页脚之间的空间,但不要强迫观看
- 页脚
- 应始终在内容下方可见
- 这可能意味着在模态的底部(如果内容填充剩余空间)或在内容下面(如果内容 不填充空间)
虽然这很容易实现(我已经这样做了),但问题出现在内容不应该滚动,而是内部应该有的东西.在下面的图像中是两个预期行为的示例,一个具有长内容,应滚动而另一个不滚动.
我正在使用一个自定义Tabbed组件,它在容器内呈现内容.如果需要,此容器(下图中的白色)应滚动.
我可以在下面的CodePen和示例代码中找到最远的地方.我目前能够滚动包含预期可滚动内容的元素,但实际上无法滚动该内容.如果您检查笔,您可以看到它(由于某种原因)延伸超过包含元素.
代码示例
HTML
<div class="modal">
<div class="background" />
<div class="modal_content">
<div class="header">Random header</div>
<div class="tabbed_content">
<div class="tabs">
<div class="tab active">Tab 1</div>
<div class="tab">Tab 2</div>
</div>
<div class="content">
<div class="scrollable">
Tabbed Content
<br /><br /><br /><br /><br /><br />
Another Couple Lines
<br /><br /><br /><br /><br /><br /> …推荐指数
解决办法
查看次数