플렉스 박스 반응 레이아웃

Question

나는 flexbox로 놀고있어 약간의 도움이 필요하다. 큰 사각형 요소가 왼쪽에 있고 네 개의 작은 요소로 이루어진 격자가 필요합니다. 오른쪽의 크기와 같습니다.

지금까지 나는이 있습니다

#flex { 
 
    display: flex; 
 
} 
 
.flex-container-inner { 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
    align-content: stretch; 
 
    flex-wrap: wrap; 
 
    margin-left: 10px; 
 
} 
 
.flex-item { 
 
    padding: 10px; 
 
    flex-basis: auto; 
 
    flex: 0 0 47%; 
 
    min-height: 100px; 
 
    margin-bottom: 10px; 
 
    word-wrap: break-word; 
 
    background-color: red; 
 
}

<div style="margin-top:30px;padding-top:1px;" id="flex"> 
 
    <div class="flex-item"> 
 
    dhhrth rthrthrth rth rhrthrth 
 
    </div> 
 
    <div class="flex-container-inner"> 
 
    <div class="flex-item"> 
 
     yt e ert et e 
 
    </div> 
 
    <div class="flex-item"> 
 
     Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 
 
    </div> 
 
    <div class="flex-item"> 
 
     Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 
 
    </div> 
 
    <div class="flex-item"> 
 
     Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, 
 
    </div> 
 
    </div> 
 
</div>

http://codepen.io/DaveBatt83/pen/yVbGQG

화면의 폭이 감소 될 때 네 개의 작은 요소가 서로 꼭대기 스택 왜 이해가 안 돼요 , 그리고 또한 특정 중단 점에서 전체 너비를 차지하도록 큰 너비의 최소 너비를 설정하려고합니다. 이게 가능합니까

첫 번째 항목이 너비의 47 %를 차지하고 중첩 된 컨테이너를 추가하여 중첩 된 컨테이너 내 47 %에서 두 항목의 두 행을 만들고 싶습니다. 47 %는 공간 사이에 간격을 두어 공간을 만듭니다.

이 모든 것이 작동하는 것처럼 보이지만 화면 크기를 줄이면 2 행 2 열이 4 항목의 열이됩니다.

Answer 1

명확성을 위해 중첩 된 플렉스 항목의 이름을 변경했습니다. 귀하가 아마도 box-sizing: border-box을 잃어 버렸기 때문에 아마도 당신은 문제가 있었을 것입니다.

#flex { 
 
    display: flex; 
 
    background-color: peachpuff; 
 
    justify-content: space-between; 
 
} 
 
.flex-item, 
 
.flex-container-inner, 
 
.flex-item-inner { 
 
    flex: 0 0 47%; 
 
    box-sizing: border-box; 
 
} 
 
.flex-item, 
 
.flex-item-inner { 
 
    padding: 10px; 
 
    min-height: 100px; 
 
    margin-bottom: 10px; 
 
    word-wrap: break-word; 
 
    background-color: red; 
 
} 
 
.flex-container-inner { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    flex-wrap: wrap; 
 
}

<div style="margin-top:30px;padding-top:1px;" id="flex"> 
 
    <div class="flex-item"> 
 
    dhhrth rthrthrth rth rhrthrth 
 
    </div> 
 
    <div class="flex-container-inner"> 
 
    <div class="flex-item-inner"> 
 
     yt e ert et e 
 
    </div> 
 
    <div class="flex-item-inner"> 
 
     Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 
 
    </div> 
 
    <div class="flex-item-inner"> 
 
     Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 
 
    </div> 
 
    <div class="flex-item-inner"> 
 
     Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, 
 
    </div> 
 
    </div> 
 
</div>