<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
    </div>
  </body>
</html>

.container {
  padding-top : 100px;
  background: beige;
  height: 100vh;
  display: flex;

}

.item{
  width: 30px;
  height: 40px;
  border: 1px solid black;
}

.item1{
  background: #ff8a80;
}
.item2{
  background: #c85a54;
}
.item3{
  background: #ffbcaf;
}

display: flex;

flex box 라고 지정 해 주었다. 기본적으로 row로 정렬 되어 있는 것 확인 가능.

.container {
  padding-top : 100px;
  background: beige;
  height: 100vh;
  display: flex;

}

.item{
  width: 30px;
  height: 40px;
  border: 1px solid black;
}

.item1{
  background: #ff8a80;
  order: 3;
}
.item2{
  background: #c85a54;
  order: 1;
}
.item3{
  background: #ffbcaf;
  order: 2;
}

order 로 순서를 바꿔 줄 수 있다.

쓸 일이 많지는 않다.

다음으로 flex-grow. container의 크기에 따라 유동적으로 바뀌게 해준다. default 0.

위 사진에서 오른쪽 빈 공간을 상자들이 채우지 않고 있다.

.item1{
  background: #ff8a80;
  flex-grow: 1;
}
.item2{
  background: #c85a54;
  flex-grow: 1;
}
.item3{
  background: #ffbcaf;
  flex-grow: 1;
}

전부 1로 두면 1 : 1 : 1 비율로 채우려고 하는 것을 볼 수 있다.

다음으로 flex-shrink. container 크기가 작아질 때 어떻게 동작 할 것인가?

.item1{
  background: #ff8a80;
  flex-grow: 2;
  flex-shrink: 5;
}
.item2{
  background: #c85a54;
  flex-grow: 1;
  flex-shrink: 3;
}
.item3{
  background: #ffbcaf;
  flex-grow: 1;
  flex-shrink: 1;
}

5배 더 작게, 3배 더 작게, 1배 작게. 비율!

정리 하면

flex-grow 와 flex-shrink는 container 의 크기가 바뀌었을 때 item들이 얼마나 어떻게 줄어들고 늘어나는지 정의한다.