FlexBox 총정리

euneun·2022년 1월 5일
0

CSS

목록 보기
1/2
post-thumbnail

Flexbox

항상 익숙하게 썼던것들은 한번더 간단하게 정리해보고, 항상 그때그때 검색하고 잊어버렸던것들도 추가해보려고 한다!

우선 아래 용어부터 짚고 넘어가자!

부모 요소 -> Flex Container(플렉스 컨테이너)
자식 요소 -> Flex Item(플렉스 아이템)

라고 칭하여 요약해보도록 하겠다

Flex Container에 설정할 수 있는 것들

  1. display:flex;
  2. flex-direction
    • default : row 방향
  3. flex-wrap
    • default : nowrap
  • 3-1. flex-flow: row wrap;
    • 위는 아래의 두 줄을 줄여 쓴 것과 동일함
      flex-direction: row;
      flex-wrap: wrap;
  1. justify-content (주축방향 정렬)
    • default :flex-start
  2. align-items
    • default : stretch
  • 5-1. align-content
    • flex-wrap: wrap;이 설정된 상태에서, 여러행을 수직축 방향으로 정렬

Flex Item에 설정할 수 있는 것들

기본적으로 display:flex 가 적용된 부모 컨테이너 안에 담긴 아이템들은

  1. 가로 방향으로 배치되고
  2. 자신이 가진 내용물의 width 만큼만 차지하게 됨 (like inline element) ⭐️
  3. height은 부모 컨테이너의 높이만큼 늘어남 ⭐️
  1. flex-basis

    • Flex 아이템의 기본 크기를 설정(flex-direction이 row일 때는 너비, column일 때는 높이).
    • default로는 해당 아이템의 width값을 사용 (해당 아이템의 width가 따로 설정되어있지 않으면 컨텐츠의 크기 그대로)
    • 여백의 비가 아닌, 영역 자체를 원하는 비율로 분할하기를 원한다면 flex-basis을 0으로 하면 처리가능 (기본 점유 크기를 0으로 만들어버리기)
  2. flex-grow

    • 아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성
    • default : 0 (따로 적용하기 전까지는 아이템이 flex-basis보다 더 늘어나지 않음)
    • 0보다 큰 값이 세팅이 되면 해당 아이템이 유연한(Flexible) 박스로 변하고 원래의 크기보다 커지며 빈 공간을 메우게 됨
    • flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 나누어 가진다!!
    /* 1:2:1의 비율로 세팅할 경우 */
    .item:nth-child(1) { flex-grow: 1; }
    .item:nth-child(2) { flex-grow: 2; }
    .item:nth-child(3) { flex-grow: 1; }

    • AAAAA,B,CCC 컨테이너가 원래 기본 컨텐츠크기였는데, flex-grow를 1:2:1 비율로 줌으로써, 나머지 여백을 1:2:1 만큼 채워서 나눠 가지게됨!!
  3. flex-shrink

    • 아이템이 flex-basis의 값보다 줄어들 수 있는지를 결정하는 속성
    • default : 1 (따로 세팅하지 않았어도 아이템이 flex-basis보다 더 작아질 수 있음)
    • flex-shrink를 0으로 세팅하면 아이템의 크기가 flex-basis보다 작아지지 않음
  4. flex ⭐️

    • flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 축약형 속성
    flex: 1;
      /* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
    flex: 1 1 auto;
      /* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
  5. align-self

    • default : stretch
    • align-items의 아이템버전, 부모가 시키는게 아니라 자기스스로 알아서 수직축방향 정렬함

space-around vs space-evenly

space-around
각 아이템들의 둘레에 균일한 간격을 만듬 (둘레 === around)

space-between
아이템들의 사이 + 양 끝에 균일한 간격을 만들어줌


참고링크

https://studiomeal.com/archives/197

profile
제대로 짚고 넘어가자!🧐

0개의 댓글