제수기 - 제발 수업내용을 기억해라

Flexbox

화면 배치를 위한 최신 CSS 기술

• flex : 메인축/크로스축 설정
• grid : 행열 기준으로 2차원 배치

flex

부모요소 flex container

• display: flex | inline-flex
• flex-direction: row | column
  - 메인축 방향 설정
• justify-content: flex-start(기본값) | flex-end | center | space-between | space-around
  - 메인축 정렬
• align-items: stretch(기본값) | flex-start | flex-end | center | baseline
  - 크로스축 정렬
• flex-wrap: nowrap(기본값) | wrap | wrap-reverse
  - 줄바꿈 여부
• align-content: flex-wrap이 적용돼 여러축일때 크로스축 정렬을 담당한다.

자식요소 flex item

• 자식요소가 크기 가중치 처리

list-style: none; : 불릿 제거
padding: 0; : 기본 padding left 제거

main 축

열 방향이 cross axis

flex-container, flex-item

li를 ul의 flex-item으로 넣으면 이렇게 된다.

flex-wrap: wrap; 넣어서 화면 조정했을 때 아이템들이 내려가니까 메인축이 2개가 되면
align-content를 사용해서 위치를 조정할 수 있다.