#1. Flexbox

[1.1]first Rule of Flexbox

felxbox 규칙
1. Children을 이야기하지 않는다.
2. flexbox를 위해서는 flex container가 필수.
3. box의 부모가 flex 컨테이너이며, 부모는 바로 상위의 부모여야한다.

[1.2]main Axis and Cross Axis

flexbox 레이아웃의 정렬을 이해하는데 가장 중요한 역할을 하게 됩니다. 주축(main axis)의 방향과 교차축 (cross axis)의 방향을 결정하는 flex-direction 의 설정을 이해하셔야 합니다.

• 주축(main axis) : Flex container에 선언된 flex-direction의 값에 따라 자식 요소인 flex item이 나열되는 방향입니다. flex-direction:row 인 경우는 주축이 수평이 되고 flex-direction:column인 경우는 주축이 수직 방향이 됩니다. (기본 flex-direction은 row)

justify-content: flex-start, flex-end, center, space-between, space-around

• 교차축 (cross axis): Flex container의 주축에 직각을 이루는 축으로 주축이 수평이며 교차축은 수직 방향이 됩니다. 기본적으로 내부의 요소 높이만큼 갖기 때문에, 따로 높이를 지정해야합니다.

align-items ; flex-start, flex-end, center

참고 https://usingu.co.kr/references/css/flexbox-layout/

[1.3] Column and Row

• main axis와 cross axis는 flex-direction이 row인지 column인지에 따라 가로축이 메인 혹은 크로스가 결정된다. flex-direction에 따라 메인축이 바뀐다.
• 마찬가지로 felx-direction이 column일경우 width가 없다면 align-item이 먹히지 않는다.

[1.4] align-self and order

• 부모가 아닌 자식의 위치를 변경하고 싶을 때는 딱 두가지를 쓴다
  1) align-self : aling-item과 같이 동작하지만 하나에만 반응

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

2) order : 자식들의 순서를 바꿔준다. 초기값은 0

.child:nth-child(1) {
	order:2;
}

[1.5]wrap, nowrap, reverse, align-content
wrap가 설정되어 있지 않으면, 자식요소가 width를 갖더라도 무시하고 한줄에 정렬
width 자체를 줄여버림
1) wrap : Width를 반영하여, 화면보다 길어지면 넘어가게 반영

.father {
	flex-wrap: wrap / nowrap / reverse
}

2) align-content <-> align-item, justify-content

• align-content : flex 라인 교차축을 따라 정렬되는 방식을 결정
  => 라인을 변경. 한줄일 때는 변화 없음. 여러 줄일 때 변경 됨. 라인은 교차 축
• align-items : flex 아이템이 flex 라인 내에 교차 축을 따라 정렬되는 방식
• justify-content : flex 라인 메인축에서 정렬되는 방식

.father {
	align-content: center, space-around, space-between
}

[1.6] flex-grow, flex-shrink
1) flex-shrink: flexbox가 쥐어짤 때, element의 행동의 정의함
ex) flex-wrap: nowrap일때, 화면이 작아지면 width가 설정되어 있어도 줄어듦.
초기값 1

• flex-shrink: 1;
• flex-shrink: n(정수);
  --> 여러 개 element 중 특정 element만 덜 줄어들거나, 더 줄어들게 할 수 있음

.child:nth-child(2){
	flex-shirk: 2;
}

2) flex-grow: shrink와 반대, 화면이 늘어남에 따라 box 크기가 얼마나 늘어날까?
초기값 0

• flex-grow: 1;
• flex-grow: 0;
• 남아있는 공간을 가져옴 (space를 없애고)
  -> 즉, 남아있는 공간, 여백이 있을 때만 grow 가능
  => 화면이 커질 때, element도 함께 커지길 원할 때 사용할 수 있음
  => flex-grow property가 0인 상태거나, 따로 정의되지 않았다면, 화면이 커져도 각 element 크기가 커지지 않음
  (여백만 늘어나게 됨)

.child:nth-child(2){
	flex-grow: 2;
}

[1.7]flex-basis

• flex-basis는 main-axis 방향에서 shrink, growth 되기전의 element의 초기 사이즈!
• flex-direction: row => width
• flex-direction: column => height

.father{
	felx-basis: 300px;
}