image

display : flex 정리

태그
Css
상세설명display : flex 정리
작성일자2023.11.05

레이아웃을 구성할 때 자주 사용한 flex에 대해 정리하고자 한다.

flexbox는 grid와 다르게 1차원 레이아웃으로 레이아웃을 다룰 때 한 번에 하나의 차원(행이나 열)만을 다룬다.

display : flex

display : flex 를 적용하면 일렬로 아이템들이 배치된다.

flex-direction

flex-direction으로 배치 방향을 변경 할 수 있다.

  • row : 가로 방향 정렬
  • row-reverse : 가로 방향 반대 순으로 정렬
  • column : 세로 방향 정렬
  • column-reverse : 세로 방향 반대 순으로 정렬

    • flex-wrap

    자식 아이템들이 부모 컨테이너 영역 보다 많을 경우 flex-wrap: wrap 을 적용하면 자동 줄 바꿈을 해준다. ( 기본 값 : flex-wrap: nowrap )

    justify-content : 수평 방향 정렬

    수평 방향으로 정렬해주는 CSS

  • flex-start : 축의 시작 부분에 정렬 ( 기본 값 )
  • flex-end : 축의 끝 부분에 정렬
  • center : 항목들을 축의 중심 부분에 정렬 ( 중앙 정렬 )
  • space-between : 항목들을 고르게 정렬 양 끝에 첫 번째, 마지막 항목이 붙음
  • space-around : 항목들을 고르게 정렬 각 항목들은 양쪽 여백의 절반만큼 나누어 갖음
  • space-evenly : 항목들을 고르게 정렬 각 항목들은 동일한 여백을 갖음

    • align-items : 수직 방향 정렬

    수직 방향으로 정렬해주는 CSS

  • stretch : Container를 채우기 위해 수직 방향으로 늘림 ( 기본 값 )
  • flex-start : 수직 방향에 위쪽 정렬
  • flex-end : 수직 방향에 아래쪽 정
  • center : 수직 방향 가운데 정렬

    • 중앙 정렬

    justify-content:center; & align-items: center; 적용하면 중앙에 위치 시킬 수 있다.

    flex ( flex-grow, flex-shrink, flex-basis )

    flex는 flex-grow, flex-shrink, flex-basis의 단축 속성이다.

  • flex-grow : 부모 요소 내부에서 할당 가능한 Item의 너비 비율을 설정
  • flex-shrink : 부모 요소보다 클 때 사용되며 부모 요소 내부에서 Item의 크기가 축소됨
  • (flex-shrink를 0으로 설정하면 아이템의 크기가 width값 보다 작아지지 않음)
  • flex-basis : Item의 초기 크기 지정

    • order

    item 순서 지정 해준다. 숫자가 작을 수록 앞 순서이다. ( ‘ - ‘ 도 가능)

    order: 0; 0 부분에 숫자 입력하면 됨

    align-self

    전체 item이 아닌 특정 items만 정렬 방법을 바꾸고 싶을 때 사용하여 align-items 보다 우선순위이다

  • auto : align-items 속성 상속 ( 기본 값 )
  • stretch : Container를 채우기 위해 수직 방향으로 늘림 ( 기본 값 )
  • flex-start : 수직 방향에 위쪽 정렬
  • flex-end : 수직 방향에 아래쪽 정
  • center : 수직 방향 가운데 정렬

    • 참고

    https://developer.mozilla.org/en-US/docs/Web/CSS/flex

    이전 포스트

    apexcharts

    다음 포스트

    문자열자르기