mordern CSS flexbox

강정우·2022년 12월 20일
2

HTML, CSS

목록 보기
19/27
post-thumbnail

수평정렬 방법과 flexbox

  • viewport나 요소 사이즈가 불명명확하거나, 동적으로 변할 때에도 요소를 적절히 배치할 수 있는 기능을 제공한다.
  • 부모 tag(flex container)에 display : flex를 주면 된다.

flex container에 설정 가능한 property

property 설명
display flex container 정의
flex-derection flex item들의 주 축(main-axis) 방향 설정
flex-wrap flex item들을 1행 또는 복수의 행으로 배치
flex-flow flex-direction과 flex-wrap을 한번에 설정(단축 property)
justify-content 주 축(main-axis) 기반 정렬 방법 설정
align-content 교차 축(cross-axis) 기반 정렬 방법 설정(2행 이상)
align-items 교차 축(cross-axis) 기반 정렬 방법 설정(각 행마다 적용)

display

  • flex : block 특성의 flex container 정의 (flex container간에 수직 정렬)
  • inline-flex : inline 특성의 flex container 정의 (flex container간에 수평 정렬)

flex-direction

  • row : 좌에서 우로 수평 정렬 (왼쪽 수평 정렬)
  • row-universe : 우에서 좌로 수평 정렬 (오른쪽 수평 정렬)
  • column : 위에서 아래로 수직 정렬
  • column-reverse : 아래에서 위로 수직 정렬

div 박스내의 텍스트의 가운데 정렬

  • 수평 가운데 정렬 : text-align : center;
  • 수직 가운데 정렬 : line-height : height에서 설정한 높이값을 동일하게 줌

flex-wrap

  • nowrap : flex item들을 개행하지 않고, 한 행에 배치
    • flex item들의 너비 합이 flex container 너비보다 큰 경우 flex item들이 넘쳐서, flex container밖에 표시될 수 있다. 이때 flex container에 overflow : auto; 설정을 넣어주면 넘치지 않고, flex container안에 스크롤이 생긴다.
  • wrap : flex item들 너비 합에 flex container 너비 보다 큰 경우, 복수의 행에 표시
  • wrap-reverse : flex item들이 너비 합이 flex container 너비보다 큰 경우, warp과 동일하게 복수의 행에 표시되지만 순서가 연방향이다.

flex-flow (단축 property)

  • flex-direction과 flex-wrap을 한번에 쓸수 있는 단축 property
flex-flow : flex-direction flex-wrap;

justify-content

  • main-axis 기반 수평 정렬 방법 설정
  • flex-start(default), flex-end
    center, space-between, space-around

align-items, align-content

  • align-items
    strech (default) : 교차축을 기반으로 아이템들을 늘려서 배치
    flex-start : 교차축을 시작점을 기반으로 아이템들의 원래 형태로 배치
    flex-end : 교차축을 끝점을 기반으로 아이템들의 원래 형태로 배치
    baseline : 문자를 기준으로 배치
    center
  • align-content :
    strech (default) : 교차축을 기반으로 아이템들을 늘려서 배치
    flex-start : 교차축을 시작점을 기반으로 아이템들의 원래 형태로 배치
    flex-end : 교차축을 끝점을 기반으로 아이템들의 원래 형태로 배치
    center : 교차축의 중심을 기반으로 아이템들을 배치
    space-between, space-around
  • flexbox 중앙정렬
justify-content : center;
align-content : center;

flex item에 설정 가능한 property

property 설명
order flex item 배치 순서 설정
flex-grow flex item 너비 증가 비율 설정
flex-shrink flex item 너비 축소 비율 설정
flex-basis flex item 기본 너비 설정(공간 분배 전)
flex (단축 property) flex-grow, flex-shrink, flex-basis를 한큐에 설정
align-self flex container의 align-self/align-content보다 우선하여, 개별 flex item 수직 정렬방법 설정
### order * default 값은 0, 임의로 숫자를 정할 수 있음(음수 가능) * order 값이 앚은 순서대로 배치됨

flex-grow

  • 해당 flex-item의 flex-grow값 / 전체 flex item의 flex-grow 총 합
  • 즉, 옆에있는 flex-item들의 비율에 맞춰 설정한다.

flex-shrink

  • grow와 반대 개념, 숫자가 클수록 작아진다.

flex-basis

  • 기본값은 auto이며, 강제로 지정할 수 있다.

flex (단축 property)

flex : flex-grow flex-shrink flex-basis;

align-self

  • align-content / align-items와 동일한 property값으로 수직 정렬 설정 가능
align-self : flex-start | flex-end | center | baseline | stretch

flex-box관련 알면 도움되는 사이트

profile
智(지)! 德(덕)! 體(체)!

0개의 댓글