Question

我正在尝试使用flexbox设置图像的网格显示。一切正常，布局看起来不错，除非我有4张图片。

这是我目前的图片代码

section.flex-container .field-items {
  display: flex;
  justify-content: center;
  flex-wrap: wrap-reverse;
  align-items: stretch;
}
section.flex-container .field-items .field-item {
  display: inline;
  flex-grow: 1;
  width: 33%;
  padding: 10px;
}

当存在4个.field项时，有什么办法可以将宽度增加到50％？同样，我只想在有4张图像的时候发生50％。

可以在codepen上找到演示：Demo

Answer 1

你可以通过兄弟计数实现这个目标，如果你之前从未使用它，这是非常好的。您可能已经熟悉伪类:nth-child，它允许您根据其在子列表中的位置选择某些内容。

来了:nth-last-child。两者之间的区别在于 nth-child适用于从顶部算起的nth child（即，{ 在nth-last-child nth child之前有n-1个元素的孩子适用于从底部算起的.field-item（即，孩子那个它之后有n-1个元素！）。（Original | Follow-up）

使用兄弟计数，当section.flex-container { .field-items{ .field-item { &:first-child:nth-last-child(4), &:first-child:nth-last-child(4) + .field-item { width:50%; } } } }有4个项目时，您可以增加<taskdef resource="net/sf/antcontrib/antlib.xml"> <classpath> <pathelement location="../.ant/antcontrib.jar"/> </classpath> </taskdef> <loadfile property="file" srcfile="./dist/DB_Critical_Stub_Data.txt"/> <target name="read" depends="check-stub-status"> <for param="line" list="${file}" delimiter="${line.separator}"> <sequential> <antcall target="start-stub"> </antcall> </sequential> </for> </target> <target name="start-stub"> <startStub domain="..." environment="..." name="@{line}" securityToken="..." serverURL="..." dedicatedEngine="false"/> </target>的宽度：

{{1}}

CodePen

当有4个子项时，将flexbox宽度切换为50％

1 个答案: