Question

开发一个网站并尝试表现和优化我的代码，我意识到属性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属性的所有不同值，第二个名称包含每个标记的不同属性，如颜色，宽度，高度等。

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

Compatibility.css

.flex{
     display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
     display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
     display: -ms-flexbox;      /* TWEENER - IE 10 */
     display: -webkit-flex;     /* NEW - Chrome */
     display: flex;      
}

    .
    .
    .

在我这样做之后，我尝试添加响应式设计，使用媒体查询更改某些值，但我意识到，对于我想要更改的flex属性，我必须添加！important属性或等于HTML css调用的指定

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

感谢您的建议。

Answer 1

听起来最好使用描述元素的类名，并在CSS中为这些类放置所需的所有样式。

如果您要重复使用这些相同的样式并且更喜欢使用通用帮助程序类，例如flex和valign_center，但是对于不同的视口大小需要不同的样式，您可以只添加辅助类例如valign_center_sm valign_center_md valign_center_lg valign_center_xl和valign_top_sm等。

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

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

CSS：

.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;
    }
}

此示例将在移动设备上拉伸，顶部对齐＆gt; 768px并居中对齐＆gt; 1200px。如果您想首先使用CSS桌面而不是移动优先，则需要在媒体查询中使用max-width而不是min-width。

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

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

1 个答案: