플렉스
플렉스(정렬)은 1차원 레이아웃을 다룹니다.
1차원 레이아웃은 x축, y축만 존재하며, 수평, 수직으로 정렬하는 것을 의미합니다.
부모 요소의 CSS 속성에서 display: flex 를 추가하면 수평정렬인 것을 확인할 수 있습니다.
display: flex를 추가된 요소는 Flex Container이라고 불리고,
수평정렬된 요소들은 Flex Items라고 불립니다.
display
display는 Flex Container의 화면 출력(보여짐) 특성을 제어하는 속성입니다.
flex(블록 요소와 같이 Flex Container 정의),
inline-flex(인라인 요소와 같이 Flex Container 정의) 값들이 있습니다.
flex-direction
flex-direction은 주 축을 설정하는 속성입니다.
row란 기본값(행 축, 좌→우)이 들어 있으며,
row-reverse(행 축, 우→좌),
column(열 축, 위→아래),
column-reverse(열 축, 아래→위) 값들도 있습니다.
row인 기본값을 적용한 후 보이다시피 좌측에서 우측으로 수평 정렬을 합니다.
row-inverse 값을 적용한 후 우측에서 좌측으로 수평 정렬을 합니다.
column 값을 적용한 후 위에서 아래로 수직 정렬을 합니다.
column-inverse 값을 적용한 후 아래에서 위로 수직 정렬을 합니다.
flex-wrap
flex-wrap은 Flex Items 묶음(줄 바꿈) 여부를 결정하는 속성입니다.
nowrap란 기본값(묶음 없음)이 들어 있으며,
wrap(여러 줄로 묶음),wrap-reverse(wrap의 반대 방향으로 묶음) 값들이 있습니다.
flex-wrap 속성의 기본값이 들어 갔을 때,
보시다시피, 자식 요소들 모두 정사각형으로 너비 속성 부여했더라도
찌그러지게 배치됩니다.
wrap값을 넣으니까 줄 바꿈이 되었습니다.
justify-content
justify-content
는
주 축의 정렬 방법
을 결정하는 속성입니다.
flex-start란 기본값(Flex Items를 시작점으로 정렬)이 들어 있으며,
flex-end(Flex Items를 끝점으로 정렬),
center(Flex Items를 가운데 정렬),
space-between(각 Flex Items 사이를 균등하게 정렬),
space-around(각 Flex Items의 외부 여백을 균등하게 정렬) 값들이 있습니다.
flex-start인 기본값을 부여하면 시작점인 왼쪽으로 정렬됩니다.
flex-end 값을 부여하면 끝점인 오른쪽으로 정렬됩니다.
center 값을 부여하면 가운데로 정렬됩니다.
align-content
align-content는 교차 축의 여러 줄 정렬 방법을 결정하는 속성입니다.
stretch란 기본값(Flex Items를 시작점으로 정렬)이 들어 있으며,
flex-start(Flex Items를 시작점으로 정렬),
flex-end(Flex Items를 끝점으로 정렬),
center(Flex Items를 가운데 정렬),
space-between(각 Flex Items 사이를 균등하게 정렬),
space-around(각 Flex Items의 외부 여백을 균등하게 정렬) 값들이 있습니다.
display: flex 와 flex-wrap: wrap 들어가 있으며, flex items의 height를 지정하지 않았습니다.
height가 auto인 상태에서 stretch 늘어나는 것을 보일 것입니다.
height를 100px로 지정하고 나서 두 열로 구성되 있으며 가운데에 비어 있습니다.
flex-start 값을 부여하면 시작점인 윗쪽에서 차곡차곡 정렬됩니다.
center 값을 부여하면 가운데에서 정렬됩니다.
flex-end 값을 부여하면 끝점인 아래쪽으로 정렬됩니다.
align-items
align-items는 교차 축의 한 줄 정렬 방법을 결정하는 속성입니다.
stretch란 기본값(Flex Items를 교차 축으로 정렬)이 들어 있으며,
flex-start(Flex Items를 각 줄의 시작점으로 정렬),
flex-end(Flex Items를 각 줄의 끝점으로 정렬),
center(Flex Items를 각 줄의 가운데 정렬),
baseline(Flex Items를 각 줄의 문자 기준선에 정렬) 값들이 있습니다.
flex-start 값을 부여하면 시작점인 윗쪽으로 정렬됩니다.
center 값을 부여하면 가운데에서 정렬됩니다.
flex-end 값을 부여하면 끝점인 아래쪽으로 정렬됩니다.
여기까지 모두 Flex Container에 부여하는 여러 속성을 다뤄봤는데
아래부터 Flex Item에 부여하는 속성을 다뤄 보겠습니다.
order
order은 Flex Item의 순서
를 결정하는 속성입니다.
0란 기본값(순서 없음)이 들어 있으며,
숫자가 작을 수록 먼저입니다.
기본값을 부여하면 요소 작성 순서로 정렬됩니다.
예시처럼 order속성에 숫자를 부여했습니다.
-1인 C요소는 가장 작아서 맨 왼쪽에 배치되었습니다.
A와 D요소는 부여된 숫자가 없어서 0인 기본값을 가지며 제자리에 있습니다.
B요소는 17인 가장 큰 숫자를 부여해서 맨 끝에 배치되며,
E요소는 2인 가운데 숫자를 부여해서 B보다 작아서 B의 앞에 배치되었습니다.
flex-grow
flex-grow는 Flex Item의 증가 너비 비율을 결정하는 속성입니다.
0란 기본값(증가 비율 없음)이 들어 있으며,
숫자는 증가 비율을 의미합니다.
기본값을 부여하면 기준 크기로 나타납니다.
A요소에 flex-grow: 1를 부여하고, B,C요소는 부여하지 않았습니다.
B,C요소 크기는 그대로며, A요소는 원래 부모 요소의 나머지 공간을 100% 차지게 됩니다.
A요소에는 부여된 값이 없어서 자기만에 차지한 공간을 그대로 유지됩니다.
B, C요소는 각각 2, 1를 부여했습니다.
즉, 나머지 공간은 B : C = 2 : 1 비율로 차지게 됩니다.
flex-shrink
flex-shrink는 Flex Item의 감소 너비 비율을 결정하는 속성입니다.
1란 기본값(Flex Container 너비에 따라 감소 비율 적용)이 들어 있으며,
숫자는 감소 비율을 의미합니다.
왼쪽 예시에서는 부모요소가 자식요소 너비보다 커서 자식요소들 나란히 잘 나옵니다.
오른쪽 예시에서는 부모요소가 자식요소 너비보다 작습니다.
자식요소의 너비가 각각 100px로 지정함에도 불구하고 찌그러지면서 부모요소에 맞춰줍니다.
flex-shrink에 0으로 부여해서 너비 감소 비율을 0으로 하자는 뜻으로 ABC 요소 너비는 그대로 유지됩니다.
flex-basis
flex-basis는 Flex Item의 공간 배분 전 기본 너비를 결정하는 속성입니다.
auto란 기본값(요소의 Content 너비)이 들어 있으며,
px, em, rem등 단위로 지정할 수 있습니다.
위 예시처럼, flex-basis는 auto값이 들어 갔으며, 즉, 문자 content 너비를 확보했습니다.
그 후 content옆에, 요소에 남은 공간인 flex-grow를 1:1:2 비율로 공간을 분배해줍니다.
잘 보시면 3개의 요소가 정확한 1:1:2로 공간 차지지 않았습니다.
이게 요소들 중에 content가 있어서 그렇습니다.
방금 content니 뭐니 고려해서 복잡하게 계산한 거보다
단순히 요소의 전체 너비를 비율대로 배분하고 싶으면,
flex-basis에 0값을 부여하면 됩니다.
더 나아가 flex-basis에 비율대신 다른 단위로 지정하면
조금 더 복잡하게 진행됩니다.
실무에서 거의 사용 안 합니다.
'프론트엔드 > HTML, CSS, JS기본' 카테고리의 다른 글
| CSS 속성(10) - 변환(transform) (0) | 2023.08.04 |
|---|---|
| CSS 속성(9) - 전환(transition) (0) | 2023.08.03 |
| CSS 속성(7) - 배치(position) (0) | 2023.08.03 |
| CSS 속성(6) - 배경(background) (0) | 2023.08.03 |
| CSS속성(5) - 투명도(opacity) & 글꼴(font) & 문자 (0) | 2023.08.03 |
