231023_CSS

Flex

1) display

2) flex-dircetion

3) flex-wrap

4) justify-content

 

5) align-conten

교차축 정렬방법을 지정함, 두줄 이상일 때 주로 사용하며 한 줄일 땐 사실상 의미가 없음. 부모의 교차축이 기준임. 

 

6) alig-items

한줄에서의 교차축 정렬 방법 지정, 한줄 일 때도 사용할 수 있음. 

 

order

flex item 의 순서. 1~4번 박스는 처음 본인 자리에서 0번값을 가진다. 본인을 기준으로 음수값은 왼쪽, 정수값은 오른쪽으로 이동한다. 아래의 경우 1번 박스는 본인 기준 제일 오른쪽으로 위치를 옮길 거기 때문에 17을, 3번 박스는 본인 기준으로 왼쪽 한칸으로 이동해서 2번 박스가 있는 곳으로 옮길 거기 때문에 -1, 4번 박스는 제일 오른쪽에서 제일 왼쪽으로 이동할 거기 때문에 3번 박스보다 더 큰 음수 값을 부여했다. 

 

flex-grow

flex item의 증가 너비 비율을 지정하며, 증가 너비 비율이 클수록 더 많은 너비를 차지한다. width 속성으로 요소의 가로 너비를 지정해도 flex-grow속성으로 증가 너비 비율을 지정하는 순간 요소의 너비가 늘어난다.

 

flex-shrink

flex item 의 감소 너비, 1은 flex- container 너비에 따라 감소 비율을 적용하며, 숫자는 감소 비율을 의미한다.

 

 

flex-basis

flex item의 공간이 배분되기 전 기본너비를 지정하며, 기본값은 auto로 요소내용의 너비를 기본 너비로 사용함. 값을 0으로 지정하면 기본 너비가 없도록 만들 수 있으며, 기본 너비가 있는 경우 기본너비를 제외한 나머지 너비를 증가 너비 비율로 계산함.

 

전환(transition)

전환 효과는 요소의 전(before)과 후(Agter)를 자연스럽게 애니메이션 처리하는 것을 의미하며, transition은 단축 송성이기 때문에 개별 속성과 값을 띄어쓰기로 구분하여 작성하는 것이 가능하다.

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

속성명	역할	기본값	지정값
transition-property	효과를 적용할 css 속성이름	all	모든 속성에 적용, 그 외 전환 효과가 가능한 속성 이름
transition-duration	효과가 지속될 시간을 지정	0s	시간(초 단위)
transition-timing-function	효과의 타이밍 함수를 지정	ease	linear (일정) ease (느림-빠름-느림) ease-in (느림-빠름) ease-out (빠름-느림) ease-in-out (느림-빠름-느림)
transition-delay	효과가 몇 초 뒤에 시작할지 대기시간을 설정	0s	시간(초 단위)

 

변환: 1) transform

그 외에도 다양한 변환 함수가 있다..

 

변환: 2) perspecitve

하위 요소를 관찰하는 원근 거리를 지정한다. 변환함수의 perspective와는 다른 속성으로, 속성은 관찰대상의 부모에 적용하고 변환함수는 관찰대상 그 자체에 적용된다.

 

변환: 3) backface-visivility

3D변환으로 뒤집어진 요소의 뒷면 표시 여부를 지정하며, 기본값은 뒤집힌 뒷면이 보이는 것이다. 만약 이 값을 hidden으로 지정하면 요소를 뒤집었을 때 뒷면이 화면에 보이지 않는다.