[HTML, CSS] Flex
1. Flexbox
Float
: 이미지와 텍스트를 정리하기 위한 기능
: 레이아웃 용도로 사용하기 시작
Flexbox
: 뷰포트 요소의 크기 불명확 & 동적으로 변할 때 → 효율적으로 요소 배치, 정렬, 분산
: 행 또는 열을 주축으로 설정하여 배치 및 정렬하는 방식
: 요소의 크기와 순서를 유연하게 배치할 수 있음
: Flexbox 방식은 두개의 축(주축 / 교차축)을 제공 → 기본값은 가로
: Flexbox 방식 사용하기
- container가 block특성
display : flex; (→ flex container가 만들어진다.)
- container가 inline특성
display : inline-flex;
Flex container
: Flexbox 방식으로 레이아웃을 결정할 요소
: container가 flexbox여야 → 그 안에 있는 내용물들을 자유롭게 배치 가능
: 종류
- flex-flow
- flex-direction
- flex-wrap
- justify-content
- align-content
- align-items
Flex item
: Flex container 내부에서 Flexbox 방식으로 배치되는 요소
: Flex container 높이에 따라서 Flex item 높이도 결정, 다 일정
: 종류
- order
- flex
- flex-grow
- flex-shirink
- flex-basis
- align-self
Axis
: 주축 (main-axis) / 교차축 (cross-axis)
: item은 주축에 따라 정렬
: 주축 방향은 direction 속성으로 결정 (방향 설정 안해주면 → 기본값 row로 설정)
2. Flex container
flex-direction
: 원하는 방향으로 주축 설정
- row : 수평축 (왼 → 오)
- row-reverse : 수평축 (오 → 왼)
- column : 수직축 (위 → 아래)
- column-reverse (아래 → 위)
flex-wrap
: flex item들이 강제로 한 줄에 배치되게 할 건지 or 영역 내에 벗어나지 않고 여러 행으로 나누어 표현할 건지 결정하는 속성
- nowrap : 기본값 / 아이템들이 밖으로 넘칠 수 있음 (공간이 부족하더라도 한 줄에 배치)
- wrap : 공간 크기에 따라 여러 행에 걸쳐 배치
- wrap-reverse : wrap 반대 방향
flex-flow
: 주축 설정(flex-direction), 묶음 설정(flex-wrap) 같이 가능
justify-content
: flexbox 주축을 따라 배치될 때 → 요소 사이의 공간을 분배하는 방식 결정
: flex-direction이 무엇이냐에 따라서 달라짐
- flex-start : 시작점 정렬
- flex-end : 끝점 정렬 (reverse가 되지는 않는다)
- center : 가운데 정렬
- space-between : 양끝 정렬하고 → 그 나머지 가운데에 있는 것들이 알아서 고르게 분배 / 양끝 여백 X
- space-around : 균등한 여백 포함해서 정렬 / 각 개체마다 여백 존재, flex item이 동일한 여백을 갖는다 / 양끝 여백 O
- space-evenly : 양끝을 포함해서 모든 여백 같음 / flex container가 동일한 여백을 만든다 (space-around와 비슷해보일 수 있으나, 여백의 크기가 살짝 다름)
align-items
: 교차축 items 정렬 방법 (한 줄일 때)
: flex-wrap이 기본값일 때 교차축에서의 배치방법
: 주의!!) wrap을 통해 여러 줄일 경우 align-content 속성 우선으로 적용
- stretch : flex-items의 기본 속성과 같음 / flex container의 높이만큼 길이가 늘어남 / 높이 = 교차축의 길이
- flex-start
- flex-end
- center
- baseline : item의 문자 기준선에 정렬
align-content
: 교차 축의 정렬 방법 설정 (여러 줄 일때)
: 교차축 위에서 justify-content와 동일하게 사용할 수 있는 속성
: flew-wrap = wrap으로 지정 (여러 줄) & 필요한 공간 < flex container가 더 클 때 (여유 공간이 있을 때) → 이럴 경우에만 사용가능
- stretch : 교차축 채울려고 item을 늘림
- flex-start : 시작점 정렬
- flex-end : 끝점 정렬
- center : 가운데 정렬
- space-between : 양끝 정렬, 그 가운데 것들 알아서 고르게 분배 / 양끝 여백 X
- space-around : 균등한 여백 포함해서 정렬 (각 개체마다 여백 존재) / 양끝 여백 O
3. Flex item
align-self
: 교차축에서 items의 정렬방법 설정 (안의 아이템 각각 정렬 설정)
- stretch
- flex-start
- flex-end
- center
- baseline
cf.) align-items, justify-content : center → 세로 가운데, 가로 가운데 정렬
flex-grow
: item 증가 너비 비율 설정 (flex item이 기본 크기보다 더 커질 수 있는지 결정)
: 내부에서 할당받을 수 있는 공간을 상대적으로 정의할 수 있는 속성
: 늘어나는 상황에서 증가(확대) 정도를 결정
: 숫자가 크면 너비 더 많이 차지 (숫자 == 비율)
: item이 가변 너비X, 값이 0 → 효과X
: 반응형 웹 만들때 주로 사용
: 기본값) flex-grow: 0
flex-shrink
: item 감소 너비 비율 설정 (flex item이 기본 크기보다 더 작아질 수 있는지를 결정)
: 내부에서 할당받을 수 있는 공간을 상대적으로 정의할 수 있는 속성
: 줄어드는 상황에서 축소 정도를 결정
: 1 = 줄어들기O / 0 = 줄어들기X
: 반응형 웹 만들때 주로 사용
: 기본값) flex-shirink: 1
flex-basis
: 공간 배분 전 기본 너비 설정 (flex item의 초기 크기를 지정)
: px, em, cm...이 단위
: box-sizing이 따로 설정되지 않은 경우, 콘텐츠 박스의 크기를 결정하게 된다
: 기본값) auto → 대부분 생략
flex
: item의 너비 flex-grow(증가), flex-shrink(감소), flex-basis(기본) 세가지 속성 한 번에 정의 / 적힌 순서대로!
flex: grow shirink basis;
cf.) flex는 자식에 적용되기 때문에 부모-자식-후손 이렇게 있고, 후손까지 적용하려면 → 부모에 flex, 자식에 flex 적용을 해줘야 후손까지 적용
order
: flex item의 배치 순서를 설정 (클 수록 뒤로, 음수 허용)
: 지정한 숫자에 맞춰 오름차순으로 배치가 진행
: 기본값) order: 0
cf.) 코드에 영향을 끼치는 것이 아니라, 보여지는 순서에만 영향을 준다.
cf.) flex-direction 은 전체적 / order는 세부적
[참고 사이트]
- 정리 : https://heropy.blog/2018/11/24/css-flexible-box/
- 연습: https://flexboxfroggy.com/#ko
'공부 > HTML, CSS' 카테고리의 다른 글
[HTML, CSS] Grid (0) | 2022.10.01 |
---|---|
[HTML, CSS] 모바일에 대응되는 웹사이트 (0) | 2022.09.16 |
[HTML, CSS] Transform, Transition, Animation (0) | 2022.09.16 |
[HTML, CSS] HTML, CSS 태그 살펴보기 (0) | 2022.09.15 |
[HTML, CSS] 웹사이트 레이아웃에 영향을 미치는 요소 (0) | 2022.09.13 |
댓글