opacity
: 1은 불투명, 0 ~ 1의 값underline
: 밑줄line-through
: 통과static
: 기준 없음relative
: 요소 자신을 기준, 사용 거의 안함absolute
: 위치 상 부모 요소를 기준fixed
: 뷰포트(브라우저) 기준sticky
: 스크롤 영역 기준display
: Flex Container의 화면 출력(보여짐) 특성
- flex : 블록 요소와 같이 Flex Container 정의
- inline-flex : 인라인 요소와 같이 Flex Container 정의
flex-direction
: 주 축을 설정
- row : 행 축 (좌 -> 우)
- row-reverse : 행 축 (우 -> 좌)
- column : 열 축 (위 -> 아래)
- column-reverse : 열 축 (아래 -> 위)
- flex-direction : column
의 경우 Main-axis는 y축
flex-wrap
: Flex Items 묶음(줄 바꿈) 여부
- nowrap(기본값) : 줄바꿈 없음
- wrap : 여러 줄로 묶음
justify-content
: 주 축의 정렬 방법
- flex-start(기본값)
- flex-end : 아이템의 순서는 바뀌지 않음...! ( flex-direction:row-reverse와 다른점)
- center
align-content
: 교차 축의 여러 줄 정렬 방법
- stretch(기본값) : Flex Items를 시작점으로 정렬
- flex-start, flex-end, center
align-items
: 교차 축의 한 줄 정렬 방법
- stretch(기본값), flex-start, flex-end, end
- items가 한 줄일 때 사용, 여러줄일때는 align-content 사용
order
: Flex Item의 순서flex-grow
: Flex Item의 증가 너비 비율, flex-grow가 없는 item들의 width를 빼고 나머지 공간을 비율로 나눠갖음flex-shrink
: Flex Item의 감소 너비 비율flex-basis
: Flex Item의 공간 배분 전 기본 너비
CSS 속성이 너무 많고 어렵다...🥲
밑에 링크를 통해 공부하니 그나마 좀 감이 잡히긴 하지만 여전히 어렵다...
https://flexboxfroggy.com/#ko