Flex

<생활코딩 CSS 강의 참고>

https://opentutorials.org/course/2418/13526

# flex 개요.

페이지의 레이아웃을 잡는 스타일속성

 

 

# flex 의 container vs. item

 

 1. 개념

 

container	item 을 담는 창고
item	container 속 개별 박스

 

 

2. 갖는 속성

[https://www.w3schools.com/css/css3_flexbox.asp]

 

 

 

(1) container

 

display	flex 로 설정.
flex-direction	컨테이너 내부 아이템들의 정렬 방식 (기본값 = row) -row : 아이템들이 좌에서 우로 정렬 (<-> row-reverse) , 수직방향  -column: 위에서 아래로 정렬(<->column-reverse) , 수평방향
flex-wrap	아이템들의 크기 합이 > 컨터이너의 크기.   인경우 아이템을 줄바꿈한다.
flex-flow
justify-content	1. 아이템의 수평 가로가로 길이와 관련 (수평 수직은 row상태에 따라 달라진다)
align-items ( justify-content 비슷 하나 수직 방향 조정)	1. 아이템이 본래의 수직 높이와 위치 조정 (본래의 수직높이와  정렬 조정) 2. 기본값 : stretch( 아이템의 수직 높이가 컨테이너의 수직 높이 만큼 늘어남.) 3. 그외 : 아이템이 본래의 크기를 갖으며 ,  속성에 따라 가운데 정렬 등 정렬을 달리함.
align-content	1.align-items 과 비슷하나 하나의 행을 그룹으로 하여 적용

 

 

 

 

 

 

 

 

 

 

 

 

 

 

(2) item

 

 

order	1. 아이템의 순서를 변경할때 사용 2. 기본값 = 0
flex-grow	1.아이템들의 크기와 관련된것  2.각 아이템들이 컨테이너의 공간을 채우는 크기 비율 정도로이해. 3. 기본값 0
flex-shrink	1. 컨테이너가 줄어들시 작아지는 고통 분담 2. 0일 경우 해당 아이템은 크기 줄지 않음. 3. 기본값 1
flex-basis	아이템의 기본값 크기 결정
flex	1. grow,shrink,basis 를 축약하여 한줄로 작성 2. 형식 =>  flex: flex-grow [flex-shrink] [flex-basis];
align-self	align-items 와 유사하나 특정한 값만 다르게 줄 때 사용.