display:flex / Flex Container, Flex Items

1. display: flex

• display: flex가 적용된 요소로, 이 안에 있는 모든 자식 요소들이 플렉스 아이템이 된다.
• Flex Item(플렉스 아이템) : 플렉스 컨테이너의 자식요소로, 이 요소들은 플렉스 박스 모델에 따라 배치된다.

2. Flex Container, Flex Items 안에 들어가는 것

1-1. Flex Container(부모 요소)

• Justify-content : Main Axis 기준에서의 정렬
  • Main Axis : 가로축
  • 부모 justify-content: center 를 준다고 해도 만약 자식요소가 margin 을 주게 되면 자체적으로 자식으로 인하여 자식 margin이 적용된다.
• align-items : Cross Axis 기준에서의 정렬
  • Cross Axis : 세로축
  • align-items: normal 은 초기값인데, 이는 stretch이다.
    • 즉 자식 요소에 한개에만 height를 주면 나머지도 늘어난다. 즉 자식요소가 늘어나면, 부모요소도 늘어나면서, 나머지 자식요소까지 같이 늘어나게 된다.
• flex-wrap : 가용 공간이 없을 때 어떻게 하겠느냐?
  • 플렉스 아이템이 컨테이너의 경계를 넘을 때 줄바꿈을 할 지 결정한다.
  • flex-wrap: nowrap 이 초기값이다.
  • flex-wrap: wrap 을 한다면, flex-shrink가 적용이 안된다.
• gap : 사이 간격 / row-gap , colum-gap

2-1. Flex Items(자식 요소)

내부 컨텐츠 만큼 너비가 잡힌다.

• flex-basis
  • 플렉스 아이템의 크기를 담당하는 것이며, flex-basis: auto 가 초기값이다.
  • 만약 flex-basis: 0 이라면 콘텐츠 너비 만큼이 아닌 flex-grow: 1 이라면 가용 공간을 기준으로 같은 비율로 나누게 된다.
    • 여기서 내부컨텐츠의 min-width의 값으로 인해 이 이상으로 더 작아질수가 없다.
  • 내부 컨텐츠 양이 늘어나면 auto로 설정하는게 아닌 px, %로 고정시키는 것이 좋다.
• flex-grow
  • 플렉스 아이템이 컨테이너의 남은 공간을 얼마나 차지할지를 결정한다.
  • 기본값은 0이며, 양수로 설저하면 다른 플렉스 아이템과의 비율로 공간을 나눈다.
  • flex-basis의 크기가 있다면, 이 크기와 남은 공간을 비율로 나눠서 더해진다.
    • ex) 3개의 플렉스 아이템이 있고, basis: 30px이라면, 나머지가 90px이 있다. 그러면 30 + (90/3) 이라고 보면 된다.
• flex-shrink
  • 플렉스 아이템이 컨테이너의 공간이 부족할 때 얼마나 줄어들지 결정한다.
  • 기본값은 1이며, 0으로 설정하면 줄어들지 않는다.
  • 콘텐츠가 추가될수록 비율로해서 크기가 작아지는데, 내부콘텐츠 크기만큼은 줄어들진 않는다. 그 이유는 위와 같은 min-width 라는 속성 때문이다.
  • 만약 flex-shrink: 1000000 이렇게 크게되면 줄어들때 가장 빨리 줄어든다
• min-width : 요소가 가질 수 있는 최소 너비를 설정한다. 플렉스 아이템의 내용이 아무리 작더라도 설정된 최소 너비이하로 줄어들지 않도록 제한한다. 플렉스 컨테이너의 크기가 줄어들거나 늘어날 때, min-width에 설정된 값에 따라 아이템의 크기가 변동된다.

3. 플렉스 박스의 장점

• 반응형 디자인 : 플렉스 박스를 사용하면 브라우저 창 크기에 따라 자동으로 아이템의 크기와 위치를 조정할 수 있어, 반응형 디자인에 유리하다.
• 복잡한 레이아웃 : 간단한 문법으로 복잡한 레이아웃을 쉽게 구현할 수 있다.
• 중앙 정렬 : 수평 및 수직 중앙 정렬을 쉽게 할 수 있다.