HTML div 3단 분할 모바일 1단 반응형

1 개요

HTML div 3단 분할 모바일 대응

HTML div 3단 분할 모바일 1단 반응형

2 방법 1: flex

<style>
.container { display: flex; }
@media (max-width: 600px) {
  .container { display: block; }
}
.box1 {
  background: red;
  flex: 1;
}
.box2 {
  background: orange;
  flex: 3;
}
.box3 {
  background: yellow;
  flex: 1;
}
</style>
<div class='container'>
  <div class='box1'>왼쪽</section>
  <div class='box2'>가운데</section>
  <div class='box3'>오른쪽</section>
</div>

3 방법 2: grid

<style>
.container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
}
@media (max-width: 600px) {
  .container { display: block; }
}
.box1 { background: red; }
.box2 { background: orange; }
.box3 { background: yellow; }
</style>
<div class='container'>
  <div class='box1'>왼쪽</div>
  <div class='box2'>가운데</div>
  <div class='box3'>오른쪽</div>
</div>

4 같이 보기

• HTML div 3단 분할 모바일 1단 반응형 여백
• HTML div 3단 분할