레이아웃(flex-box에 대해서)

📂와이어프레임 :

레이아웃의 뼈대를 그리는 단계. 와이어프레임을 보고 어떤 목적을 가진 프로그램인지 유추하기 쉬울수록 좋은 와이어프레임이라고 할 수 있다.

📌 layout

HTML문서는 기본적인 고유의 스타일을 가지고 있기 때문에, 레이아웃을 잡는데 방해가 되기도 한다.
따라서 기본 스타일링을 제거하고 디자인한 대로 에이아웃을 구현할 수 있는 코드를 추가하는 것이 좋다.
기본 스타일링의 제거하는 css 코드의 예시

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

📌Flex box

🥸 부모에 적용해줄 수 있는 flexbox 속성

• 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,space-between, space-around
• align-item : 축 수직 방향 정렬
  row, column마다 정렬 방향이 다름
  stretch, flex-start, flex-end, center, baseline

위 항목들 중에서 헷갈린것 : justify-content, align-item의 방향이 헷갈렸는데,
justify-contentsms 정렬축 방향과 수평으로, align-item은 수직으로 정렬된다고 생각하면 편하다.

🤓 자식에 적용해줄 수 있는 flexbox 속성

• flex : grow팽창지수 , shrink수축지수 , basis기본크기
  기본 값은 flex : 0 1 auto;
  박스 영역안에 a,b,c가 있을때 flex-grow를 1:1:1로 설정해놓으면 박스 안에 각가 똑같은 영역을 차지한다
  flex-shrink속성은 flex-grow속성으로 비율을 변경하는 경우, 기본값인 1로 두어도 무방하다.
  flex-basis는 flex-grow 속성의 값이

그 외에 참고 : flex-basis를 사용하지 않는다면, 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해서 width대신 max-width를 쓸 수 있다.