플렉스 박스 이해

Question

플렉스 박스를 사용하여 원하는 효과를 얻는 방법을 이해하고 있지만 퍼센트를 사용하여 예측할 수없는 결과를 얻었으며 그 이유를 이해할 수 없습니다.

"3 행의 정사각형 컨테이너를"플렉스 행 "으로 사용하는 것이 목표입니다. 컨테이너 크기가 500px x 500px로 설정되어 있고 항목 높이/너비가 50 %로 설정되어있는 경우 상단 왼쪽에 완벽한 사각 노란색 상자가 있어야하고 상단 오른쪽에 사각 오렌지 빨강이 있어야합니다. 그런 다음 빨간색 상자가 새 행을 시작하는 노란색 아래에 밀려 있지 않습니까? 아이디어는있다 - 창 크기가 작아 질수록, 주황색 빨간색은 열처럼 노란색과 빨간색 사이에 밀어 것입니다 -하지만 1

.container { 
 
    margin-right: 3em; 
 
    margin-left: 33m; 
 
    display: flex; 
 
    flex-direction: row; 
 
    background-color: gray; 
 
    height: 500px; 
 
    width: 500px; 
 
} 
 
#item-1 { 
 
    height: 50%; 
 
    width: 50%; 
 
    background-color: yellow; 
 
} 
 
#item-2 { 
 
    height: 50%; 
 
    width: 50%; 
 
    background-color: orangered; 
 
} 
 
#item-3 { 
 
    height: 50%; 
 
    width: 50%; 
 
    background-color: red; 
 
}

<div class="container"> 
 
    <div class="item" id="item-1"></div> 
 
    <div class="item" id="item-2"> 
 
    <div class="accordian"></div> 
 
    </div> 
 
    <div class="item" id="item-3"></div> 
 
</div>

JSFiddle의 3 행 것이다 : https://jsfiddle.net/2o86nocc/2/#&togetherjs=JLLUCFSHMp

Answer 1

빨간색 상자를 다음 행으로 줄이려면 flex-wrap: wrap;을 컨테이너에 설정하여 Flexbox wrapping을 활성화해야합니다. 기본적으로 활성화되어 있지 않습니다.

See the edited fiddle here.

.container { 
 
    margin-right: 3em; 
 
    margin-left: 33m; 
 
    display: flex; 
 
    flex-direction: row; 
 
    background-color: gray; 
 
    height: 500px; 
 
    width: 500px; 
 

 
    flex-wrap: wrap; 
 
} 
 
#item-1 { 
 
    height: 50%; 
 
    width: 50%; 
 
    background-color: yellow; 
 
} 
 
#item-2 { 
 
    height: 50%; 
 
    width: 50%; 
 
    background-color: orangered; 
 
} 
 
#item-3 { 
 
    height: 50%; 
 
    width: 50%; 
 
    background-color: red; 
 
}

<div class="container"> 
 
    <div class="item" id="item-1"></div> 
 
    <div class="item" id="item-2"> 
 
    <div class="accordian"></div> 
 
    </div> 
 
    <div class="item" id="item-3"></div> 
 
</div>