flex로 레이아웃 정렬하기
1분코딩 오뎅꼬치의 설명이 너무나 적절해서 오뎅꼬치로 이해!
큰 범위 컨테이너 안에 아이템들을 담는 구조로 html 레이아웃 설정.
컨테이너 속성을
.container{
display:flex;
}로 하는 순간
안에 있던 아이템들은 옆으로 나열한 오뎅이 되고 (inline속성이 됨)
main-axis라는 오뎅꼬치로 끼워둔 상태가 된다. (row 정렬이 기본값이 됨)
컨테이너 적용 속성
1) flex-direction 오뎅꼬치의 방향& 오른손잡이 왼손잡이 (main-axis 주축에 대한 설정)
: row (기본값) 가로 오뎅꼬치&오른손잡이
: row-reverse 가로 오뎅꼬치&왼손잡이. 오뎅의 순서 역전됨
: column 세로 오뎅꼬치&손이 아래로
: column-reverse 세로 오뎅꼬치&손이 위로. 오뎅 순서 역전됨
2) flex-wrap 아이템들 묶을거니? 컨테이너 좁아질때 줄바꿈할지 넘치게할지
: nowrap (기본값) 계손 한 줄로 컨테이너 뚫고 넘침
: wrap 컨테이너 안에 묶여서 다음 줄로 줄바꿈됨.
: wrap-reverse 하단좌측부터 정렬해서 점점 위쪽으로 줄바꿈됨
*) flex-flow direction과 wrap 합쳐서 기재 가능
3) justify-content 꼬치의 오뎅 밀기 (아이템의 주축 방향 정렬 설정)
: flex-start (기본값) 오뎅을 꼬치의 뾰족한쪽으로 다 밀기
: flex-end 오뎅을 손잡이쪽으로 다 밀기
: center 오뎅을 꼬치 중앙으로 모으기
: space-around 오뎅 주위에 공간. 가운데 공간 중첩X
-evenly 오뎅 주위에 공간. 가운데 공간 중첩O
-between 오뎅 양 끝에 밀어넣고 중간오뎅들 공간주기
4) align-items 꼬치의 위치
: stretch (기본값) 오뎅이 늘어남
: flex-start 원래 오뎅크기
: flex-end 원래 오뎅크기
: center 원래 오뎅크기
: baseline 텍스트 밑줄을 맞추는 위치로 정렬
5) align-content 여러개의 나란한 꼬치들 위치
*flex-wrap: wrap 으로 여러줄 되었을때,
: stretch (기본값)
: flex-start
: flex-end
: center
: space-around
: space-between
하위 아이템 개별 적용 속성
1-1) flex-grow 브라우저 꽉채우게 늘어남. 어떤 오뎅이 몇비율로 자라나나
기재 안하면 원래 늘어나지 X(기본값이 0)
아이템의 폭비율이 아니라 여백의 비!
1-2) flex-shrink 줄어드는 순간에 여유있는 오뎅 중 어떤 오뎅이 쪼그라드나
: 0이면 안줄어들고 스크롤 만들어버림
기재 안하면 원래 다들 분담해서 쪼그라듬(기본값이1)
2) flex-basis 오뎅이 얼마나 긴가
: 기본값은 auto
전체 아이템값을 0으로 하면 1-1)에서 여백의 비가 아닌 아이템 폭의 비로 flex-grow 설정할 수 있음
*) flex flex-grow 와 flex-shrink 와 flex-basis 한번에 기재 가능( 이렇게 축약형으로 쓰면 flex-basis:0 으로 설정됨)
3) order 순서 임의로 변경. -2 -1 1 2 ....
'CSS' 카테고리의 다른 글
| 속성 한줄쓰기(단축속성)가 가능한 CSS 요소 (0) | 2022.09.14 |
|---|