CSS : flexbox

✅ flex-wrap : nowrap | wrap | wrap-reverse
(한줄 안에 모든 요소를 정렬 할 것인지, 기본값 : nowrap)

.flex {
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
📌 부모의 width가 300px 일때, 3개의 자식이 각 width 가 150px일때, 
사이즈를 줄여서 라도 한 줄로 정렬해버리는 것 => nowrap (감싸지 않는다)
📌 3개의 자식의 각 width 150px로 유지하고 싶다면 => wrap
(한 줄에 모두 정렬하지 않고 여러 줄을 만들어 버림)

• ✅ wrap 일 경우 두 줄로 정렬(위 예시에 따라)되기 때문에 flex 라인이 두개가 생긴다.
  • align-items : 각 하나의 flex 라인으로 정렬
  • align-content : 여러개의(전체의) flex 라인을 하나로 생각하여 정렬
    • space-between, space-around, space-evently 사용가능

✅ flexbox를 사용하면 order를 사용하여 순서를 변경할 수 있음(기본값 order : 0)

✅ align-self 하나씩 위치 변경할 수 있음

• parent 에게 height를 반드시 설정해줘야 함

  .children:nth-child(2) {
  	align-self: center;
  }

✅ flex-shrink, flex-grow, flex-basis

• flex-shrink nowrap일 경우 width를 변경할 때 더 축소 시킴 (기본값은 1, shrink: 축소)
  : 모든 box가 같은 크기로 찌그러지는 걸 원하지 않을 때 사용

.children:nth-child(2) {
	flex-shrink: 2;
}
두 번째 children이 2배 더 축소 됨. 
⭐️ 만약 flex-shrink : 0 을 주면 false의 개념으로 절대 자기사이즈 보다 줄어들면 안되!!

• flex-grow (기본값은 0, grow: 증가, 자라다)
  : box 주변의 공간을 가져감, 만약 공간이 남아있다면 다 차지 함.
  : 남아 있는 빈 공간을 가져오거나 가질 수 있는 만큼 커지게 됨
• flex-basis (찌그러지거나 늘어나기전에 element에게 처음 크기(width, height)를 주는 것)
  : flex-direction에 따라 main-axis => width, height

.children {
  width: 300px;  <== 모든 children을 300px로 
  height: 200px;
  line-height: 200px;
  text-align: center;
  font-size: 30px;
  background-color: aquamarine;
}
.children:nth-child(2) {
  flex-basis: 400px; <== 2번째 children을 400px로 지정
  background-color: black;
  color: white;
}

width는 영역을 정확히 강제하지만, flex-basis는 그렇지 않음 플렉스 아이템 안에 플렉스 아이템이 점유하는 너비보다 큰 너비의 자식 요소가 들어갈 경우 flex-basis는 콘텐츠 너비에 따라서 늘어나고 width는 그대로 유지한다. 즉, flex-basis는 좀 더 유연하고 width는 강제적이다.
(일반적으로 flex-basis는 auto(기본값)로 두고, width를 조정하는 편이 예상을 벗어나지 않고 안전함)