Html 使用Flex box使无序列表响应

我有一个应用程序，其中我使用一个flex框来显示8个列表项，这些列表项将随我的页面动态调整大小。如何强制它将项目拆分为两行？（每排4个）

以下是JSFIDLE：

.parent{
显示器：flex；
柔性包装：包装；
}
.孩子{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
列表样式：无；
弹性：1020%；
保证金：5px；
高度：100px；
}

A
B
C
D
E
F
G
H

不久前，我遇到了一个类似的问题，并且能够用这段代码解决它。我希望这对你有帮助

*{
框大小：边框框；
}
.家长{
显示器：flex；
柔性包装：包装；
}
.孩子{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
高度：100px；
填充：0；
保证金：0自动；
}
李先生{
填充：10px 20px；
背景：#111；
颜色：#fff；
宽度：25%；
文本对齐：居中；
边框：5px实心#fff；
列表样式：无；
}

A
B
C
D
E
F
G
H

为了能够充分利用flexbox的强大功能，请查看这一（几乎）详尽的信息。我得到了这个结果：

.parent{
字体系列：Arial，无衬线；
字体大小：12px；
}
.孩子{
显示器：flex；
柔性包装：包装；
列表样式类型：无；
保证金：5px；
填充：0；
高度：100px；
}
李先生{
宽度：23%；
高度：49px；
利润率：1×1%；
文本对齐：居中；
背景:#069 ;；
颜色：#fff；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

A
B
C
D
E
F
G
H

根据媒体查询减少div.parent的最大宽度 例：

---

注意：这只是一个示例，您应该根据ul li内容更改最大宽度

我不确定您想要的结果。flexbox的要点是它可以动态地调整元素的大小和包装元素。如果您只想有两行，每行有4个元素，您不需要它，只需设置

display:inline block；宽度：25%

在

li

元素上（另请参见）@matejcik我需要使用flexbox，谢谢我测试代码了吗？它不起作用，你自己试试，这是小提琴

@media(min-width: 1100px) {
.parent {
   max-width: 500px;
}
}

@media(max-width: 1099px) {
.parent {
   max-width: 250px;
}
}