Flexbox 레이아웃의 행 간 큰 간격 제거
내용보다 긴 사이드바가 있습니다(미리 보기와 미리 보기).
레이아웃을 작성하기 위해 플렉스박스를 사용하고 있는데, 사이드바가 미리보기보다 길면 그 사이에 큰 간격이 생깁니다.
사이드바가 좋고 짧으면 좋기 때문에 각 행에 틈이 생기지 않았으면 합니다.
나는 코데펜을 조립했다.
//page wrapper for sidebar
.flexPageWrapper {
display:flex;
/* Centering the page */
max-width:1500px;
margin:0 auto;
}
//search results flexbox container
.searchContentWrap {
flex-grow: 1;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
margin-right: 1em;
flex-direction: row;
}
플렉스 컨테이너의 초기 설정은 입니다.
즉, 플렉스 컨테이너의 여러 줄이 확장되어 컨테이너의 길이(이 경우 높이)를 커버합니다.
사이드바가 컨테이너 높이를 증가시켜 축소판 그림 콘텐츠가 더 큰 공간에 배포됩니다.
이 기본 동작은 다음과 같이 덮어쓸 수 있습니다.align-content: flex-start.
.searchContentWrap {
flex-grow: 1;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
margin-right: 1em;
flex-direction: row;
align-content: flex-start; /* NEW */
}
언급URL : https://stackoverflow.com/questions/38084835/removing-large-gap-between-rows-in-flexbox-layout
'programing' 카테고리의 다른 글
| 블로그 투고로서 WordPress에 페이스북 페이지 투고를 끌어오는 방법은? (0) | 2023.03.15 |
|---|---|
| 웹 사이트 하위 폴더로 다른 폴더 (0) | 2023.03.15 |
| 쇼트 코드 내부의 쇼트 코드 - 워드프레스 (0) | 2023.03.15 |
| 아직 마운트되지 않은 구성 요소에서 setState를 호출할 수 없습니다. (0) | 2023.03.15 |
| Gradle > gradle boot Run으로 기동하는 Spring Boot 어플리케이션을 정지하는 방법 (0) | 2023.03.15 |