각진 라우터 콘센트가있는 플렉스 레이아웃 (flexbox)

하나는 화면의 25 %를 차지하고 다른 하나는 컨테이너의 나머지 부분을 차지하는 각도 라우터 콘센트입니다. 다음을 사용하면 화면 양쪽에 두 요소가 가운데에 공백이 생깁니다. ** 부분은 HTML은 매트 목록을 가지고 단지 기본 HTML과 CSS각진 라우터 콘센트가있는 플렉스 레이아웃 (flexbox)

<div class="container" 
     fxLayout> 
    <admin-route-menu fxFlex="25%" fxShow.lt-sm="false"></admin-route-menu> 
    <router-outlet fxFlex></router-outlet> 
    </div>

밖으로 왼쪽에

관리자-경로 메뉴 태그처럼 보이는 오는 문제의 하나입니다 그것. 라우터 - 콘센트는 각도 사양에 따라 모든 요소를 사용할 수 있습니다. 그게 도움이된다면 admin-route-menu를 포함시킬 수 있습니다.

나는 또한 일반 플렉스 박스로 시도했지만 결과는 같습니다. 어떤 도움에 감사드립니다

.wrapper { 
    display: flex; 
    flex-direction: row; 
    align-items: stretch; 
    width: 100%; 
    height: 5em; 
    background: #ccc; 
} 
.wrapper > .wrapper-left 
{ 
    background: #fcc; 
} 
.wrapper > .wrapper-right 
{ 
    background: #ccf; 
    flex: 1; 
}

, 덕분에 비슷한 문제를 가진 사람들을위한

출처

2017-12-27 dinamix

일반 Flexbox에서는 이러한 규칙이 작동합니다. https://jsfiddle.net/6d8r4ffk/ ... 예를 들어 'justify-content'가'space-between'으로 설정되었거나 폼이 _right_ wrapper 내부에서 오른쪽 정렬되었을 때 – LGSon

작동 코드 스 니펫을 추가하면 적절한 답을 제공 할 수 있습니다. – LGSon

@LGSon 요청에 따라 더 많은 코드가 추가되었습니다. 당신은 정상적으로 작동한다는 것이 맞습니다. 이것이 플렉스 박스와 앵귤러 라우터의 문제 일 수 있습니다. – dinamix

문제가

<div class="container" 
     fxLayout> 
    <div fxFlex="25%" fxShow.lt-sm="false"> 
     <admin-route-menu></admin-route-menu> 
    </div> 
    <div fxFlex> 
     <router-outlet></router-outlet> 
    </div> 
    </div>

을 수행하여 해결되었다 기본적으로 항상 일부 사용자 지정 요소로 각 플렉스 레이아웃 모듈로 된 div를 사용 라우터 출력과 같이 멋지게 사용하지 마십시오.

출처

2017-12-29 15:15:27 dinamix

각진 라우터 콘센트가있는 플렉스 레이아웃 (flexbox)

답변

관련 문제