flex box

• float, position을 사용하지 않아도 쉽게 정렬할 수 있다.

구성 요소

1. container: item 들을 정렬하는 그릇
2. item: 정렬되는 아이템

이용 순서

1) flex box 선언하기

• display : flex | inline-flex
• 정렬하고 싶은 요소를 감싸고 있는 부모에게 선언 한다.

2) 정렬 방향 설정

• flex-direction: *row, column, row-reverse, column-reverse

3) 한 줄, 여러 줄 정렬

• flex-wrap : *nowrap | wrap
  • nowrap
  • 강제로 자식의 사이즈를 줄여서라도 한 줄로 정렬
  • 여러 줄로 형성되어 전체 영역을 감싸는 듯한 wrap과 달리, 한 줄로 만들기 때문에 nowrap이라고 함
• wrap: 모두 정렬할 수 없는 공간이면 여러 줄로 만든다.

4) 정렬하기

• justify-content
  • 메인 축,flex-direction과 같은 축
• align-items
  • 메인 축의 반대 축
• space-between: 가운데 공백이 생김
• space-around: 양 옆에 공백이 생김

container {
  display: flex;
  flex-direction:column;
  flex-wrap:no-wrap;
  justify-content:flex-start;
}

align-items vs align-content

• flexwrap: wrap인 경우에만 차이가 있다.
• align-items: 한 축에 배치되어 있는 각 item들의 배치에 관한 속성
• align-content: cross 축들의 배치에 관한 속성
• 팁: 선 align-items 후 align-content를 통해 화면을 보고 사용

반응형 레이아웃 예시

.content{
    max-width: 800px;
    margin: 0 auto;
}
.flexbox{
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}
.item{
    min-height: 200px;
    flex-basis: 150px;
    flex-grow: 1;
}

• flex-grow : 1
  • 자동으로 크기가 늘어나면서 남는 여백을 메꿈
• flex-basis : 150px
  • 아이템 너비 150px을 기준으로 남는 여백을 자동으로 채우면서 아이템들을 다음 행에 채워나간다.
  • 레이아웃 너비인 "800px" 안에 flex-basis 속성에서 정한 아이템 너비의 합이 레이아웃 너비보다 더 커지면, 한 행에 3개, 또는 2개의 아이템이 자동으로 배치된다.

2. container 속성

3. item 속성

• order: 마크업 된 순서와 무관하게 스타일만으로도 순서를 조정할 수도 있다.

.red {
    order: 1;
}
.red {
    order: 3;
}
.red {
    order: 2;
}

4. flex 박스 이용 시 주의사항

• 자식 요소에 width값을 주지 않으면 부모 값을 상속하기에 width는 끝까지 늘어난다.
• height값은 자식 엘리먼트값만 포함
  • align-items:center을 해도 세로 중앙 정렬이 먹지 않을 수 있다.
  • height:95vh;로 정도로 잡아놓아 정렬할 수 있는 여백을 마련한다.