18 CSS 속성 - 플렉스 ✨
FLEX
수평,수직 정렬 관련된 property
항상 붙어있는 부모가 자식의 위치를 움직일 수 있다. (후손 X)
- 이전방식
inline-blockinline-block을 수평정렬로 사용하게 되면 inline의 속성을 이어받아 html 문서의 띄어쓰기 혹은 줄바꿈을 화면에 반영함floatxlearfix 같은 부가적인 정리(해제) 요소가 필요함
display: flex; 가 적용된 요소가 container가 된다.
container 에 들어있는 요소들이 items 가 되는 것이다
container와 item은 각각 속성들이 나눠져서 존재한다.
container
flex-container에 부여하는 property
-
display
item의 flex 개념은 동일하게 적용되어 수평 정렬이 되지만 container의 정렬 방식을 설정
display: flex;값
- flex 블럭 요소처럼 수직 정렬된다.
- inline-flex 인라인 요소처럼 수평 정렬된다.
-
flex-flow (단축)
flex-flow: 주축 여러줄묶음;-
flex-direction 주 축
값
(horizontal)-
row (왼쪽 → 오른쪽) (기본값) == float: left
-
row-reverse == float: right
(vertical) -
column (위 → 아래)
-
column-reverse
-
주 축(main-axis)과교차 축(cross-axis) -
시작 점(flex-start)과끝 점(flex-end)
-
-
flex-wrap 여러 줄 묶음 (줄 바꿈)
flex-wrap: nowrap요소가 무조건 한줄로만 배치된다.item이 한줄로 배치되기 위해서 사이즈가 줄어들게 된다.
자식요소들의 너비를 무시하고 한줄로 배치
값
자식요소들의 너비를 유지함- wrap items를 여러 줄로 묶음
- wrap-reverse 를 역방향으로 여러 줄로 묶음 (아래에서 위로 쌓임)
(direction:row)
5 6 7 8
1 2 3 4
-
-
justify-content(main) 주 축의 정렬 방법을 설정
justify-content: flex-start;value
- flex-start (시작점 기준 정렬)
- flex-end (끝점 기준 정렬)
- center (가운데 정렬)
- space-between (시작과 끝 item을 container의 끝에 붙인뒤 남은 공간을 균등하게 나눈다.)
- space-around (item 사이의 공간을 균등하게 나눈다.)
-
align-content(cross) 교차 축의 정렬 방법을 설정
-
flex-wrap: wrap; 값을 통해서 여러 줄 이상이고 여백이 있을 경우에만 사용 가능
align-content: stretch;value
-
stretch 아이템을 교차 축을 채우기 위해서 늘린다.
그러나 아이템의 높이가 정해져 있다면 그 높이를 변형 시키지는 않는다.
-
flex-start 교차 축의 시작면에 붙인다.
-
flex-end 교차 축의 끝면에 붙인다.
-
center
-
space-between
-
space-around
-
-
align-items(cross) 교차 축의 정렬 방법을 설정
> container의 높이가 item보다 커야한다.-
아이템의 한 줄에 있을 경우에 사용 (두 줄일 경우 align content를 사용하도록 한다.)
align-items: stretch; -
stretch
-
flex-start
-
flex-end
-
center
-
baseline 요소가 아닌 문자 기준점에 맞춰서 정렬
-
items
flex-items에 부여하는 property
-
order
item에 숫자를 지정해서 숫자를 설정 (음수도 허용)
html 구조와 상관없이 순서 변경 가능
order: 0; (기본값)숫자가 작을 수록 앞쪽에 배치된다.
order의 수치가 같을 경우 html의 구조상에서 먼저 작성된 요소가 앞쪽에 배치된다.
-
flex-grow
responsive web에 도움이 된다.item 증가 너비 비율 설정 (여백의 값을)
남은 공간을 비율에 맞춰서 가져가게 된다.flex-grow: 0; (기본값)-
예
여백의 부분을 채우며 증가하다 보니 flex-grow값이 부여된 요소의 width값은 무시된다.
또한 container에 부여된 justify-content의 정렬 여백이 덮어지게 된다.
-
-
flex-shrink (↔ flex-grow)
item 감소 너비 비율 설정
flex-shink: 1;너비가 지정되어 가변 너비가 아니거나, 값이 0일 경우 효과가 없다.
-
0container의 크기가 커져도 item은 기본 설정된 이미지에서 더 이상 줄어들 지 않는다.container의 너비가 item의 너비에 영향을 미치기 시작한 지점부터 줄어든 거리 만큼 감소 너비 비율에 맞게 너비가 줄어든다.
item 크기가 다르다면 크기가 다르게 줄어든다.
지정
-
-
flex-basis main (axis에 적용)
공간 배분 전 기본 너비를 설정합니다.
자식 요소의 초기 너비item의 content가 가지고 있는 요소의 기본 너비를 정해 준다.
flex-basis에 단위 값이 주어진 경우에는 width와 height의 값이 요소에 영향을 줄 수 없다. (기본 값이 언제나 auto이기 때문에 0으로 바꿔주어야 한다.)
flex-basis: auto;-
auto일 경우 요소 안의 content 내용이 item의 너비에 영향을 주게 되는데 content 내용을 제외한 남은 부분을 flex-grow 속성의 값을 토대로 배분해준다. (기본값)요소의 너비를 따로 정하지 않으면 basis의 auto값으로 알면된다.
-
0의 단위를 사용할 경우 container의 주축의 너비를flex-grow에 설정한 비율만큼 사용할 수 있다. -
100px값이 정해진 경우 요소가 100px씩 가지고 있으며 나머지 부분들을 flex-grow에 맞춰서 증가 시킨다.
-
-
flex(단축)
item의 너비(증가 감소 기본)를 설정하는 단축 속성
flex: 증가너비 감소너비 기본너비;단축속성에서 flex-basis의 기본값은 auto가 아닌 0이 되기 때문에 주의해야한다.
값
flex-grow0flex-shrink1flex-basis0
-
align-self
교차 축에서 개별 item의 정렬 방법을 설정한다.
align-items에 정해진 정렬이 아닌특정한 아이템 하나만 정렬 방법을 바꾸고 싶다면 사용하면 된다.align-items보다align-self가 더 우선시 된다.align-self: auto; (align-items 값이 상속된다.)
14 CSS 속성- 띄움(정렬), 위치
💖float
요소를 좌우 방향으로 띄움 (수평정렬이 됨)
요소에 float 속성을 적용하면, 적용된 요소 주변으로 문자(text)가 흐르게 됩니다.
float: (reft, right)
-left: 왼쪽에서 시작 1 2 3
-right: 오른쪽에서 시작 3 2 1
float의 문제점: float 된 요소와 그렇지 않은 글이 아닌 요소가 겹치는 문제점이 있다.
div 태그에 글만 있을 때는 자연스럽게 흐름.
float 해제
-
형제요소에 clear: (left,right,both) 추가하여 해제
(다음 형제 요소가 없으면 해제 할 수 없다.)
-
부모요소에 overflow: (hidden,auto) 추가하여 해제
관련 없는 속성을 사용하는 것은 치팅 같은 것..
-
부모요소에 clearfix클래스 추가하여 해제 (추천!)
.clearfix::after { (부모 요소의 제일 끝부분에 해제되는 형제가 생성된다.
content: ""; -가상 요소 필수 속성
clear: both; - float 해제
display: block; -가상 요소는 inline요소이기 때문에 (
}clearfix클래스를 가지고 있는 부모 요소의 자식요소에는 float 속성을 가지고 있는 요소만있어야 한다.
float-display 수정
대부분 인라인 요소의 display 속성이 inline → block으로 바뀐다.
가로 세로의 너비를 지정할 수 있음.
flex, inline-flexsms 속성 효과 없음.
clear(정렬해제) : float의 속성을 해제시킨다.
