11/10 40-1 [CSS] FLEXBOX(이론정리)

정렬 관련 !! 아직도 끝나지 않은 정 렬

-https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

flexbox의 기본 개념 - CSS: Cascading Style Sheets | MDN

요기서 이것저것 예제 많음
직접 해보기에 좋으니 한 번 씩 들어가서 확인 해 보장!!


Flexbox내의 아이템 간 여유 공간 배분과 강.력.한. 정렬 기능을 제공하기 위한 모델로 복잡하고 어려운 레이아웃을 쉽게 구성할 수 있다.

[flex-container] 안 에서 줄 수있는 속성들 (container = box 같은표현으로 사용함)
flex를 주면 그건 flexbox가 되고
그안의 요소들은 flex item들이 됨(****모든요소가 적용되는것이 아님 flex를 준 태그를 부모 태그라고 치면 비로 아래 자식태그만 flex item이 됨 ****)
flex-direction : 아이템의 주축을 설정하는 속성( row 냐 column 이냐)
wap - box가 줄어도 아이템들이 밑으로 빠지냐 유지하냐
flow : 이거로 wap속성과 direction 속성을 한꺼번에 줄 때
+ align-items ,justify-content, align-content


[flex- item]안에서 줄 수 있는 속성들( 여유공간/사용 가능한 공간 을 배분하는 방법들 )
flex-grow : 양수로 지정하면 남아있는 여유공간을 지정한 값 만큼(비율만큼 1:1:1 요따구로 ) 아이템들에게 배분해준다
(결국 item의 공간의 크기가 늘어난다.)
flex-shrink : 주축의 공간이 부족할 때(브라우저를 줄였을 때 ) 각각의 아이템들을 어떻게 줄일 지 결정 하는 속성
예를들면 1:2:1 로 주었을 때 , 2로 지정되어있는 애가 1보다 더 빨리 줄어든다. 이렇게 말하는 이유는.... 일관되 진 않는다 딱 떨어져서 줄어드는게 아니고 그냥 값은 큰 애가 적은애 보다는 빨리 줄어 드는 것 뿐임
flex-basis : item의 크기 설정, 기본값은 auto - 자동으로 지정되어있는 width값을 찾아서, 거기에 맞춰 지정됨!
지정되어있는 값이 없으면 컨텐츠 크기만큼 자동설정 됨 !
flex : 저 위의 세가지를 한꺼번에 줄 때 (순서있음 grow , shrink, basis ) 세가지 동시에 줄 때,,,, 우선순위가 basis밖에 될 수가.. 없네? grow 같은 경우 나머지 공간이 있어야 그걸 비율만큼 나눠 갖는 것 이기 때문임 !!
flex : initial로 지정하면 0 1 auto로 지정한 것과 동일하게 동작....
flex : auto 지정하면 1 1 auto로 지정 한 것과 동일 (이거 많이 씀 !!!)
flex : none 지정하면 컨테이너의 크기 변화에도 flex 항목 크기는 변하지 않고 basis를 auto로 지정했을 때 정해지는 크기로 결정

*** align-items : 컨테이너에 지정하는 속성, 교차축을따라 flex 항목 열을 정렬하는 방식을 지정 allign들어가면 교차축!!
flex-start로 지정하면 flex 항목의 첫 열이 교차축 방향의 시작선에서부터 정렬.
flex-end로 지정하면 flex 항목의 첫 열이 교차축 방향의 끝선에서부터 정렬.
center로 지정하면 flex 항목 행에 배분된 공간의 가운데 라인에서부터 정렬됩니다.

**** justify-content : 주축을 따라 flex 항목을 정렬 (이거도 많이 사용 !!!)
stretch
flex-start
flex-end
center
space-around
space-between
space-evenly
요 속성들은 직접 하면서 천천히 해보자!

***align-content : flex-wrap: wrap; 이 설정된 상태에서, 아이템들의 줄이 2줄 이상 되었을 때의
교차축을 따라 아이템들을 정렬하는 방식을 지정(교차축방향 여유 공간을 배분)
Items가 여러 줄이고 여백이 있을 경우만 사용

*****※flex-basis 와 width의 차이*** 다시정리하기 !!!
컨텐츠의 너비를 결정하는것은 flex-basis가 아니고 width이다
flex-basis는 다른 flex 속성(flex-grow, flex-shrink)을 결정할 때 기본(basis)이 되는 값이다.

만약 주축이 column 으로 변경했을 경우 basis 는 height로 적용이 되지만 width는 그런거 상관없이 여전히 width로 적용됨display:flex;인 경우에는 대개의 경우 width와 flex-basis가 동일한 결과를 보여준다
display:inline-flex의 경우에는
flex-basis에 특정 값을 설정하면 컨테이너 너비는 변함 없지만(컨테이너 유지) 아이템들의 총합이
컨테이너보다 길어져 스크롤이 생긴다.(컨테이너를 삐집고 나온다.)
width에 특정 값을 설정하면 아이템들의 width의 합만큼 컨테이너의 너비도 늘어난다.(컨테이너도 같이 커짐)

****FlexBox에서의 Margin****
-아이템에 margin을 속성을 사용하면 각 아이템을 쉽게 배치할 수 있다. 단,컨테이너에 먼저 display:flex를 주어야한다.
-컨테이너의 flex-direction:row일 때(주축이 가로방향)
수평 중앙 배치 : margin: 0(요건 상하) auto(요건 좌우);
왼쪽 배치 : margin-right: auto; (헷깔리면 반대로 생각하기 !!!!!)
오른쪽 배치 : margin-left: auto;

-컨테이너의 flex-direction:column일 때(주축이 세로방향)
수직 중앙에 배치 : margin: auto 0;
위쪽 배치 : margin-bottom auto;
아래쪽에 배치 : margin-top: auto;