응답 성있는 방식으로 각도 플렉스 레이아웃을 사용하여 여러 div를 왜곡하고 가운데에 배치하는 방법

Question

을 사용하여 그림에서 효과를 만들 수있는 방법은 무엇입니까? fxLayoutWrap으로 실험했지만 아래 레이아웃이 생성되지 않습니다.

Answer 1

가장 좋은 방법은 fxLayoutWrap을 요소의 응답 성 fxFlex 크기와 결합하는 것입니다. fxLayoutGap = "#"을 설정하면 행 항목 사이에 간격이 있는지도 확인합니다. (- 재료 아이템 각도에 필요한 시간을 많이)

<div fxLayout="row" fxLayoutGap="5" fxLayoutWrap fxLayoutAlign="space-around stretch"> 
    <div fxFlex.lt-md="30" fxFlex.gt-sm="20" fxLayout="column" fxLayoutAlign="center stretch"> 
    <h1>Header</h1> 
    <p>content</p> 
    </div> 
    <div fxFlex.lt-md="30" fxFlex.gt-sm="20" fxLayout="column" fxLayoutAlign="center stretch"> 
    <h1>Header</h1> 
    <p>content</p> 
    </div> 
    . 
    . 
    . 
</div> 

그리고 당신은 this live demo 본적이 없다면 내가보기 엔 그것을 확인 권하고 싶습니다 내부 사업부의 위/아래의 여백을 설정하면 행 사이의 간격을 처리 할 수 ​​있습니다 변경 사항을 실시간으로 확인하여 플렉스 레이아웃이 어떻게 작동하는지 더 잘 이해할 수있는 놀라운 방법입니다.