- 기존 div 요소는 줄바꿈이 되어 수진으로 배치가 되는데 수평적으로 배치하고 싶을 때
- 자식을 부모 기준으로 가운데 정렬 하고 싶을 때
1. Flex 기본
핵심은 Container와 Item이다.
<html>
<head>
<style>
.parent {
background-color: aqua;
}
.child {
width: 100px;
height: 100px;
background-color: blue;
margin-right: 8px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
자식
</div>
<div class="child">
자식
</div>
<div class="child">
자식
</div>
</div>
</body>
</html>
2. 컨테이너(부모) 속성
flex-direction: 자식의 정렬 방향을 설정한다. row는 수평으로, column은 수직으로 정렬.
justify-content: 아이템 정렬 방향과 같은 방향으로 아이템의 여백을 관리한다.
align-items: 아이템 정렬 방향과 수직 방향으로 아이템의 여백을 관리한다. 
flex-wrap: 아이템이 컨테이너를 넘어섰을 때 어떻게 처리할 것인지 설정한다.
본 값은 nowrap 으로 부모의 크기(너비 or 높이)를 기준으로 자식들이 알아서 공간을 나눠서 나열된다. 많은 상품 아이템들을 보여줘야 할 때 flex-wrap에 wrap을 설정하면 알아서 줄바꿈이 된다.
3. 아이템(자식) 속성
flex-basis: 자식의 최소 너비(수직정렬일 때는 높이)를 설정할 때 사용한다. 기본 값은 auto
flex-grow: 여백 나눠갖기
Container에 여백이 생겼을 때 어떻게 영역을 차지할지 설정한다.
다른 아이템들과 비교해서 해당 비율로 여백을 가져간다. 기본값은 0
flex-shrink: Container가 자식들이 차지하는 공간보다 줄어들었을 때 너비를 어떤 비율로 줄일지 설정한다.
다른 아이템들과 비교해서 해당 비율로 줄어들게 된다. 기본값은 1
(많이 안씀)
다시태어나고싶어요