CSS - Flex Box, Position

Flex Box

• 자식 엘리먼트에는 어떤 것도 적지 말아야 한다.

• 자식 엘리먼트를 움직이게 하려면 부모 엘리먼트를 flex container로 만들어야 한다.

• flex Container는 두개의 축을 가지고 있다 이것이 main axis와 cross axis이다.

Flex Box - property

display: flex - flex Container를 정의한다.

---

flex-direction - 자식 요소들을 정렬하기 위해 주축 방향main axis을 설정한다. (row 기본값)

👉 flex-direction의 다른 종류 - MDN

---

flex-wrap - 자식 요소들을 한줄로 배치할 것인지, 줄바꿈을 통한 나열을 설정한다. (no wrap 기본값)

👉 flex-wrap의 다른 종류 - MDN

---

justify-content - 주축 즉 평행(main axis)으로 어떤 방식으로 정렬할지 설정한다.

👉 justify-content의 다른 종류 - MDN

---

align-items - 교차축 즉 수직(cross axis)으로 어떤 방식으로 정렬할지 설정한다.

flex-direction이 row라면 수직(cross axis)으로 정렬된다.
flex-direction이 column이라면 평행(main axis)으로 정렬된다.

👉 align-items의 다른 종류 - MDN

---

Flexbox 를 처음 접했을 때 익히기 쉽지 않았는데 아래 링크를 통해서 많이 익숙해졌다.

👉 Flexbox Forrogy - 게임을 통해 Flexbox 연습

Position

position 은 위치를 지정하고 고정시키기 위해 사용된다.

---

position: static은 기본값이며 HTML 문서 상에서 원래 있어야하는 위치에 배치된다.

• HTML에 작성된 순서 그대로 브라우저 화면에 표시가 된다는 것을 뜻하며 top left bottom right 속성값은 position 속성이 static일 때는 무시된다.

---

position: relative는 요소들을 원래 위치에서 벗어나게 배치할 수 있게 된다.

• 요소의 위치 지정은 top bottom left right 속성을 이용해서, 요소가 원래 위치에 있을 때의 상하좌우로 부터 얼마나 떨어지게 할지를 지정할 수 있다.

---

position: absolute는 부모 요소를 기준으로 top left bottom right 속성을 적용한다

• 어떤 요소의 display 속성을 absolute로 설정하면, 부모 요소의 display 속성을 relative로 지정한다.

• position: absolute인 요소는 HTML 문서 상에서 독립되어 앞뒤에 나온 요소와 더 이상 상호작용을 하지 않게 된다.

---

position: fixed - 요소를 항상 고정된(fixed) 위치에 배치할 수 있다.

• fixed 속성값의 배치 기준이 자신이나 부모 요소가 아닌 뷰포트(viewport), 즉 브라우저 전체화면이다.

• position: fixed는 position: absolute 와 마찬가지로 HTML 문서 상에서 독립되어 앞뒤에 나온 요소와 더 이상 상호작용을 하지 않는다.

---

position: sticky는 요소가 화면 상단에 끈적하게(sticky) 붙어서 움직이지 않게 배치된다.

• sticky 속성을 갖는 요소들은 자신의 부모 요소안에서만 적용된다.

• 부모태그에 무조건 height 높이 값이 들어가야 한다. (부모 높이 값 만큼 sticky 고정)

• 부모요소중에 overflow: hidden, auto, scroll 속성이 적용되어 있으면 안된다.