与基本 css 的角度冲突答案

【问题标题】：Angular conflict with basic css与基本 css 的角度冲突
【发布时间】：2019-08-04 01:07:42
【问题描述】：

我正在尝试执行以下步骤来获得我想要的网格：

How to set auto-margin boxes in flexible-width design using CSS?

他们在这里提供的解决方案很好，如果我将这段代码放在 angular 之外，它就可以工作，但问题是当我将它插入到 angular 组件中时，例如 app-root

如果我把下面的代码放在组件之外（在 index.html 内）可以工作，但在另一个组件中不行。

我认为 angualr 的某些功能破坏了我的基本 css 代码，因为如果 app-root 组件外部有效而内部无效，但我没有任何风格，这很奇怪。

【问题讨论】：

你能告诉我们strech元素上的css吗？我感觉这里少了点什么
.stretch { 宽度：100%;显示：内联块；字体大小：0；行高：0 }
顺便说一句，内部组件角度不起作用而外部是没有意义的。
两种情况都一样吗？因为查看 html 代码和预期结果，感觉最后一个元素应该是占据右下角所有空白空间的元素，但在 Angular 示例中却没有。
代码完全一样，我不知道在那个角度之后是否在DOM中隐藏了一些东西

标签： css angular typescript

【解决方案1】：

我建议改用flex 进行布局。不需要任何技巧，flex 支持一切。试试这个：

.container {
    border: 2px dashed #444;
    min-width: 800px;
    max-width: 1400px;

    /*No tricks needed, flex support it all*/
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.container > div {
    margin-top: 16px;
    border: 1px dashed #f0f;
    width: 200px;
    height: 200px;
    display: inline-block;  
}

<div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

【讨论】：