个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
当尝试创建一个主列应占用所有可用空间的类似表格的布局时，主列最终占用的空间比预期的要多，并将其他列推到容器边界之外。
我正在寻求的行为就好像我正在使用一个表格来布置它并且我给了一列 width: 100%。
如果您查看下面的示例，您会发现第一行的第二列被压扁，即使要 overflow hidden 也是如此。第一列似乎比其他列具有某种大小优先级。
我很好奇为什么会发生这种情况以及什么是可重用的解决方案。我不想在任何列上设置固定宽度。
.list {
border: 1px solid #000;
}
.list-row {
display: flex;
border: 1px solid #AAA;
}
.list-column {
border: 1px solid blue;
white-space: nowrap;
}
.list-column--main {
flex-grow: 1;
}
.hide-overflow {
overflow: hidden;
}<!DOCTYPE html>
<html>
<head>
<script src="https://rawgithub.com/ai/autoprefixer-rails/master/vendor/autoprefixer.js"></script>
<meta charset="utf-8">
<title>Example</title>
<style type="unprocessed" id="AutoprefixerIn">%css%</style>
<style id="AutoprefixerOut"></style>
<script>
AutoprefixerSettings = ""; //Specify here the browsers you want to target or leave empty
document.getElementById("AutoprefixerOut").innerHTML = autoprefixer(AutoprefixerSettings || null).process(document.getElementById("AutoprefixerIn").innerHTML).css;
</script>
</head>
<body>
<div class="list">
<div class="list-row">
<div class="list-column list-column--main hide-overflow">
The main column that has a very very very very very very very very very very very very very very very very very very very very very long title
</div>
<div class="list-column">
<a href="#">Close</a>
</div>
</div>
<div class="list-row">
<div class="list-column list-column--main hide-overflow">
A shorter title
</div>
<div class="list-column">
<a href="#">Close</a>
</div>
</div>
</div>
</body>
</html>最佳答案
使用 flex-shrink 属性，您可以指定当某些内容对于框来说太宽时应该收缩更多的列。
.list-column {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
}
.list-column--main {
flex-grow: 1;
flex-shrink: 100;
flex-basis: 100%;
}
list-column--main 列是唯一增长的列，但也是唯一缩小的列。其他列不会增长到超过其原始大小，也不允许收缩。
通过阅读规范，我曾预计 flex-shrink: 1 会工作得很好，但实际上，像 flex-shrink: 100 这样更大的东西确实可以我想要的。
进一步阅读(flexbox 规范):http://www.w3.org/TR/css3-flexbox/#propdef-flex-shrink
关于html - 为什么全宽 flexbox 列会挤压它的兄弟列？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27321522/
24
4
0
我的目标是运行类似 bro --iface 的命令并只获取 conn.log，但我无法从 Bro 文档或联机帮助页中得知如何执行此操作。 谢谢。 最佳答案 这让你继续: bro -i -b b
我正在使用以下 jQuery 来更改无序列表中元素的类。这似乎不是实现该效果的最有效方法。有更好的写法吗？ $(function() { $('nav li a').click( functi
我有一个看起来像这样的导航栏 Services Work Contact 当我 :hover 一项时，我想更改其他两项的样式。我可以使用什么 CSS 选择器？ 最佳答案 您
我正在寻找一种方法来选择包含特定图像的列的行内具有特定名称属性的所有输入。 下面的代码是一个说明性示例:
假设我有以下 HTML: 我想在鼠标悬停在元素上时对图标应用一些规则，可以用以下 CSS 描述: .navigation__item__icon { color: black; } .n
我的 div text-button 没有与我在其兄弟 div 下想要的正确边距对齐。我将 position: absolute; 设置到位，因为每次我将其设置为相对位置时，jQuery 动画都不起作
这个问题在这里已经有了答案: CSS margin terror; Margin adds space outside parent element [duplicate] (7 个答案) 关闭
如果我有 3 个 NSManagedObjectContext。 一个。是根上下文。 B.是一个后台保存上下文，解析一个JSON后生成NSManagedObjects C.是在 NSFetchedRe
我在容器中有三个 div:http://jsfiddle.net/fBe9y/ 一个div内容很多。如何让内容较少的其他两个 div 与最长的 div 的高度匹配？ 我尝试将 height: 100%
我正在尝试通过单击另一个元素对一个元素执行一个简单的 toggleClass。有多个元素具有相同的类，我只想切换同级/最近的元素。我相信我从根本上理解了针对 parent / child / sibl
我正在使用 AngularJS 开发一个小应用程序。我的项目包含一个包含 3 个 View 的 Body.html 文件:SideMenu、Header 和 Content，每个 View 都有自己的
在 CSS 方面，我不认为我是个笨蛋，但这个就是我。我的想法是我需要一个父元素，两侧有两个 float 子元素。我希望 parent 的高度与 child 的高度一样高，并让 child 的高度变得相
我有两个 span(s) 在父级 div 中彼此相邻。 我希望第二个 span 显示在最左边，然后是第一个 span。 (注意:由于某些原因，我不能简单地移动第二个跨度来代
今天跟大家分享下selenium中根据父子、兄弟、相邻节点定位的方法，很多人在实际应用中会遇到想定位的节点无法直接定位，需要通过附近节点来相对定位的问题，但从父节点定位子节点容易，从子节点定位父节点
这是 HTML 的结构:
我在一个包装器中并排放置了两个 div。其中一个 div 的内容比另一个多，我希望第二个 div 填充包装的垂直空间。 .wrapper { height: 50%; width: 50%;
我的网站顶部有一个带有此 CSS 的菜单: .menu { width: 100%; display: block; float: left; } 在里面，我有几个 div: .menu .menu-
我有两个 div 元素，第一个 div 中有一个按钮，如下所示。 Click 下面是我的 JavaScript 代码。 function nextDiv(el
两个同级 div(#one 和 #two)，每个都包含一些文本。 我移动#two margin-top 为负，预计它会覆盖 #one , 但当文本位于 #one 前面时，背景位于下方。 只有在 #on
我有一个容器 div，它有一个 float 的左侧导航 Pane 和一个右侧的内容 Pane : CSS: body { text-align: cent
我是一名优秀的程序员,十分优秀！