2017-12-12 3 views
-2

하나의 행에 여러 개의 플렉스 박스를 생성 할 수 있습니까? 각 플렉스 박스에는 자체 하위 플렉스 요소가 있습니까?여러 플렉스 박스 단일 행

내 요구 사항에 대해 더 자세히 설명하려면 플렉스 박스가 2 개의 플렉스 요소를 가지고 있다고 가정하십시오. 각 플렉스 요소는 최대 너비가 50 %이고 높이가 100 %입니다. 이제 이미 존재하는 요소에 인접한 요소를 추가 할 수있는 옵션이 있습니다. , 새로운 flex 요소 추가시 요소의 총 수는 25 %, 25 % 및 50 %의 3을 가지며 모든 요소의 높이는 100 %입니다. 그러나 원하는 경우 요소의 폭이 일정하지만 높이가 반으로 줄어들도록 즉, 요소의 높이가 50 %, 50 % 및 100 %가되고 모든 요소의 너비가 50 %가되는 방식으로 요소를 추가합니다. 가능한거야?

+0

당신은 그래서 그냥 개별 인 flexbox의 모든 요소를 ​​포장, 정확하게 당신이 인 flexbox의 아이가 인 flexbox 자체가 될 수 있습니다 ... – lmaooooo

+0

를 달성하기 위해 원하는 것을 설명하는 도면을 그릴 할 수 있습니다 바깥 쪽의 플렉스 박스 (flexbox)에 넣고 설명하는 방식으로 작동해야합니다. – delinear

+1

아직 중복 된 것으로 보이지 않습니다. 작업 코드 스 니펫 하나 또는 두 개를 추가합니다. 여기서 하나는 시작을 나타내고 다른 하나는 예상 된 결과를 보여줍니다. – LGSon

답변

0

왼쪽 및 오른쪽 컨테이너 요소에 flex-direction: column을 사용해야하고 하위 요소에 flex: 1을 설정하면 각 요소의 높이가 같아집니다.

$('.parent').on('click', '.left > div, .right > div', function() { 
 
    $(this).parent().append('<div />') 
 
})
.parent { 
 
    display: flex; 
 
} 
 
.left, 
 
.right { 
 
    height: 200px; 
 
    flex: 1; 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    border: 1px solid black; 
 
} 
 
.left > div, 
 
.right > div { 
 
    flex: 1; 
 
    border: 1px solid green; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent"> 
 
    <div class="left"> 
 
    <div></div> 
 
    <div></div> 
 
    </div> 
 

 
    <div class="right"> 
 
    <div></div> 
 
    </div> 
 
</div>