Div 2개 가로 배치

1 개요

div 가로 2개 배치

2 반반

<style>
.parent {
  background: red;
  display: flex;
  flex-direction: row;
}

.child1 {
  background: silver;
  flex: auto;
}

.child2 {
  background: skyblue;
  flex: auto;
}
</style>

<div class='parent'>
  <div class='children child1'>
    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 전체 + 오른쪽

<style>
.parent {
  background: red;
  display: flex;
  flex-direction: row;
}
.child1 {
  background: silver;
  flex: auto;
}
.child2 {
  background: skyblue;
  width: 5rem;
}
</style>

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

5 같이 보기

• div 가로 배치