패스트캠퍼스 챌린지 9일차 - Part 1. CSS 속성(3)

18. 플렉스(정렬) Container (1)

1차원 레이아웃

/* 부모 요소 Container */
display: flex;

display : Flex Container의 화면 출력(보여짐) 특성

• flex : 블록 요소와 같이 Flex Container 정의
• inline-flex : 인라인 요소와 같이 Flex Container 정의

flex-direction : 주 축을 설정

• row : 행 축 (좌⇒우)
• row-reverse : 행 축 (우⇒좌)
• column : 열 축 (위⇒아래)
• coluumn-reverse : 행 축 (아래⇒위)

19.플렉스(정렬) Container (2)

flex-wrap : Flex Items 묶음(줄 바꿈) 여부

• nowrap : 묶음(줄 바꿈) 없음
• wrap : 여러 줄로 묶음

justify-content : 주 축의 정렬 방법

• flex-start : Flex Items를 시작점으로 정렬
• flex-end : Flex Items를 끝점으로 정렬
• center : Flex Items를 가운데 정렬
• space-between : 각 Flex Items 사이를 균등하게 정렬
• space-around : 각 Flex Items의 외부 여백을 균등하게 정렬

align-content : 교차 축의 여러 줄 정렬 방법

• stretch : Flex Items를 교차 축으로 늘림
• flex-start : Flex Items를 시작점으로 정렬
• flex-end : Flex Items를 끝점으로 정렬
• center : Flex Items를 가운데 정렬
• space-between : 각 Flex Items 사이를 균등하게 정렬
• space-around : 각 Flex Items의 외부 여백을 균등하게 정렬

* 두 줄 이상이어야 하고, wrap이어야 하고, 빈 공간이 있어야 동작

 

align-items : 교차 축의 한 줄 정렬 방법

• stretch : Flex Items를 교차 축으로 늘림
• flex-start : Flex Items를 시작점으로 정렬
• flex-end : Flex Items를 끝점으로 정렬
• center : Flex Items를 가운데 정렬

각 줄에 대해서 정렬함

한 줄일 때 align-content는 동작하지 않으므로 align-items 사용

20. 플렉스(정렬) items

order : Flex Item의 순서

• 0 : 순서 없음
• 숫자 : 숫자가 작을 수록 먼저

flex-grow: Flex Item의 증가 너비 비율

• 0 : 순서 없음
• 숫자 : 증가 비율

비어있는 나머지 공간을 어떤 비율로 채울 것이냐

 

flex-shrink: Flex Item의 감소 너비 비율

• 1 : 순서 없음
• 숫자 : 감소 비율

0으로 넣으면 컨테이너가 줄어서 아이템이 차지할 공간이 없더라도 사이즈 줄이지 않음

flex-basis : Flex Item의 공간 배분 전 기본 너비

• auto : 요소의 Content 너비
• 단위 : px, em, rem 등 단위로 지정

빨간 점선은 flex-grow하기 전 채워진 내용

내용과 상관 없이 1:1:2의 비율로 만들고 싶으면 flex-basis를 0으로 설정

flex-basis를 100px로 설정하면 기본 너비를 100px로 해석하여 그것을 뺀 공간의 비율을 1:1:2로 계산

21. 전환

요소의 전환(시작과 끝) 효과를 지정하는 단축 속성

전환 효과는 hover, focus, active 등과 같은 상호작용 시 적용됨.

 

transition : 속성명 지속시간 타이밍함수 대기시간;

 

transition-property : 전환 효과를 사용할 속성 이름

• all : 모든 속성에 적용
• 속성이름 : 전환 효과를 사용할 속성 이름 명시

transition-duration : 전환 효과 지속 시간 (필수 포함 속성)

• 0s : 전환 효과 없음
• 시간 : 지속시간(s)을 지정

transition-timing-function : 가속도 함수

• ease : 느리게 - 빠르게 - 느리게
• linear : 일정하게
• ease-in : 느리게 - 빠르게
• ease-out : 빠르게 - 느리게
• ease-in-out : 느리게 - 빠르게 - 느리게
• cubic-bezier(n,n,n,n) : 자신만의 값을 정의(0~1)

transition-delay : 전환 효과가 몇 초 뒤에 시작할지 대기 시간 지정

• 0s : 대기시간 없음
• 시간 : 대기시간(s)을 지정

transition에 시간 2개 설정하면 뒤에 있는 시간 delay

 

http://bit.ly/3Y34pE0

패스트캠퍼스 [직장인 실무교육]

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.