相关疑难解决方法(0)
输入/按钮元素不会在Flex容器中缩小
在Flex容器中使用输入和按钮元素时,flex和/或flex-grow属性似乎没有做任何事情.
代码,演示我的问题.
button,
input {
font-size: 1rem;
}
button {
border: none;
background-color: #333;
color: #EEE;
}
input {
border: 1px solid #AAA;
padding-left: 0.5rem;
}
.inputrow {
width: 30rem;
display: flex;
margin: 0 -.25rem;
}
.inputrow>* {
margin: 0 .25rem;
border-radius: 2px;
height: 1.75rem;
box-sizing: border-box;
}
.nickname {
flex: 1;
}
.message {
flex: 4;
}
.s-button {
flex: 1;
}<div class="inputrow">
<input type="text" class="nickname" placeholder="Nickname">
<input type="text" class="message" placeholder="Message">
<button type="submit" class="s-button">Submit</button> …推荐指数
解决办法
查看次数
防止子元素在flexbox中溢出其父元素
我正在开发一个显示大量网卡的网络应用程序,其高度本身就是可变的.
为了美学,我们使用jQuery .matchHeight()来平衡每一行中卡片的高度.
它的性能不能很好地扩展,所以今天我一直在迁移到基于灵活盒的解决方案,这个解决方案要快得多.
但是,我丢失了一个行为 - 如果卡片标题不适合,则应使用省略号截断.
目标:
- 3列
- 列宽可以填充父级
- 列之间的间距恒定
- 高度在一排内均衡
如何安排得到尊重容器大小和text-overflow: ellipsis;和white-space: nowrap;兑现？
(没有jQuery标签,因为我们正在远离那个)
我的解决方案是当前的形式,除了截断之外,它实现了我的所有目标:
https://codepen.io/anon/pen/QvqZYY
#container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start; /* Bias cards to stack from left edge */
align-items: stretch; /* Within a row, all cards the same height */
border: thin solid gray;
}
.card-wrapper {
width: 33.33%;
display: flex;
background: #e0e0ff;
}
.card {
flex-grow: 1;
margin: 7px;
display: flex;
flex-direction: column;
border: thin …推荐指数
解决办法
查看次数
flex孩子长大了父母
如何在不设置静态高度值且没有绝对位置的情况下强制将绿色框包含在红色框中？
我想缩小内容以适应父级.
允许内容(在这种情况下为视频)缩小并允许滚动条.
.my-box {
height: 300px;
width: 600px;
background: red;
padding: 5px;
}
.content-box {
background: blue;
}
.col {
display: flex;
flex-direction: column;
justify-content: space-between
}
.box-shrink {
flex: 0 1 auto;
background: green;
padding: 5px;
margin: 5px;
}
.box-grow {
flex: 1 0 auto;
background: green;
padding: 5px;
margin: 5px;
}
video {
max-height: 100%;
max-width: 100%;
margin: auto;
display: block;
}<div class="my-box col">
<div class="box-shrink">
small sized static content
</div>
<div class="content-box box-grow">
<video controls> …推荐指数
解决办法
查看次数
为什么flex-child限于父母大小？
考虑以下示例......
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.parent {
min-height: 100vh;
width: 50vw;
margin: 0 auto;
border: 1px solid red;
display: flex;
align-items: center;
justify-content: center;
}
.child {
border: 1px solid blue;
width: 150%;
}<div class="parent">
<div class="child">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet tellus cras adipiscing enim eu turpis. Neque aliquam vestibulum morbi blandit. Sem integer vitae justo eget …推荐指数
解决办法
查看次数
Firefox中的Flexbox溢出问题
我正在使用flexbox陷入测试项目.我们的目标是建立一个仪表板,里面有一些卡片列表,并排无限溢出.
我设法做到这一点,问题是:每个列表中都有一个标题,一个卡片列表和一个页脚,列表高度不能超过父级可用高度.如果发生这种情况,列表必须仅在卡列表上应用溢出.
在Chrome上它工作正常,但在Firefox上...似乎渲染器无法处理内容溢出的可能性!我真的很生气这个.
例:
代码(也在Plunker上)
// Code goes here
(function (angular) {
angular.module("app", []);
angular.module("app").controller("AppController", AppController);
AppController.$inject = ["$scope"];
function AppController($scope) {
var ctrl = this;
ctrl.addCard = function (list) {
list.cards.push({title: "Card " + (list.cards.length + 1)});
};
ctrl.lists = [
{
title: "List 1",
cards: [
{title: "Card 1"},
{title: "Card 2"},
{title: "Card 3"},
{title: "Card 4"},
{title: "Card 5"}
]
},
{
title: "List 2",
cards: [
{title: "Card 1"},
{title: "Card 2"},
{title: …推荐指数
解决办法
查看次数
文本溢出省略号在嵌套的flexbox中不起作用
我有一个用flexboxes创建的两列布局.
在右列中,我有两行,第一行包含标题,第二行包含页面内容.
在标题内我有三列,一个按钮,一些文本和一个按钮.
我希望按钮位于列的左侧和右侧,文本占用任何额外的空间.
最后,我希望文本具有white-space:nowrap和text-overflow:ellipsis属性来截断长标题.
我的问题是这样的:我无法让文本包装在嵌套在另一个flexbox中的flexbox中正常工作,如下所示:
http://jsfiddle.net/maxmumford/rb4sk3mz/3/
.container {
display: flex;
height: 100vh;
}
.left {
width: 200px;
background-color: yellow;
}
.right {
flex: 1;
background-color: blue;
color: white;
}
.header {
background: red;
color: white;
display: flex;
flex-direction: row;
}
.header .content {
white-space: nowrap;
flex: 0 1 auto;
text-overflow: ellipsis;
overflow: hidden;
min-width: 0;
}
.header .buttons {
background: green;
flex: 1 0 auto;
}
.header .content:hover {
white-space: normal;
}<div …推荐指数
解决办法
查看次数
Flexbox子级具有“溢出：隐藏”的祖父母边距
我正在尝试在包装器中嵌套两个子元素，该包装器指定侧边距，以便当显示狭窄时在其内容和屏幕侧面之间有一个空间，max-width而当显示较宽时则用于一个。
第二个孩子会有一些溢出，这应该是可见的，而第一个孩子应该严格位于包装器的内容框中。在删除第一个孩子的情况下，第二个孩子的行为符合预期。但是，当我添加第一个孩子时，它似乎完全忽略了包装器的边距，拉伸了包装器的内容框，并破坏了第二个孩子。
应用于overflow: hidden包装程序可以解决页边距问题，但可以裁剪第二个孩子。将边距应用于第一个孩子并不会使其与父对象一起折叠，因为它处于新的块格式上下文中。
到目前为止，我发现的唯一解决方法是：
.wrapper {
> * {
margin-left: 1.5rem;
margin-right: 1.5rem;
}
}
并将包装器的最大宽度增加3rem，但我希望有一些解决方案不需要我将包装器的边距转移到其子级。
https://codepen.io/HybridCore/pen/jjoWmd
.wrapper {
> * {
margin-left: 1.5rem;
margin-right: 1.5rem;
}
}
body {
background-color: #000;
color: #FFF;
display: flex;
justify-content: center;
}
.wrapper {
margin: 0 1.5rem;
max-width: 40rem;
width: 100%;
}
.fit_content_box {
display: flex;
align-items: center;
}
.L {
min-width: 0;
flex: 1 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.R {
margin-left: 1rem;
height: …推荐指数
解决办法
查看次数
根据原始大小制作flex-grow扩展项目
我连续有3个按钮,宽度各不相同.我希望它们都能获得相同的宽度以填充行的剩余宽度,因此最宽的仍将比其他宽度更宽等.
你可以在下面看到我尝试用flex做的事情导致所有按钮的宽度相同.我知道flex-grow可以用来按比例增长每个项目,但我无法弄清楚如何让它们与原始大小相关.
您可以在第二行中看到蓝色项目大于其他两个项目.我只想让所有三个人从他们当前的大小平均扩大到填充行.
谢谢
.row-flex {
width: 100%;
display: flex;
flex-direction: row;
}
.button {
flex: 1;
display: inline-block;
padding: 10px;
color: #fff;
text-align: center;
}
.button--1 {
background: red
}
.button--2 {
background: green;
}
.button--3 {
background: blue;
}<div class="row-flex">
<a href="#" class="button button--1">Single</a>
<a href="#" class="button button--2">Larger title</a>
<a href="#" class="button button--3">Another really large title</a>
</div>
<br/>
<div class="row">
<a href="#" class="button button--1">Single</a>
<a href="#" class="button button--2">Larger title</a>
<a href="#" class="button button--3">Another really large …推荐指数
解决办法
查看次数
flexbox父级小于浏览器大小的子元素
为什么父母在狭窄的屏幕上小于孩子？
请参阅代码段...然后将浏览器的大小(宽度方向)调整为小于粉红色框.应该出现滚动条.向后滚动到页面右侧,注意绿色背景小于粉红色区域,右侧有一个白点.
这么几个问题:
为什么会这样？
当调整浏览器大小而不在父级(或其他任何地方)设置显式宽度或使用时,如何防止父div的绿色背景小于粉红色框/ div
overflow:hidden？是否有针对此问题的flexbox解决方案？
谢谢,
托马斯
.parent {
height: 400px;
background-color: green;
display: flex;
}
.item {
height: 100px;
background-color: pink;
padding: 10px;
}<div class="parent">
<div class="item">looooooooooooooooooooooooooooong</div>
<div class="item">looooooooooooooooooooooooooooong</div>
</div>推荐指数
解决办法
查看次数
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>推荐指数
解决办法
查看次数