006. CSS Flexbox

https://heropy.blog/2018/11/24/css-flexible-box/의 블로그에서 flexbox에 대한 자료를 토대로 한 이해를 바탕으로 작성한 글입니다. 자세한 내용은 해당 블로그에 더 상세하게표기되어 있습니다!!

CSS position

• position: static; - 기본적인 본인의 위치
• position: absolute; - 왼쪽 상단의 모서리 0px, 0px을 기준으로 사용자가 지정하는 만큼 이동.
• position: relative; - 원래 위치와 비교해서 사용자가 지정하는 만큼 이동.
• position: fixed; - 지정된 위치에서 Website를 스크롤하더라도 위치 유지.
• position: sticky; - 원래 위치에서 스크롤을 내리면 최상단에서 붙어 따라 움직임.

Website layout

• CSS에서 layout을 설정하는 방법은 Flexbox(더 오래된 기능), Grid(최신 기능, 지원하지 않는 브라우저가 있음.)가 있음.
  
• Flexbox와 Grid의 차이점
  - Flexbox : 1차원 정렬 Row | Column
  
  - Grid : 2차원 정렬 Row & Column
  

Flex box

CONTAINER

display

flex-flow

flex-direction

주 축(main-axis)과 교차 축(cross-axis)

위에서 언급했었던 주 축(main-axis)과 교차 축(cross-axis)의 개념은 다음과 같습니다.
값 row는 Items를 수평축으로 표시하므로 이때는 주 축이 수평이며 교차 축은 수직이 됩니다.
반대로 값 column은 Items를 수직축으로 표시하므로 주 축은 수직이며 교차축은 수평이 됩니다
즉, 방향(수평, 수직)에 따라 주 축과 교차 축이 달라집니다.

시작점(flex-start)과 끝점(flex-end)

시작점(flex-start)과 끝점(flex-end)이라는 개념도 있습니다.
이는 주 축이나 교차 축의 시작하는 지점과 끝나는 지점을 지칭합니다.
역시 방향에 따라 시작점과 끝점이 달라집니다.

flex-wrap

justify-content

align-content

교차 축(cross-axis)의 정렬 방법을 설정합니다.
주의할 점은 flex-wrap 속성을 통해 Items가 여러 줄(2줄 이상)이고 여백이 있을 경우만 사용할 수 있습니다.
Items가 한 줄일 경우 align-items 속성을 사용하세요.

align-items

교차 축(cross-axis)에서 Items의 정렬 방법을 설정합니다.
Items가 한 줄일 경우 많이 사용합니다.
주의할 점은 Items가 flex-wrap을 통해 여러 줄(2줄 이상)일 경우에는 align-content 속성이 우선합니다.
따라서 align-items를 사용하려면 align-content 속성을 기본값(stretch)으로 설정해야 합니다

|값|의미|기본값|
|stretch|Container의 교차 축을 채우기 위해 Items를 늘림|stretch|
|flex-start|Items를 각 줄의 시작점(flex-start)으로 정렬||
|flex-end|Items를 각 줄의 끝점(flex-end)으로 정렬||
|center|Items를 가운데 정렬||
|baseline|Items를 문자 기준선에 정렬||

Items