[CSS] position, flex

Position(배치)

요소의 위치는 반드시 어떠한 기준을 잡고 설정해야 한다.

position속성은 요소의 위치를 지정하는 기능을한다.

• 기본: static
• 가능값: relative(요소 자신 기준), absolute(부모 요소 기준),  fixed(뷰포트 기준), sticky(스크롤 영역 기준)

position: relative를 이용하는 배치는 거의 사용하지 않는다.
대부분 absolute 사용. 왜? 다른 요소들의 혼동이 올 수 있기 때문이다.

top, bottom, left, right 속성은 위치를 지정한다.

• 기본: auto
• 가능값: 양수, 음수

 

---

flex

position 속성 값 중 하나가 아니라 CSS의 display 속성 값이다. flexible한 박스 레이아웃을 생성하는데 사용되는 도구이다.

요소 간 공간 배분과 정렬을 쉽게 할 수 있는 도구를 제공하며 반응형 디자인에도 유용하다.

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

.container {
  display: flex;
}

.item {
  flex: 1;
}

여러개의 내부 엘리먼트를 담고 있는 외부 엘리먼트에 display: flex; 스타일을 적용하면,

외부 엘리먼트(부모요소)는 flex container가 되고, 내부 엘리먼트(자식요소)는 자동으로 flex item이 된다.

flex container와 flex item에는 서로 적용할 수 있는 CSS속성이 다르기 때문이다.

예를들어, flex container에는 flex-direction, justify-content, align-items와 같은 속성을 적용할 수 있는 반면, flex item에는

flex, align-self, order와 같은 속성을 적용할 수 있다.

 

---

참고자료

https://www.daleseo.com/css-flexbox/

CSS 플렉스박스(Flexbox) 이해하기

https://substantial-eoraptor-be9.notion.site/4-7-7e24b2d2318b4fbea3fb075cef352aec