Flex

flex

flex는 "부모"한테 주는 것! 이 모든 것은 부모 태그에 적용된다.

display: flex;

적용 시 자식 개체 위드값에
flex : 1 -> 영역 풀로 채우기
또는
width: 20%; / flex: 8;
퍼센트 20%, 80% / 비율 2, 8 로도 가능하다.

중심축 (J) = justify-content
반대축 (A) = align-items

justify-content
align-items -> (item(X) items(O) > 복수. 뭉탱이임)

• space-between : 양 끝에 배치, 사이 여백 동일하게 배치
• (space-around와의 차이는 간격 뿐. 어라운드는 끝과 끝에 붙지 않고 간격이 동일함)

flex-direction

• row : → 왼 > 오로 향하는 축

• column : ↓ 위 > 아래로 향하는 축

• row-reverse : ← 오 > 왼으로 향함

• column-reverse : ↑ 아래 > 위로 향함
  
  

flex-direction: column;

이런 값을 주면 중심축이 수직으로 바뀜, 수직선 = (J)
(당연히 반대축이 수평선 = (A))

flex-wrap
nowrap : 모든 요소를 한 줄에 정렬 (플렉스의 디폴드값)
wrap : 요소들을 여러 줄에 걸쳐 정렬
wrap-reverse : 요소들을 여러 줄에 걸쳐 반대로 정렬

align-content : 여러 줄(수직) 사이의 간격 지정 가능
한 줄만 있는 경우 align-content는 효과를 보이지 않음 (당연함)

flex-start : 컨테이너의 꼭대기에 정렬
flex-end : 컨테이너의 바닥에 정렬
center : 세로선 상의 가운데에 정렬
space-between : 여러 줄들 사이에 동일한 간격을 둠
space-around : 여러 줄들 주위에 동일한 간격을 둠
stretch : 여러 줄들을 컨테이너에 맞도록 늘림

align-items 는 컨테이너 안에서 어떻게 모든 요소들이 정렬하는지 지정
align-content 는 여러 줄들 사이의 간격을 지정

space-between은 위드가 정해지지 않은 개체들을 나열할 때 사용 적합
정렬할 개체가 2개일 경우 위드가 정해져있어도 사용한다.

슬라이드 화살표는 플렉스로 가능은 하지만 특정 영역에 고정되어야 하는 요소로
플렉스 X 앱솔루트로 줘야함.

display: flex; 로 개체가 3개인 것이 1:1:1로 정렬된 것 같아보이지만 아님
동일한 위드의 사진이면 그래보이는데, 한 개의 사진이 작은 사이즈면 비율이 틀어져
자식 요소에 꼭 flex: 1; 을 써줘야 정확한 1:1:1 이 된다는 것

양옆의 사이 여백이 아닌 위아래 사이 여백을 주고싶을 때는
display: flex;
flex-direction: column; => 방향을 수직으로 바꾼 것
gap: 10px;
을 주면 아래 사이 여백이 10px 들어가게 된다.

flex-flow
flex-direction 과 flex-wrap이 자주 같이 사용되기 때문에, 합쳐진 태그

flex-flow: column wrap;

flex는 기본값으로 align-items: stretch 값이 들어가있음
stretch = 늘어나다 = 서로 높이를 공유하는 상태가 됨

마크업을 엔터를 쳐서 기재하기 때문에
일렬로 나열된것 같지만 사이 여백이 있음 ( = 엔터값)
마크업을 엔터 없이 할 수는 없으니
flex 써주면 다 붙은 상태가 됨