我想使用flexbox,它有一些相同宽度的项目。我注意到flexbox将空间均匀分布,而不是空间本身。
例如:
css lang-css prettyprint-override">.header {
display: flex;
}
.item {
flex-grow: 1;
text-align: center;
border: 1px solid black;
}
<div class="header">
<div class="item">asdfasdfasdfasdfasdfasdf</div>
<div class="item">z</div>
</div>
第一项比第二项大得多。如果我有3个项目、4个项目或n个项目,我希望它们都显示在同一行,每个项目的空间相等。
有什么想法吗?
http://codepen.io/anon/pen/gbJBqM
如果项目的内容使列变大,则需要添加宽: 0
以使列相等。
.item {
flex: 1 1 0;
width: 0;
}
您可以添加flex-basis:100%
来实现这一点。
更新示例
.header {
display: flex;
}
.item {
flex-basis: 100%;
text-align: center;
border: 1px solid black;
}
为了获得更好的效果,您还可以使用flex:1
获得相同的结果。
flex:1
的简写形式与flex:1 10
相同,相当于:
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
text-align: center;
border: 1px solid black;
}
设置它们,使它们的flex基础
为0
(因此所有元素具有相同的起点),并允许它们增长:
flex: 1 1 0px
您的IDE或linter可能会提到度量单位“px”是冗余的
。如果不使用它(如:flex:11 0
),IE将无法正确呈现此内容。因此,@fabb的评论中提到,px
需要支持Internet Explorer;
问题内容: 我想使用具有一些相同宽度的项目的flexbox。我注意到flexbox将空间均匀分布,而不是空间本身。 例如: 第一项比第二项大很多。如果我有3个项目,4个项目或n个项目,则我希望它们全部显示在同一行上,每个项目具有相等的空间。 有任何想法吗? http://codepen.io/anon/pen/gbJBqM 问题答案: 对其进行设置,使它们成为(因此所有元素都具有相同的起点),并允
这里的初学者。出于某种原因,在我编码的网站上,未来的按钮在导航栏上没有水平对齐。我正在使用flexbox,但即使如此,它也没有像我希望的那样对齐它们。代码中似乎也没有任何问题。 右侧按钮似乎比左侧按钮低约5px。在这里我完全不知所措,我的代码中似乎没有任何错误导致这种情况。应该修复它的Flexbox标记也不会做任何事情,例如
问题内容: 我现在有这个: 我想做的是在flexbox中每行有5个项目。目前,它们没有显示是因为它们没有设置宽度/高度,这使我想到了下一个问题。是否可以自动调整项目的大小,以便每行容纳5个项目? 我该怎么做? 谢谢! 问题答案: 您给出的a是正确的,但是您必须调整每个 flex项目 上的4px边距以使其正确 包装 。 最后一行的等宽Flex项目 用途-这表示商品的宽度不会超过宽度的20%(调整边距
https://jsfidle.net/vhem8scs/ 是否可以用FlexBox将两个项目左对齐,一个项目右对齐?链接更清楚地表明了这一点。最后一个例子是我想要实现的。 在flexbox中,我有一个代码块。对于float,我有四个代码块。这是我更喜欢FlexBox的一个原因。 HTML CSS
问题内容: 有没有一种简单的方法来检查Golang项目的大小?它不是可执行文件,而是我要在自己的项目中导入的软件包。 问题答案: 您可以通过查看目录来查看库二进制文件的大小(如果未导出,则默认为)。 因此要检查一些http pkgs 的大小。首先安装它们: 我的64位MacOS()的KB二进制大小: 编辑: 库(包)的大小是一回事,但是在链接阶段之后,可执行文件中占用的空间可能有很大的不同。这是因
问题内容: 我正在使用一个伸缩框来显示8个项目,这些项目将随我的页面动态调整大小。如何强制将项目分成两行?(每行4个)? 这是一个相关的片段: 问题答案: 您已经在容器上了。很好,因为它会覆盖默认值source。这是在某些情况下项目无法包装形成网格的原因。 在这种情况下,主要问题在于伸缩项目。 该属性实际上并没有设置弹性项目的大小。它的任务是在容器源中分配可用空间。因此,无论屏幕尺寸有多小,每一项