flex박스의 수평정렬(justify-content)과 수직정렬(align-items) 순서대로 수직쌓기(flex-direction) 줄바꿈하기(flex-wrap) display 속성

justify-content(양쪽정렬-콘텐츠)

: justify-content 속성은 플렉스 요소의 수평 방향 정렬 방식을 설정합니다.

이 속성은 다음과 같은 속성값을 가질 수 있습니다.

1. flex-start : 기본 설정으로, 플렉스 요소는 플렉스 컨테이너의 앞쪽에서부터 배치됩니다.

2. flex-end : 플렉스 요소는 플렉스 컨테이너의 뒤쪽에서부터 배치됩니다.

3. center : 플렉스 요소는 플렉스 컨테이너의 가운데에서부터 배치됩니다.

4. space-between : 플렉스 요소는 요소들 사이에만 여유 공간을 두고 배치됩니다.

5. space-around : 플렉스 요소는 앞, 뒤, 그리고 요소들 사이에도 모두 여유 공간을 두고 배치됩니다.

align-items(정렬하다-아이템들)

: align-items 속성은 플렉스 요소의 수직 방향 정렬 방식을 설정합니다.

이 속성은 한 줄만을 가지는 플렉스 박스에서는 효과가 없으며, 두 줄 이상을 가지는 플렉스 박스에서만 효과가 있습니다.

이 속성은 다음과 같은 속성값을 가질 수 있습니다.

비슷한걸로 text-align이 있는데
이건 align-items는 플렉스 요소만을 컨트롤하고
text-align은

1. stretch : 기본 설정으로, 플렉스 요소의 높이가 플렉스 컨테이너의 높이와 같게 변경된 뒤 연이어 배치됩니다.

2. flex-start : 플렉스 요소는 플렉스 컨테이너의 위쪽에 배치됩니다.

3. flex-end : 플렉스 요소는 플렉스 컨테이너의 아래쪽에 배치됩니다.

4. center : 플렉스 요소는 플렉스 컨테이너의 가운데에 배치됩니다.

5. baseline : 플렉스 요소는 플렉스 컨테이너의 기준선(baseline)에 배치됩니다.

flex-direction(flex박스를 만들고 사용 가능. 수직으로 쌓을때 사용)

/ 한 줄의 글을 작성하는 방향대로 /
flex-direction: row;

/ 처럼, 대신 역방향 /
flex-direction: row-reverse;

/ 글 여러 줄이 쌓이는 방향대로 /
flex-direction: column;

/ 처럼, 대신 역방향 /
flex-direction: column-reverse;

/ 전역 값 /
flex-direction: inherit;
flex-direction: initial;
flex-direction: unset;

flex-wrap

https://www.tabmode.com/homepage/flex-wrap.html
참고 ㄱ ㄱ

flex-grow와 flex-shrink

flex-grow(자라다) : 플렉스 박스의 크기가 자동으로 주어진 비율대로 늘어난다.
flex-shrink(수축하다) : 플렉스 박스의 크기가 자동으로 주어진 비율대로 줄어든다.

.project{
flex-grow: 1;
}

• project클래스의 플렉스 박스 크기의 비율을 100%(1)채운다.

display 속성

• display: none;
  특정 요소를 숨겨뒀다가 조건이 맞으면 보이게 할때 많이 사용하는데,
  opacity를 사용해서도 컨트롤 할 수 있지만 두개의 차이는 display:none은
  해당 부분을 완전히 지워버리지만 opacity는 투명하게만 만들 수 있을뿐
  여전히 클릭은 된다.