[TIL] Flexbox

Flexbox

레이아웃을 만들 때 Flexbox를 사용할 수 있다.
felxbox는 다양한 속성들을 가지고 있는데, 부모 요소에 적용해야 하는 속성들과 자식 요소에 적용해야 하는 속성들이 있다.

부모 요소에 적용해야 하는 속성들

• display : flex 자식 박스 요소 정렬, 차지하는 크기 설정
• flex-direction 정렬 축 (row, column, row-reverse, column-reverse)
• flex-wrap 줄 바꿈 (nowrap, wrap, wrap-reverse)
• justify-content 축 수평 방향 정렬
  (row, column, flex-start, flex-end, center, baseline)
• align-items 축 수직 방향 정렬
  (row, column, flex-start, flex-end, center, baseline)

justify-content와 align-item은 flex-direction의 축 방향에 따라 달라짐.

자식 요소에 적용해야 하는 속성들

• flex : <grow(팽창 지수)> <shrink(수축 지수)> <basis(기본 크기)>
• 기본값은 0 1 auto
  -grow와 shrink 값은 동시에 지정하지 않는 걸 권장하는듯. 총합에서 비율로 공간을 차지하기 때문에 계산이 어렵다.

오늘의 오답노트

*오늘은 오답노트라기 보다는 어려웠던 점 위주로 작성

1. 자식 요소 적용 속성들은 아직 감이 잘 안 잡힌다. 도전해보기 과제로 나온 것도 이리저리 만들어봤는데 좀 많이 헤맸다. 마지막에 그나마 비슷하게 만들긴 했는데 탐탁지가 않음.

2. class 이름 정하는 거 힘들다. 내가 지금 만들고자 하는 요소와 관련이 있지만 너무 지엽적이지 않게 짓고 싶은데... 버튼 박스, 스몰 콘테이너 이런 것만 생각나네 ^^... 듀토리얼 나중에 참고했을 때 보니까 로우 박스, 클리어 엔터 버튼 등등 보면서 많이 배웠다. 내 작명 실력도 차차 나아질거라 믿는다!

3. 부모 요소 적용 속성들은 그래도 계산기 목업 만들면서 조금이라도 써본듯. 내일은 자식 요소 적용 속성들 위주로 이리저리 고쳐봐야지.