source

Flexbox 레이아웃에 100% 수직 공간을 사용하려면 어떻게 해야 합니까?

ittop 2023. 8. 26. 00:02
반응형

Flexbox 레이아웃에 100% 수직 공간을 사용하려면 어떻게 해야 합니까?

브라우저 창에서 Flexbox 레이아웃 행이 나머지 수직 공간을 사용하는지 어떻게 알 수 있습니까?

저는 3열 플렉스박스 레이아웃을 가지고 있습니다.처음 두 줄은 높이가 고정되어 있지만, 세 번째 줄은 동적이므로 브라우저의 전체 높이로 커졌으면 합니다.

enter image description here

3행에 열 집합을 만드는 또 다른 플렉스 박스가 있습니다.이 열 내의 요소를 올바르게 조정하려면 배경색 및 기본 항목 정렬과 같은 브라우저의 전체 높이를 이해해야 합니다.주요 레이아웃은 궁극적으로 다음과 유사합니다.

enter image description here

.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;
    min-height: 100%;/* chrome needed it a question time , not anymore */
}
#col2 {
    background-color: orange;
    flex: 1 1;
    min-height: 100%;/* chrome needed it a question time , not anymore */
}
#col3 {
    background-color: purple;
    flex: 0 0 240px;
    min-height: 100%;/* chrome needed it a question time , not anymore */
}
<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>

데모

EDIT, @Basj가 언급했듯이, 코드는 단축될 수 있습니다.우리는 또한 오늘날 광범위하게 구현된 그리드를 사용할 수 있습니다. 방문자를 위한 그리드의 예는 아래와 같습니다.

body {
    height: 100vh;
    display: grid;
    grid-template-rows: auto auto 1fr;
    margin: 0;
    background-color: orange;
    grid-template-columns: 240px 1fr 240px;
}

[id^=row]{ grid-column: 1/-1 }

#row1 { background-color: red; }
#row2 { background-color: blue; }
#row3 { background-color: green; }
#col1 { background-color: yellow; }
#col3 { background-color: purple; }
<div id="row1">this is the header</div>
<div id="row2">this is the second line</div>
<div id="col1">col1</div>
<div id="col2">col2</div>
<div id="col3">col3</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: 부모 "플렉시블 방향"이 "컬럼"일 때 자녀 "플렉시블 성장"이 수직으로 작동합니다.

이것이 도움이 되길 바랍니다.

대니얼.

받아들여진 대답은 매우 좋지만, 나는 알아차렸습니다.wrapper몇 가지 다른 CSS 규칙뿐만 아니라 필요하지 않았습니다.다음은 최소 버전입니다.

html, body { height: 100%; }
body { display: flex; flex-direction: column; margin: 0; }
#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 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>

언급URL : https://stackoverflow.com/questions/23090136/how-can-i-make-my-flexbox-layout-take-100-vertical-space

반응형

'source' 카테고리의 다른 글

mariadb-server는 mysql-community-server에 의해 사용되지 않습니다.  (0) 2023.08.26
MyISAM 테이블에서 count(*)가 너무 느립니다.  (0) 2023.08.26
CSS 높이(백분율)가 작동하지 않음  (0) 2023.08.26
값이 다른 행을 단일 행으로 병합  (0) 2023.08.26
수동으로 npm 취약성을 수정하는 방법은 무엇입니까?  (0) 2023.08.26

'source'의 다른글

  • 현재글Flexbox 레이아웃에 100% 수직 공간을 사용하려면 어떻게 해야 합니까?

관련글

댓글

티스토리툴바