Question

我目前在我的角度项目中有一个简单的页眉，主页脚结构，并且想要使主要组件成为一个弹性框，以便以相等的宽度水平排列所有给定的组件。另外，当屏幕宽度低于700px到列时，我想更改弯曲方向。由于我已经用纯HTML + CSS实现了这一点（参见jsfiddle：http://jsfiddle.net/aJPw7/443/），我觉得这与角度父组件有关。

预期行为：两个<app-content-section>元素各占<app-main-component>和100％高度的50％宽度。当我将弯曲方向更改为列时，它们应具有100％宽度和50％高度：

好的行为：<app-content-section>元素在我使用“justify-content”时对齐，但不受任何高度或宽度属性的影响。

的style.css

html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

app-root HTML：

<app-main-component>
    <app-content-section></app-content-section>
    <app-content-section></app-content-section>
</app-main-component>

app-main-component HTML：

<div class="main-component"> 
    <ng-content></ng-content>
</div>

app-main-component CSS：

.main-component {
    display: flex;
    flex-direction: row;
    height: 100%;
}

@media screen and (max-width: 700px) {
    .main-component {
        flex-direction: column;
    }
}

app-content-section HTML：

<div class="content-section">
    <a>Test</a>
</div>

app-content-section CSS：

.content-section {
    width: 100%;
    height: 100%;
}

编辑1：我也试过:host{ }，但仍然没有运气。

Edit2：我创建了另一个jsfiddle，通过设置host-element并添加flex: 1来获得正确的宽度，但元素仍然不会使用整个高度。 https://jsfiddle.net/1c15q243/19/

Answer 1

So the correct answer is adding a :host{ flex: 1; } in the "app-content-section CSS" in order to give its hosting-component <app-content-section> the correct flex-sizing.

I figured it out in the fiddle of my second edit, but @karthikaruna pointed out that I forgot to add HTML- tag in the stylig file.

Answer 2

将100％高度设为<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <ol> <li><a href="#" target="_blank">Link 1 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr</a></li> <li><a href="#" target="_blank">Link 2 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr</a></li> <li><a href="#" target="_blank">Link 3 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr</a></li> <li><a href="#" target="_blank">Link 4 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr</a></li> </ol>。 Here是更新的小提琴。

Flexbox-Layout与Angular-Components

2 个答案: