-
flexbox의 속성은 보통 부모에다가 작성하는데 자식에다가 지정하는것은 3가지 뿐이다.
-
'부모요소'에 플렉스 컨테이너로 지정(display: flex; or inline-flex)
1) flex: 플렉스 박스를 박스레벨요소로 정의(width: 100%;)
2) inline-flex: 플랙스 박스를 인라인레벨요소로 정의(내용에 맞게 width) -
가로로 정렬하는 방법
1) float: left;
2) display: inline-block & block
3) position: absolute
-
위치를 지정
1) float: left;
2) position: absolute; & relative;
3) display: flex; (부모:컨테이너 역할)
4) display: grid;(부모: 컨테이너 역할)
5) display: inline-block; & block
-
flex-direction:
1) row(기본값) --주축:가로 & 교차축:세로
2) column(세로) --주축:세로 & 교차축: 가로
3) row-reverse(끝쪽으로 이동해서 1번이 가로 맨끝시작)
4) column-reverse(세로인데 1번이 세로 맨끝시작) -
주축을 기준으로 지정(가로정렬;기본값 b.c row가 기본값이기에, column일 경우 주축이 세로임을 유의)
1) justify-content:
ㄱ) flex-strat (기본값; 주축 기준 왼쪽) /
ㄴ) flex-end(주축 기준 오른쪽) /
ㄷ) center (주축 기준 가운데)
ㄹ) space-between: 아이템과 아이템사이의 간격이 일정(그래서 아이템이 양끝에 붙어있음)
ㅁ) space-around: 아이템을 기준크기에서 왼쪽 오른쪽 여백이 똑같다(그래서 양옆이 좀 떨어지게 됨) -
교차축을 기준으로 지정
1) align-items:
ㄱ) stretch(default):교차축을 기준으로 쭉쭉늘어나게한다(자식요소에 세로값이 없을경우에만 적용가능)
ㄴ) baseline: 글자끝(밑)을 맞춰서정렬
ㄷ) flex-start
ㄹ) flex-end
ㅁ) center
ㅂ) space-around
ㅅ) space-between -
flex-wrap: nowrap(default); 줄였을때 박스사이즈 줄어들게 하는것 (다음줄로 이동X )
-
flex-wrap: wrap; 줄였을때 박스사이즈 줄어들게 하고 싶지 않을때 크기가 줄어들어서 한줄에 다 안담길 것 같을때에 다음줄로 넘어감 (여러줄 만들고 싶을때)
-
flex-wrap: wrap-reverse; 크기가 줄어들어서 한줄에 다 안담길 것 같을 때에 다음줄로 넘어가는데 맨 밑부터 왼쪽 처음부터 시작
-
=======> 한꺼번에 쓰고 싶을떄(direction+wrap) flex-flow: row nowrap(default)
-
align-content: 플랙스 항목이 여러줄로 표시될 때 교차축 기준의 배치방법 지정 ; 두줄이상 되었을때 그때 교차축을 기준으로 어떻게 아이템들을 배치할거냐를 나타냄 (flex-wrap: wrap과 함께)
ㄱ) flex-start(기본값) /
ㄴ) flex-end /
ㄷ) center /
ㄹ) space-between /
ㅁ) space-around
-
flex에서 자식요소들에게 직접 지정하는 세가지
1) 플랙스 항목 배치 순서 바꾸기
2) 각각 배치
3) 크기조절
