角度材质Flexbox - 如何在包装行之间添加边距？ [英] Angular Material Flexbox - How to add margin between wrapped rows?

问题描述

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

我创建了此因此，我有一行的项目超过了该行的100％，并启用了换行功能，所以我得到了两行没有页边空白的项目，像这样：

 < div class =rowlayout =rowlayout-wrap =wrap> 
< div flex =50class =item1>< / div> 
< div flex =50class =item2>< / div> 
< div flex =50class =item3>< / div> 
< div flex =50class =item4>< / div> 
< / div> 
  

我正在使用这个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; 
} 
  

我希望在他们周围的每个项目有一个均匀的边距（比如10px） 。

我尝试设置边界像正常，但然后项目不能正确包装，每行只给我一个项目。

当我将一个子div添加到一个项目并设置 margin时，我成功获得了左右边距： 10px; 但是顶部和底部边距被完全忽略。

所以，我怎样才能得到一行以10px的间距）每个包装行？

解决方案

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

  flex =50（计算为flex：1 1 50％[flex-grow，flex-shrink，flex-basis]）
  
 
 
 .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.

这篇关于角度材质Flexbox - 如何在包装行之间添加边距？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！