[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

0 이상일 때부터 작용 / 여유 공간이 있을 때만 작용 (없으면 줄어든다) / 2번째 = 1, 3번째 = 2 → 1:2 비율로 커진다.

 

 

flex-shrink

: item 감소 너비 비율 설정 (flex item이 기본 크기보다 더 작아질 수 있는지를 결정)

: 내부에서 할당받을 수 있는 공간을 상대적으로 정의할 수 있는 속성

: 줄어드는 상황에서 축소 정도를 결정

: 1 = 줄어들기O  /  0 = 줄어들기X

: 반응형 웹 만들때 주로 사용

: 기본값) flex-shirink: 1

2번째 = 2, 3번째 = 3

 

 

flex-basis

: 공간 배분 전 기본 너비 설정 (flex item의 초기 크기를 지정)

: px, em, cm...이 단위

: box-sizing이 따로 설정되지 않은 경우, 콘텐츠 박스의 크기를 결정하게 된다

: 기본값) auto → 대부분 생략

2번째 = 100px, 3번째 = 200px 지정

 

 

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는 세부적

order를 사용해서 아이템을 역순으로 배치

 

 

[참고 사이트]

- 정리 : https://heropy.blog/2018/11/24/css-flexible-box/

- 연습: https://flexboxfroggy.com/#ko