flex는 x축 또는 y축의 1차원 방향을 제어할 수 있다.
사용 가능한 속성들은 크게 flex-container와 flex-item을 기준으로 나뉜다.
*속성들의 기본 값을 파악하고 있는 것이 중요함.
flex-container
1. display: flex / inline-flex
display:inline-flex
- item들이 수평 정렬된 것이지, container는 inline특성을 가지고 있다.
- 각 container가 하나의 문장처럼 구성되어 container들 사이에 공간이 생긴다.
→ 태그 작성시 줄바꿈 처리를 해서 그런 것. - 공간을 없애려면 태그들을 붙여서 써야함. (그러나 가독성 떨어짐)
- inline속성은 글자를 다루는데 특화된 속성.
→ 레이아웃을 다루기 위해선 block속성을 가져야하기 때문에 대부분 flex를 씀
2. flex-wrap
- item들이 container너비보다 커질 때 줄바꿈이 되는 속성.
- css의 wrap이라는 속성은 줄바꿈과 관련이 있다.
- 기본값인 nowrap의 경우 item의 flex-shrink의 기본 속성이 1로 되어있기 때문에 모든 요소가 동등하게 줄어든다.
- wrap-reverse의 경우 - 줄바꿈 방향이 반대가 된다.
-> wrap은 아래로 줄바꿈, wrap-reverse는 위로 줄바꿈
3. flex-direction
- 정렬 방향의 start지점과 end지점을 정하는 속성.
- row, column, row-reverse, column-reverse가 있다.
row: 왼-오
column: 상-하
row-reverse: 오-왼
column-reverse : 하-상 - 속성 값으로 정한 방향이 메인축이되고, 메인축에 반대되는 축이 교차축이된다.
4. justity-content / align-items
-
flex-direction에 따른 아이템 그룹 정렬 방법
-
justity-content: 메인축 기준
-
align-items: 교차축 기준
-
item그룹을 start지점에 정렬할거냐, end지점에 정렬할거냐(오른쪽 정렬과는 다름)
-
justity-content 속성 값
flex-start
flex-end
center
space-between
space-ailgn -
align-items 속성 값
flex-start
flex-end
centeralign-items 는 기본 값이 stretch이기 때문에
item은 높이값을 지정하지 않았으면 auto가 되어 부모의 높이를 따르게 된다.
(flex-contianer내부에서 최대한 넓은 높이를 사용하도록)align-items에 stretch가 아닌 다른 속성 값을 넣어주게 되면
stretch가 무시되고 item은 자신의 높이 값을 갖게된다.
(height가 지정되지 않았다면 content의 크기)
5. align-content
- wrap을 했을 때 다음 줄로 넘어가게 되는데 줄마다 각각의 축이 생긴다.
→ ailgn-content의 기본값이 strech이기 때문. - flex-container의 높이를 반으로 나눠서 줄 각각의 축을 만듦.
- stretch가 아닌 다른 속성 값을 쓰게되면 축이 모든 아이템들을 기준으로 하나가 되고,
- 행이 2줄 이상이 되기 때문에
flex-start
flex-end
center
space-between
space-ailgn
을 모두 쓸 수 있다.
flex-item
1. flex-grow
- 증가 너비 비율
- 기본 값 0 - 안 늘어남
- contianer가 width가 유동적으로 늘어날 때 지정된 item들의 너비를 제외한 여백이 생기게 되는데, 여백을 채우기 위한 속성.
- 남은 여백을 각 item에 할당할 때의 비율을 정하는 것.
요소 너비 자체에 대한 비율로 지정하고 싶다면?
각 요소들이 지정된 너비를 가지고 있지 않아야 함
1. item의 width를 지운다.
2. item의 basis를 0으로 설정해준다.
2. flex-shirnk
- 감소 너비 비율
- 기본 값 1 - 모든 요소들이 같은 비율로 줄어듦
- contianer가 width가 유동적으로 줄어들 때 지정된 item들이 container를 벗어나 넘치는 것을 막기 위해 item들의 너비가 같이 줄어들게 해주는 속성
- item들이 줄어들 때의 각각의 비율을 정하는 것.
- 0으로 할 시 줄어들지 않게 된다.
→ flex 사용 시 원치 않게 요소가 줄어드는 것을 방지. - 감소너비를 비율에 맞춰 계산할 일은 없고, 값이 있느냐 없느냐(줄어드냐 마냐)로 제어하는 경우가 대부분이다.
3. flex-basis
- 요소의 기본 너비 설정
- 기본값 : auto
- %나 px단위를 쓸 수 있음.
- auto가 아닐 시 기존 설정 값은 무시됨.
4. order
- 기본 값: 0
- 숫자가 클 수록 뒤로 밀려남.
- 음수도 사용 가능.
- html구조는 그대로 css와 분리.
5. ailgn-self
- 개별적인 item단위로 정렬 값을 지정해 줄 수 있음.
- 기본 값 auto.
6. gap
- 요소들 사이 간격 설정.
- container에 적용.
- 적용 안되는 브라우저가 많음.
gap을 안 쓰고 간격을 설정하는 법
모든 item에 margin-right를 주고 마지막 요소에만 margin-right값을 0으로 설정한다.
