如何在两个 flexbox 之间设置 space
How to set space between two flexbox
我正在使用 material 设计 flexbox 布局,在一个盒子里,我有两个盒子。我在 jsfiddle 上创建,以阐明我的意思:
我想在这些框之间设置一个space
<div flex layout="row" layout-align="space-between center">
<md-toolbar flex="15">
<h2 class="md-toolbar-tools">
<span>Home</span>
</h2>
</md-toolbar>
<!--How to set space between -->
<md-toolbar>
<h2 class="md-toolbar-tools" layout-align="end center">
<span>Sign Up</span>
<span>Sign In</span>
</h2>
</md-toolbar>
</div>
我认为你可以做得更简单:
<md-toolbar>
<div class="md-toolbar-tools">
<span>Home</span>
<span flex></span>
<div>
<span>Sign Up</span>
<span>Sign In</span>
</div>
</div>
</md-toolbar>
您可以在 HOME 和 SIGNUP 元素之间插入灵活的元素,它将填充它们之间的 space。
我觉得你需要的是'layout-margin'
https://material.angularjs.org/latest/layout/options
<div layout="row" layout-margin>
<div flex>Parent layout and this element have margins.</div>
</div>
对于那些对使用 Angular Flex Layout, you can achieve this with fxLayoutGap directive 的解决方案感兴趣的人。
没有 fxLayoutGap
<div fxLayout="row">
<div>1. One</div> <div>2. Two</div> <div>3. Three</div> <div>4. Four</div>
</div>
使用 fxLayoutGap
<div fxLayout="row" fxLayoutGap="20px">
<div>1. One</div> <div>2. Two</div> <div>3. Three</div> <div>4. Four</div>
</div>
我正在使用 material 设计 flexbox 布局,在一个盒子里,我有两个盒子。我在 jsfiddle 上创建,以阐明我的意思:
我想在这些框之间设置一个space
<div flex layout="row" layout-align="space-between center">
<md-toolbar flex="15">
<h2 class="md-toolbar-tools">
<span>Home</span>
</h2>
</md-toolbar>
<!--How to set space between -->
<md-toolbar>
<h2 class="md-toolbar-tools" layout-align="end center">
<span>Sign Up</span>
<span>Sign In</span>
</h2>
</md-toolbar>
</div>
我认为你可以做得更简单:
<md-toolbar>
<div class="md-toolbar-tools">
<span>Home</span>
<span flex></span>
<div>
<span>Sign Up</span>
<span>Sign In</span>
</div>
</div>
</md-toolbar>
您可以在 HOME 和 SIGNUP 元素之间插入灵活的元素,它将填充它们之间的 space。
我觉得你需要的是'layout-margin' https://material.angularjs.org/latest/layout/options
<div layout="row" layout-margin>
<div flex>Parent layout and this element have margins.</div>
</div>
对于那些对使用 Angular Flex Layout, you can achieve this with fxLayoutGap directive 的解决方案感兴趣的人。
没有 fxLayoutGap
<div fxLayout="row">
<div>1. One</div> <div>2. Two</div> <div>3. Three</div> <div>4. Four</div>
</div>
使用 fxLayoutGap
<div fxLayout="row" fxLayoutGap="20px">
<div>1. One</div> <div>2. Two</div> <div>3. Three</div> <div>4. Four</div>
</div>