div 2개 가로 배치

1 개요

div 가로 2개 배치

2 반반

• 내용물의 크기에 관계 없이 1:1

<style>
.parent {
  background: red;
  display: flex;
}
.children {
  flex: 1;
}
.child1 {
  background: silver;
}
.child2 {
  background: skyblue;
}
</style>

<div class='parent'>
  <div class='children child1'>
    Hello World Hello World
  </div>
  <div class='children child2'>
    Lorem
  </div>
</div>

3 균형

• 내용물의 크기를 반영한다.

<style>
.parent {
  background: red;
  display: flex;
}
.children {
  flex: auto;
}
.child1 {
  background: silver;
}
.child2 {
  background: skyblue;
}
</style>

<div class='parent'>
  <div class='children child1'>
    Hello World Hello World
  </div>
  <div class='children child2'>
    Lorem
  </div>
</div>

4 전체 + 오른쪽

• 오른쪽 것만 크기 지정하고 나머지는 왼쪽 div가 차지한다.

<style>
.parent {
  background: red;
  display: flex;
}
.child1 {
  background: silver;
  flex: auto;
}
.child2 {
  background: skyblue;
}
</style>

<div class='parent'>
  <div class='children child1'>
    Hello World Hello World
  </div>
  <div class='children child2'>
    Lorem
  </div>
</div>

5 같이 보기

• div 가로 배치