Angular Material Flexbox - 如何在包裹的行之间添加边距?

问题描述

我正在使用 Angular Material 及其 flexbox 功能.

我现在遇到了一个在我看来应该很简单的问题，但我遇到了问题.

我创建了 this Codepen 来演示我的问题.

所以我有一排项目超过了该行的 100% 并且启用了换行，所以我得到两行没有边距的项目，如下所示:

<div flex="50" class="item1"></div><div flex="50" class="item2"></div><div flex="50" class="item3"></div><div flex="50" class="item4"></div>

我正在使用这个 CSS:

.row {背景颜色:灰色；填充:10px；}.item1 {高度:200px；背景颜色:蓝色；}.item2 {背景颜色:红色；}.item3 {背景颜色:黑色；高度:100px；}.item4 {背景颜色:绿色；}

我希望它们周围的每个项目都有均匀的边距(假设为 10 像素).

我试过像往常一样设置边距，但是这些项目没有正确包装，每行只给我一个项目.我仍然想要每行 2 个项目.

当我向项目添加子 div 并设置 margin: 10px; 时，我成功地获得了左右边距，但完全忽略了顶部和底部边距.

那么，我怎样才能让一行以 10px 的边距(垂直)包裹在每个包裹的行之间?

解决方案

您可以尝试覆盖此 Angular 指令的一部分:

flex="50" (计算为 flex: 1 1 50% [flex-grow, flex-shrink, flex-basis])

使用此 CSS:

.row >div {flex-basis: calc(50% - 20px) !important;/* 宽度减去水平边距 */边距:10px；}

修订后的 Codepen

阅读有关 CSS 的更多信息 calc 函数.

I'm using Angular Material and its flexbox functionality.

I have now come across an issue that seems to me should be simple, but I have problems with it.

I've created this Codepen for demostrating my issue.

So I have a row with items that exceed 100% of that row and has wrap enabled, so I get two rows of items without margins, like this:

<div class="row" layout="row" layout-wrap="wrap">
    <div flex="50" class="item1"></div>
    <div flex="50" class="item2"></div>
    <div flex="50" class="item3"></div>
    <div flex="50" class="item4"></div>
</div>

And I'm using this CSS:

.row {
    background-color: grey;
    padding: 10px;
}

.item1 {
    height: 200px;
    background-color: blue;
}

.item2 {
    background-color: red;
}

.item3 {
    backgronud-color: black;
    height: 100px;
}

.item4 {
    background-color: green;
}

I want an even margin (let's say 10px) around each item all around them.

I've tried setting margins like normal, but then the items don't wrap correctly and give me only one item per row. I still want 2 items per row.

I successfully get margins to left and right when I add a child div to an item and set margin: 10px; but top and bottom margins are totally ignored.

So, how can I get a row to wrap with a 10px margin between (vertically) each wrapped row?

解决方案

You can try overriding part of this Angular directive:

flex="50" (which computes to flex: 1 1 50% [flex-grow, flex-shrink, flex-basis])

with this CSS:

.row > div {
    flex-basis: calc(50% - 20px) !important; /* width less horizontal margins */
    margin: 10px;
}  

Revised Codepen

Read more about CSS calc function.

这篇关于Angular Material Flexbox - 如何在包裹的行之间添加边距?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！