Flexbox 레이아웃이 100 % 수직 공간을 차지하게해야합니까?
Flexbox 레이아웃 행이 브라우저 창에서 나머지 세로 공간을 사용하는 것이 필요합니까?
3 행 플렉스 박스 레이아웃이 있습니다. 처음 두 행은 높이가 고정되어 있고 세 번째 행은 동적이며 브라우저 전체 높이로 확장하고 싶습니다.
행 3에 열 세트를 생성하는 또 다른 flexbox가 있습니다. 이 열 내에서 요소를 이해하도록 조정해야 브라우저의 전체 높이를 이해해야합니다. 주요 레이아웃은 다음과 유사합니다.
.vwrapper {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
//height: 1000px;
}
.vwrapper #row1 {
background-color: red;
}
.vwrapper #row2 {
background-color: blue;
}
.vwrapper #row3 {
background-color: green;
flex 1 1 auto;
display: flex;
}
.vwrapper #row3 #col1 {
background-color: yellow;
flex 0 0 240px;
}
.vwrapper #row3 #col2 {
background-color: orange;
flex 1 1;
}
.vwrapper #row3 #col3 {
background-color: purple;
flex 0 0 240px;
}<body>
<div class="vwrapper">
<div id="row1">
this is the header
</div>
<div id="row2">
this is the second line
</div>
<div id="row3">
<div id="col1">
col1
</div>
<div id="col2">
col2
</div>
<div id="col3">
col3
</div>
</div>
</div>
</body>나는 height그것을 하드 번호로 설정하면 작동하지만으로 설정하면 작동하지 않는 속성을 추가하려고 시도 했습니다 100%. height: 100%콘텐츠가 브라우저 창을 채우지 않고 작동하지 않는다는 것을 이해 합니다. 그러나 Flexbox 레이아웃을 사용하여 아이디어를 복제 할 수 있습니까?
당신은 설정해야합니다 height의 html, body, .wrapper로 100%(상속 전체 높이 순서대로) 다음 단지 설정 flex보다 값 더 1에 .row3다른 사람에하지를.
.wrapper, html, body {
height: 100%;
margin: 0;
}
.wrapper {
display: flex;
flex-direction: column;
}
#row1 {
background-color: red;
}
#row2 {
background-color: blue;
}
#row3 {
background-color: green;
flex:2;
display: flex;
}
#col1 {
background-color: yellow;
flex: 0 0 240px;
}
#col2 {
background-color: orange;
flex: 1 1;
}
#col3 {
background-color: purple;
flex: 0 0 240px;
}<div class="wrapper">
<div id="row1">this is the header</div>
<div id="row2">this is the second line</div>
<div id="row3">
<div id="col1">col1</div>
<div id="col2">col2</div>
<div id="col3">col3</div>
</div>
</div>래퍼를 높이 100 %로 설정
.vwrapper {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
height: 100%;
}
세 번째 행을 flex-grow로 설정하십시오.
#row3 {
background-color: green;
flex: 1 1 auto;
display: flex;
}
100 % 작동하는 다른 방법을 보여 드리겠습니다. 또한 예제를 위해 약간의 패딩을 추가합니다.
<div class = "container">
<div class = "flex-pad-x">
<div class = "flex-pad-y">
<div class = "flex-pad-y">
<div class = "flex-grow-y">
Content Centered
</div>
</div>
</div>
</div>
</div>
.container {
position: fixed;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
width: 100%;
height: 100%;
}
.flex-pad-x {
padding: 0px 20px;
height: 100%;
display: flex;
}
.flex-pad-y {
padding: 20px 0px;
width: 100%;
display: flex;
flex-direction: column;
}
.flex-grow-y {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
보시다시피 flex-grow 및 flex-direction 속성을 사용하는 동안 제어를위한 몇 개의 래퍼로이를 달성 할 수 있습니다.
1 : 부모 "flex-direction"이 "row"이면 "flex-grow"가 수평으로 작동합니다. 2 : 부모 "flex-direction"이 "columns"이면 조금 "flex-grow"가 수직으로 작동합니다.
도움이 되셨기를 바랍니다.
다니엘
'IT' 카테고리의 다른 글
| 팬더 read_csv 및 usecols로 열 필터링 (0) | 2020.10.10 |
|---|---|
| CLOSE_WAIT 소켓 연결을 제거하는 방법 (0) | 2020.10.10 |
| EQATEC 약력 러로 ASP.NET 웹 사이트 약력 링 (0) | 2020.10.10 |
| URL 인코딩과 HTML 인코딩의 차이점 (0) | 2020.10.10 |
| 더블? (0) | 2020.10.10 |