각각의 div 가로비율 조정문의드립니다.
본문
위의 이미지형태처럼 상황에 따라 div 각 영역의 가로비율이 변동이 생겨야 되는데요.
'가'형태에서 '나'형태, 즉 A영역이 빠졌을때, 반대로 '나'형태에서 '가'형태로 A영역이 다시 추가됐을때 상황에 따라 유동성의 페이지가 필요합니다.
여러 방법으로 시도를 해봤는데도 생각대로 진행이 안됩니다.
어떤 방법이 있을까요?
답변 2
아래 코드 그대로 실행해보세요.
같은 코드로 두개일때 세개 일때 가변적으로 크기가 변해요. 한개일때도 물론 마찬가지
<style>
.flexitems { display:flex; flex:1 0 25%; margin:0; padding:0; height:50px; border:4px solid ; }
</style>
<div style="display:flex; flex-wrap:wrap; padding:10px; border:4px dashed; ">
<div class="flexitems">여기 영역 1의 1</div>
<div class="flexitems">여기 영역 1의 2</div>
<div class="flexitems">여기 영역 1의 3</div>
</div>
<div style="display:flex; flex-wrap:wrap; padding:10px; border:4px dashed; ">
<div class="flexitems">여기 영역 2의 1</div>
<div class="flexitems">여기 영역 2의 2</div>
</div>
<div style="display:flex; flex-wrap:wrap; padding:10px; border:4px dashed; ">
<div class="flexitems">여기 영역 3의 1</div>
</div>
상황이 어떠한 상황인지에 따라 다릅니다.
php에서 A 가 있는지 없는지를 판단하는거라면 A가 있을떄랑 없을때 class 를 변경해서 하면되구요
반응형일때면 media query 로 브라우저 넓이에 의해 css 를 수정해주면 됩니다.
