代码之家 › 专栏 › 技术社区 › user5047085

在弹性行之间添加空间

flexbox css angular html

user5047085 · 技术社区 · 8 年前

我有一个角度为5的html组件:

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

<div fxLayout="column">

  <div fxLayout="row">
    <button mat-raised-button color="accent">
          <mat-icon>play_button</mat-icon>
          Start Recording
        </button>
  </div>

  <div fxLayout="row">
  </div>

  <div fxLayout="row">
    <button mat-raised-button color="accent">
          <mat-icon>play_button</mat-icon>
          Stop Recording
        </button>
  </div>

  <div fxLayout="row">
  </div>

  <div fxLayout="row">
    <div fxLayout="column">
      <div>
        <mat-checkbox>Firefox</mat-checkbox>
      </div>

      <div>
        <mat-checkbox>Chrome</mat-checkbox>
      </div>

      <div>
        <mat-checkbox>Allow XPath</mat-checkbox>
      </div>
    </div>
  </div>

</div>

它呈现为:

我尝试添加此CSS以增加元素之间的间距:

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

但这不起作用-如何在元素之间添加垂直间距?

1 回复 | 直到 8 年前

Lakindu Gunasekara vinod 8 年前

我已删除 fxLayout row ,并添加了一个自定义类来解决此问题。

请参考他们的文档,了解他们如何使用 一行 . https://github.com/angular/flex-layout/wiki/fxLayout-API

如果您正在使用 <div fxLayout="row"> ,它将帮助您保持水平。

如果您使用 <div fxLayout="column"> ,它将如下图所示。

因此,最好不要使代码复杂化。所以你只能用一个 column 完成它

以下是片段。

.row {
  margin: 10px;
}

<div fxLayout="column">
  <div class="row">
    <button mat-raised-button color="accent">
          <mat-icon>play_button</mat-icon>
          Start Recording
        </button>
  </div>
  <div class="row">
    <button mat-raised-button color="accent">
          <mat-icon>play_button</mat-icon>
          Stop Recording
        </button>
  </div>
</div>
<div fxLayout="column">
  <div class="row">
    <mat-checkbox>Firefox</mat-checkbox>
  </div>

  <div class="row">
    <mat-checkbox>Chrome</mat-checkbox>
  </div>

  <div class="row">
    <mat-checkbox>Allow XPath</mat-checkbox>
  </div>
</div>

希望这是有用的。

推荐文章

JWWalker · CSS的resize属性可以用来调整flex列宽吗?

1 年前

Sidaqpreet Singh · 为什么当设置为包裹时,柔性包裹会导致横轴出现间隙?

1 年前

rifx · 在kendoTreeViewNodeTemplate(Angular)中设置数据项的样式

1 年前

Fox L · 每行4个项目,但如果少于4个项目则留空?

1 年前

Zack Riquelme · 如何使用CSS将HTML的<header>中的<a>和<nav>内容在同一个父框中左右拆分?

1 年前

JobHunter69 · 为什么这个组件不填充整个宽度?

1 年前

Vasantha Kalyani · Flexbox Html CSS设置位置问题[重复]

1 年前

coder · 边界半径不适用于容器元素

1 年前

user9026 · 项目登录页面(freecodecamp)定价设计

2 年前

Bo Thompson · 根据需要调整柔性物品的高度,但不得超过容器

2 年前