所以我有一个带有Flex元素的Flex Parent.我想有这样的行为：

在行模式下，
• 空间在Flex子节点之间平均分配。
假设
• 每个子节点的最小宽度为100px.
• 当宽度小于100px时，包裹Flexbox.
当
• 包裹时，子对象使用最大宽度。
如果我不需要媒体查询，
• 那就太好了，用媒体查询相对容易。

这可能吗？

我的代码是：

<代码>.连接>；UL{高度：100%；宽度：100%；列表样式：无；显示：Flex；Flex-Wrap：缠绕；正当-内容：间隔空间；align-items：居中；Justify-content：中心；间距：20px；}.连接>；UL>；李{高度：50px；灵活增长：1；}.连接按钮{最小宽度：100px；高度：100%；显示：Flex；align-items：居中；Justify-content：中心；过渡段：0.3s；位置：相对；}.discord-button{背景色：#5865F2；}.Spotify-button{背景色：#1DB954；}.xbox-button{背景色：#107C10；}.蒸汽按钮{背景色：#1B2838；}.github-button{背景色：#14232C；}.Gmail-button{背景色：#EA4335；}.discord-connection-button：hover{背景色：RGBA（88，101，242，0.6）；}.Spotify-connection-button：hover{背景色：RGBA（30，215，96，0.6）；}.steam-connection-button：hover{背景色：RGBA（68，96，130，0.6）；}.github-connection-button：hover{背景色：RGBA（255，255，255，0.6）；}.email-connection-button：hover{背景色：RGBA（212，70，56，0.6）；}

<代码><；DIV类=“连接”>；<；UL>；<；Li>；<；A HREF=“#discord ” CLASS=“ connection-button discord-button ”>；不一致<；/A>；<；/Li>；<；Li>；<；A HREF=“#Spotify ” TARGET=“_空白” CLASS=“连接按钮Spotify-button ” Spotify<；/A>；<；/Li>；<；Li>；<；A HREF=“#Xbox ” TARGET=“_空白” CLASS=“连接按钮Xbox按钮” Xbox<；/A>；<；/Li>；<；Li>；<；A href=“#steam ” target=“_空白” Class=“连接按钮蒸汽按钮”蒸汽<；/A>；<；/Li>；<；Li>；<；A HREF=“#github ” TARGET=“_空白” CLASS=“连接按钮github按钮”>；github<；/A>；<；/Li>；<；Li>；<；a href=“#email ” Class=“ connection-button Gmail-button ”>；电子邮件<；/a>；<；/Li>；<；/UL>；<；/DIV>；

通常，在.connections>ul { height: 100%; width: 100%; list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; justify-content: center; gap: 20px; } .connections>ul>li { height: 50px; flex-grow: 1; } .connection-button { min-width: 100px; height: 100%; display: flex; align-items: center; justify-content: center; transition: 0.3s; position: relative; } .discord-button { background-color: #5865F2; } .spotify-button { background-color: #1DB954; } .xbox-button { background-color: #107C10; } .steam-button { background-color: #1b2838; } .github-button { background-color: #14232c; } .gmail-button { background-color: #EA4335; } .discord-connection-button:hover { background-color: rgba(88, 101, 242, 0.6); } .spotify-connection-button:hover { background-color: rgba(30, 215, 96, 0.6); } .steam-connection-button:hover { background-color: rgba(68, 96, 130, 0.6); } .github-connection-button:hover { background-color: rgba(255, 255, 255, 0.6); } .email-connection-button:hover { background-color: rgba(212, 70, 56, 0.6); }标记中存在具有向量的绝对位置图像。

顺晟科技：

我不知道有一种方法可以只使用CSS，而不使用媒体查询。或者，您可以使用JS来添加或删除类，但这听起来不像是您想要的。此外，无论如何，媒体查询将比JS更轻，所以这可能是要走的路。

此外，我不确定这个项目的目的是什么，但如果你有其他开发人员在开发它，他们可能会寻找媒体查询，所以坚持惯例无论如何都是有益的。