Section 10, Responsive CSS & Flexbox

❗️ FOCUS ON CONCEPTS, NOT MEMORIZING THE PROPERTIES

Flexbox

• display: flex; 포함한 셀렉터가 Flexbox container

• X축: Main Axis / Y축: Cross Axis

• flex-direction row; / row-reverse; / column; / column-reverse;

• justify-content how the actual elements, content is distributed across the main axis

  • flex-start: start from the left
  • flex-end: start from the right
  • center: centered along the main axis
  • space-between: 일정한 간격으로 양 끝으로 자동 정렬
  • space-around: 좌우 양 끝에도 공백 추가됨
  • space-evenly: 좌우 양 끝 공백 + 대상 사이의 공백이 전부 같은 사이즈

• flex-wrap whether our elements are going to wrap along the main axis onto a new line if it’s horizontal, or a new column if it’s a vertical main axis

  • wrap
  • wrap-reverse (반대 방향)

• align-items distributes space or items along the cross axis

  • flex-start
  • flex-end
  • center
  • baseline: 천장에 전부 붙힘. 텍스트 기준 (element의 높이가 전부 달라도 텍스트 정렬을 기준으로 천장에 붙힘)

• align-content 여러줄의 아이템을 정렬

• align-self for single element
  
  
  
  

Flex Sizing Properties

• flex-basis: the initial size that an element should be added into the box as

• flex-grow: the amount of available space an element should take up (accepts unit-less number, 무단위숫자 → 비율을 나타냄)

• flex-shrink: if items are larger than the container, they shrink according to flex-shrink.

Flex Shorthand

/* Three values: flex-grow | flex-shrink | flex-basis (whichever has units) */
flex: 2 2 10%

Responsive Design & Media Queries

@media (min-width | max-width | orientation: landscape (가로모드) ...) {

	h1 {
		color: green;
	}

}

chrome dev tool → 디바이스 변경 아이콘으로 디스플레이 미리보기 가능