在html中显示flex及其所有兼容性。类与Id和标签

开发一个网站并尝试性能和优化我的代码，我意识到属性

display:flex

根据版本和浏览器有更多的调用方式

一开始，我把所有的东西都贴上了下面的代码：

section{
    display: flex;
    justify-content: center;
    align-items: center;
}

section > div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

section > div > h1{
     display: flex;
     cursor: default;
     align-items: center;
}

然后我意识到我可以通过调用2个css来做同样的事情。第一个名为compatibility.css，其中包含flex属性的所有不同值，第二个名为compatibility.css，其中每个标记的属性都不同，如颜色、宽度、高度等

 <section class="justify_center valign_center">
        <div class="flex valign_center flex_direction_column justify_center">
            <h1 class="flex, valign_center></h1>
    .
    .
    .

完成后，我尝试添加响应性设计，通过媒体查询更改一些值，但我意识到，对于我想要更改的flex属性，我必须添加一个！重要属性或与指定HTML css调用相同的属性

因此，我要寻找的是一个建议，我应该在哪里编写所有这些不同的组合，以及是否可以方便地将所有内容都放在CSS中而不是HTML类中

---

感谢您的建议。

听起来，最好使用类名来描述元素是什么，并将您需要的所有样式都放在这些类的CSS中

如果您经常重复使用这些相同的样式，并且更喜欢使用像

flex

和

valign_center

这样的通用帮助器类，但需要为不同的视口大小使用不同的样式，您可以添加助手类，如

valign\u center\u sm

valign\u center\u md

valign\u center\u lg

valign\u center\u xl

和

valign\u top\u sm

等

然后你可以做这样的事情：

<div class="valign_stretch valign_top_sm valign_center_lg"></div>

此示例将在移动设备上对其进行拉伸，顶部对齐>768px，中心对齐>1200px。如果您想先使用CSS桌面而不是移动设备，则需要在媒体查询中使用

max width

而不是

min width

---

如果没有更多信息，我真的无法确定哪种方法更好，但希望这能有所帮助。

最好在CodeReview上寻求关于如何改进现有工作代码的建议，CodeReview是堆栈溢出的姐妹站点。由于这是一个固执己见的问题（即“哪一个更好？”），因此在这里是离题的。回答自以为是的问题是吸引不同意你观点的人投反对票的好方法。2.像

valign\u center

这样的类名与OP正在考虑使用的类名没有什么语义上的区别。@cimmanon我只是建议他如何使用断点修饰符来避免使用

！重要信息

。我并不是说

valign_center

比他目前使用的更具语义性——这是他目前使用的。。。事实上，我的建议正好相反，如果这些助手类没有被大量重复使用，那么使用更多的语义类名可能会更方便。OP不是问他们是否应该使用

！重要信息

@cimmanon我觉得他好像在问他可以把样式放在哪里，以避免使用

！重要信息

。我给了他两个选择。好吧，在多次研究这个案例并试图理解类是如何工作的（因为问题主要就在那里）之后，我最终决定，在我的html css文件中，将所有由冒号分隔的选择器分组，为该组设置flex属性，并具有所有不同的兼容性。

<div class="valign_stretch valign_top_sm valign_center_lg"></div>

.valign_stretch{
   align-items: stretch;
}

@media only screen and (min-width : 768px) {
    .valign_top_sm{
        align-items: flex-start;
    }
}

@media only screen and (min-width : 1200px) {
    .valign_center_lg{
        align-items: center;
    }
}