Flex

flex 요소는 유연하게 동작하는 요소이다.
(가로/세로/요소를 정리하기 위한 요소)
container, item과 함께 사용된다.

Cotainer-play

display-outside -> Block,Inline 디스플레이의 바깥쪽 관계를 정의하는것
display-inside-> 내부의 아이템을 어떤식으로 디스플레이 할지 정의하는것
Block,Inline -> 내 앞 뒤의 다른 요소들이다.
flex,gird-> 안쪽에 있는 아이템 요소들이다.
display는 container에서 결정된다.

Cotainer-Flex-direction

CSS속성의 플렉스 컨테이너 내의 아이템을 배치할때 사용할 주축 및 방향(정방향,역방향)을 지정한다.
1. 주축의 위치 수평 or 수직으로 할지 정한다.
2. 주측의 방향을 정방향 or 역방향으로 할지 정한다.
Flex-dricetion은 총 4가지 쓸 수 있다.

Cotainer-flex–wrap, flex-flow (shorthand)

flex-wrap은flex-item 요소들이 강제로 한 줄로 배치되게 할것인지 아니면 여러행으로 나누어 표현할지 결정하는 속성이다.

• no wrap ->요소들을 한줄에 배치
• wrap ->flex-item 여러행 걸쳐 배치. 일반적으로 위에서 아래로 쌓이는 순서이다.
• wrap-reverse-> wrap 속성값과 동일하지만, 요소가 나열되는 시작점과 끝점의 기준을 반대로 배치한다.

item-order

플렉스 또는 그리드컨테이너 안에서 현재 요소의 배치 순서를 지정한다.
컨테이너 아이템의 정렬 순서는 오름차순 order값이고, 같은 값일 경우 소스코드의 순서대로 정렬한다. (음수도 가능하다.)
ex) 1,2,3,4,5의 박스들은 0이라는 값이다. 여기서! 3박스를 -1값을 주면 맨 앞으로 이동한다.

item-flex-grow

flex-item요소가 flex-container 요소 내부에서 할당 가능한 공간의 정도를 선언한다.

item- flex-shrink

flex-item요소의 크기가 flex-container 요소의 크기보다 클때 flex-shrink 속성을 사용하는데 설정된 숫자 값에 따라 flex-container 요소 내부에서 flex-item 요소의 크기가 축소된다.
shrink의 기본값은 1이다.

item-flex-basis

플렉스 아이템의 초기 크기를 지정한다. 0으로 설정하면 직관적으로 이해하기 쉽다.

item-flex(shorthand)

flex grow: 0 flex shrink: 1 flex-basis: auto
flex-basis을 적지 않으면 auto로 되지 않고 0으로 되므로 꼭 적어야된다.
flex 1 을 하면 왜 꽉 채워지는 생각해보자!

Cotainer-justify-content

주측을 기준으로 아이템들을 어떻게 정렬할지에 대한 속성이다.
justify-content 사용시 flex-direction이 어떤 건지 확인해야 한다.

Cotainer- align-items

align-items 한줄의 대한 교차축 정렬이다. 한줄만 사용가능 하다.

Cotainer- align-content

align-content여러줄의 대한 교차축 정렬이다.
align-items와 다르게 space-between, space-around 를 사용할수 있다.

item - align-self