使用flex-layout

Question

我目前有一个看似如下的组件：

import { Component } from '@angular/core';

@Component({
  selector: 'home-about',
  template: `
    <div
      fxFlex="50"
      fxLayout="column"
      fxLayoutAlign="center"
    >
      <div>
        <h2>About This Site</h2>
      </div>
      <p>
    TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
    TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
    TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
    TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
      </p>
    </div>
  `
})
export class HomeAboutComponent {}

产生这个：

我追求的是这样的：

我通过应用样式类将上述文本集中在页面上：

  styles: [`
    .aboutContainer {
      margin: 0 auto;
    }
  `],

添加CSS类似乎有点太多了，我应该能够将div居中，并使用flex-layout将flex设置为50%。我不太确定我哪里出错了。

Answer 1

`<div fxLayout="column" fxLayoutAlign="center center">
  <div>
    <h2>About This Site</h2>
  </div>
  <p>
     TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
     TEXT TEXT TEXT TEXT
     TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
     TEXT TEXT TEXT TEXT
     TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
     TEXT TEXT TEXT TEXT
     TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
     TEXT TEXT TEXT TEXT
  </p>
</div>`

我认为这就是你正在寻找的@Harpal

Answer 2

“ fxLayoutAlign”的第一个参数使内容沿主轴对齐，并且基于“ fxLayout”属性确定内容。

因此，如果您有fxLayout =“ column”，主轴将变为“顶部->底部”，并且设置fxLayoutAlign =“ center”将使内容沿主轴（垂直）而不是水平（左- >右）。

要水平居中对齐内容（左->右）并将div的宽度设置为50％，我们需要用div包装内容并添加fxLayout =“ row”，然后设置其fxLayoutAlign =“ center “，然后在子div上设置fxFlex =” 50“。

要从上至下显示子项并进一步居中对齐（从左到右），我们需要添加fxLayout =“ column”和fxLayoutAlign =“ start center”。 （在这种情况下，“开始”是沿主轴的默认值（在这种情况下，因为fxLayout设置为列，因此是“上->下”），而中心是跨轴的值（左->右）

<div fxLayout="row" fxLayoutAlign="center">
    <div fxFlex="50" fxLayout="column" fxLayoutAlign="start center">
        <div>
           <h2>About This Site</h2>
        </div>
        <p>
            TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
            TEXT TEXT TEXT TEXT
            TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
            TEXT TEXT TEXT TEXT
            TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
            TEXT TEXT TEXT TEXT
            TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
            TEXT TEXT TEXT TEXT
        </p>
   </div>
</div>