[CSS] display와 flex

 

📌 display 속성

display

: 화면에 렌더링 방법을 결정하는 속성

• block: Nomal flow에 따라 block 요소처럼 동작, 요소 앞 뒤로 줄바꿈을 생성함
  기본값
• none: 객체가 만들어지지 않음
  (화면에만 안보이는게 아님, DOM Tree에서 없어짐)
• flex: 요소가 flex 컨테이너가 됨
  (부모 요소에 선언)
• inline-flex: inline 요소처럼 동작, flex-box 모델에 따라 콘텐츠를 배치함
• flow-root: 부모 요소가 자식 요소들을 감싸고 있을 때, 자식 요소가 부모 요소의 크기를 정확하게 반영하지 않는 문제가 발생하는데 이러한 문제를 해결함

 

---

 

📌 flex

flex

• 요소 가로 배치
• inline 요소로 변경됨 (크기가 자기 컨텐츠만큼만 설정)

 

 

flex-container

: 자식 요소(items)를 감싸는 flex 박스

 

 

 

flex-items

: 컨테이너 안에 포함되는 자식 요소들

• 부모 요소의 영향을 받음

 

 

 

flex-flow

: direction(방향) + wrap(줄바꿈 여부)를 합친 속성

• 단축 속성

flex-flow: row nowrap;

 

 

 

justify-content

: 자식 요소를 메인축 기준으로 정렬

• 축은 flex-direction을 고려해야 함 (row: 가로, column: 세로)
• 기본값: flex-start

 

 

align-items

: 자식 요소를 교차축 기준으로 정렬

• 기본값: strech

 

 

order

: 요소의 순서 지정

• 자식 요소(flex-items)에 부여
• order를 주지 않으면 마크업(html 태그) 순서대로 배치된다. 👉 order: 0;을 갖고 있는 상태
• 음수 값을 주면 마크업 된 순서보다 앞에 배치 (order: -1;)
• order 값이 같을 경우 마크업 순서대로 배치

 

---

 

flex 가이드

A Complete Guide to Flexbox | CSS-Tricks

 

flex-direction: 요소 방향 / justify-content, align-items: 축에서 이동시키기

 

셀 자체를 정렬하기: justify-content / align-content / place-content

 

grid 셀 안의 내용물 정렬하기: justify-items / align-items

 

---

참고

 

display - CSS: Cascading Style Sheets | MDN