个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我正在使用 flex 创建一个多列列表，它根据容器的宽度调整列数。
我发现的问题是，如果我想通过将 flex-grow 设置为 1 来使用父级的整个宽度，最后一个换行中的元素会错位，因为它们试图填充父级。
我发现了两个对我不起作用的解决方法:一个使用了媒体查询，我不能使用它，因为父级与视口(viewport)的宽度不同；另一个使用的是 columns，但我不能使用它，因为它会导致轮廓被切断和包裹的问题，我在实际设置中遇到了这种情况。
问:有没有办法让所有元素都具有相同的宽度，同时在整行中填充父级？
* {
box-sizing: border-box;
}
.wrapper {
border: 1px solid red;
width: 50%;
}
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
margin: -1em -1em 0 0;
}
li {
border: 1px solid black;
padding: 1em;
margin: 1em 1em 0 0;
flex: 1 1 10em;
}<div class="wrapper">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
</div>https://plnkr.co/edit/0u2QxcdLkDfhwV3zASrM
调整大小直到最后一行有 2 个元素。
最佳答案
添加一些额外的 flex 元素并通过将它们的高度/填充/边框设置为 0/无使它们“不可见”。根据您需要的列数，它需要少一列才能工作。
* {
box-sizing: border-box;
}
.wrapper {
border: 1px solid red;
width: 100%;
max-width: 800px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
margin: -1em -1em 0 0;
}
li {
border: 1px solid black;
padding: 1em;
margin: 1em 1em 0 0;
flex: 1 1 10em;
}
li:nth-last-child(-n+3) {
height: 0;
border: none;
padding: 0;
margin: 0 1em 0 0;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="wrapper">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>如果除额外元素外的所有元素都有内容，您也可以使用此 CSS 规则(感谢 Rick Hitchcock)
li:empty {
height: 0;
border: none;
padding: 0;
margin: 1em 1em 0 0;
}
如果列数永远不会超过 3，可以使用伪元素。 (好吧，列数可以更多，只要最后一行永远不会丢失超过 2 个元素)
* {
box-sizing: border-box;
}
.wrapper {
border: 1px solid red;
width: 100%;
max-width: 800px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
margin: -1em -1em 0 0;
}
li {
border: 1px solid black;
padding: 1em;
margin: 1em 1em 0 0;
flex: 1 1 10em;
}
ul::before, ul::after {
content: '';
height: 0;
border: none;
padding: 0;
margin: 0 1em 0 0;
flex: 1 1 10em;
order: 999; /* they need to be last */
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="wrapper">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
</div>
</body>
</html>关于css - 柔性 : wrapped items with same width as the rest，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42767664/
27
4
0
我正在用 Ionic 构建一个库，其中一个要求是我不能添加类并且不能使用父元素或容器来修改或访问我们的元素。 带有按钮的搜索字段应该与图片中的一样: 我只有两个兄弟元素: Button 我如何强制搜
我有一个Groovy服务器和Flex客户端。当我尝试从Flex连接到Groovy应用程序时，我显示消息。然后，我发送一些策略XML响应，并尝试将某些内容发送到服务器。但是我没有得到Groovy方面的帮
我有类 com.company.project.views.SomeClass。我有
这是 .lex 文件的片段: /* Empty line just with the newline character signs end of the title block
我正在尝试使用 FLEX 和 BISON 进行一些练习。 这是我写的代码: calc_pol.y %{ #define YYSTYPE double #include "calc_pol.tab.h"
我有两个问题: 我正在尝试通过 this page 嵌入字体在 livedocs 中。 谁能告诉我使用外部样式表需要做什么？ 应该它是样式表还是 mxml 文件？我看到了this tutorial ，
我想在背景中有一张图片，在它上面有另一张图片(透明)和一些文字说明。 我尝试了以下代码，但它不起作用，因为它为三个组件分配了三个等号空间。 有没有办法让组件相互叠加？ 图片代码: export def
我是 Flex 的新手，只是想玩一下 Mate 框架中的示例应用程序。我在 Linux 上进行黑客攻击，所以我使用的是命令提示符和文本编辑器，而不是 Flex Builder。 示例应用程序在其根目录
在 Flex 中，很容易将 XML 转换为 Object 和 ArrayCollection，方法是使用 var decoder:SimpleXMLDecoder = new SimpleXMLDec
我正在使用 flex 创建一个多列列表，它根据容器的宽度调整列数。 我发现的问题是，如果我想通过将 flex-grow 设置为 1 来使用父级的整个宽度，最后一个换行中的元素会错位，因为它们试图填充父
选择数据网格中所有项目的最佳方式是什么。 我想做一个 for 循环，然后选择每个项目，但有没有更好的方法来实现这一点？ 最佳答案 您使用的是什么类型的 dataProvider？ 如果你有一个数组，你
根据容器的宽度，是否有可能以及如何实现(如果有)多行 TabBar？ 最佳答案 就像给 TabBar 一个 TileLayout 一样简单。您不必继承 TabBar，甚至不必为它创建自定义外观类。只需
好的，我有一个 HTTPService，只要它从 send() 调用获得结果，它就会执行 dataLoaded(e:ResultEvent):void 函数。 好的，所以如果我调用 HTTPServi
所以文档有这个漂亮的“in”运算符，我更喜欢使用多步骤或语句 (||) 的想法。文档给了我这个例子。 trace("PI" in Math); // true trace("myPro
我正在尝试在 Flex 中执行与 PHP ucwords() 等效的操作。我不希望整个字符串大写，只是每个单词的第一个字母。有谁知道方法吗？ 谢谢! 最佳答案 尝试 str.replace(/\b./
我花了两天的时间绞尽脑汁试图找出程序为什么会这样。对于一个类(class)项目，我正在尝试编写一个程序来解析地址并以某种方式输出它。在我真正到达程序的输出部分之前，我只是想确保我的 Bison-fu
一切正常，但我希望屏幕较小时居中对齐，它居中对齐，但屏幕之外还有一个空间出现。 代码: .example { line-height: 30px; background-color: #363
我有一个 Flex ActionScript 组件。如何将 CSS 应用到该组件？我希望能够应用来自外部 CSS 文件的样式。 文件“global.css”中的 CSS 选择器: .myPanel {
试图更好地对齐一行的某些小节。我已经设法在同一行上获得“阅读更多”按钮，使用 flex: 1;。但是，我似乎无法很好地对齐图像的顶部和第一段的开头。 布局是一系列 div，里面有文章:
这个问题在这里已经有了答案: Proper use of flex properties when nesting flex containers (1 个回答) 关闭 5 年前。
我是一名优秀的程序员,十分优秀！