홈>
각 재료와 플렉스 레이아웃을 사용하여 반응 형을 만들었습니다. 데스크톱 및 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
관련 질문
- css - 각도 전역 스타일의 여백이 적용되지 않습니다
- angular - primeng - p-inputnumber에 대한 css 배경
- css - primeNg 라디오 버튼에 스타일 설정
- javascript - 다중 선택을 보여주는 재료 선택 상자
- Overwrite angular material css - 각도 재질 CSS 덮어 쓰기 —! important가 작동하는 이유
- css - 자리 표시자가 아닌 입력 값에 문자 간격을 추가하는 방법 (Angular 11)
- javascript - Ag- 그리드 버튼 클릭이 셀 내부에서 작동하지 않습니다
- html - 최소 높이에서도 채우지 않는 div - 100 %;
- css - 백엔드에서 파싱되지 않은 스타일링
- css - 서로 다른 구성 요소의 동일한 요소에 대해 2ng 깊이의 각도
가장 쉽고 편리한 플렉스 컨테이너에 ngClass.xs를 설정하는 것입니다
여기서
.mobileContainer
입니다여기 간단한 데모가 있습니다 https://stackblitz.com/edit/angular-dufpaa
부담으로;
당신은fxFlex.xs="90%"
가 필요하지 않습니다mat-form-field
에서fxLayout.xs="column"
로 인한 요소 컨테이너에xs
의 열 레이아웃이 있습니다. 스크린과fxFlex.xs="90%"
열 레이아웃에서 "부모의 키를 90 % 차지함"을 의미합니다.flex-shrink
로 기본적으로1
아무런 효과가 없습니다.