>

각 재료와 플렉스 레이아웃을 사용하여 반응 형을 만들었습니다. 데스크톱 및 ipad 화면에서 제대로 작동합니다.

휴대 기기의 경우 양식 필드를 가운데에 맞추고 화면의 왼쪽과 오른쪽에 여백을 추가하고 싶습니다. flex-layout에서 수행하는 방법이 있습니까?

ngClass.xs 를 사용하여 커스텀 CSS로 어떻게 할 수 없다면 ? 너비를 90 %로 설정하려고했지만 제대로 가운데에 있지 않고 이상하게 보입니다.

<div class="container" fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="2%" fxLayoutAlign="center">
  <mat-form-field appearance="standard" fxFlex="22%" fxFlex.xs="90%">
    <mat-label>Field 1</mat-label>
    <input matInput placeholder="Field 1">
    <mat-icon matSuffix>place</mat-icon>
  </mat-form-field>
  <mat-form-field appearance="standard" fxFlex="22%" fxFlex.xs="90%">
    <mat-label>Field 2</mat-label>
    <input matInput placeholder="Field 2">
    <mat-icon matSuffix>business</mat-icon>
  </mat-form-field>
  <mat-form-field appearance="standard" fxFlex="22%" fxFlex.xs="90%">
    <mat-label>Field 3</mat-label>
    <input matInput placeholder="Field 3">
    <mat-icon matSuffix>send</mat-icon>
  </mat-form-field>
  <mat-form-field appearance="standard" fxFlex="22%" fxFlex.xs="90%">
    <mat-label>Field 4</mat-label>
    <input matInput placeholder="Field 4">
  </mat-form-field>
</div>


  • 답변 # 1

    가장 쉽고 편리한 플렉스 컨테이너에 ngClass.xs를 설정하는 것입니다

    <div class="container" fxLayout="row" fxLayout.xs="column" 
         fxLayoutGap.gt-xs="2%"  fxLayoutAlign="center" ngClass.xs="mobileContainer">
    
    

    여기서 .mobileContainer  입니다

    .mobileContainer mat-form-field {
      margin: 8px 16px;
    }
    
    

    여기 간단한 데모가 있습니다 https://stackblitz.com/edit/angular-dufpaa

    부담으로;

    당신은 fxFlex.xs="90%" 가 필요하지 않습니다   mat-form-field 에서   fxLayout.xs="column" 로 인한 요소  컨테이너에 xs 의 열 레이아웃이 있습니다.  스크린과 fxFlex.xs="90%"  열 레이아웃에서 "부모의 키를 90 % 차지함"을 의미합니다. flex-shrink 로  기본적으로 1  아무런 효과가 없습니다.

  • 이전 필터 레벨을 순환하고 R로 출력을 생성하는 방법이 있습니까?
  • 다음 Python SpeechRecognition에서 언어 변경