티스토리 뷰

CSS

[CSS] 플렉스 레이아웃

플렉스 레이아웃

다양한 디바이스에 따라 다양한 레이아웃의 유형을 배웁니다.


플렉스 레이아웃

flexbox는 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식입니다. flexbox의 장점을 한 마디로 표현하면 '복잡한 계산 없이 요소의 크기와 순서를 유연하게 배치할 수 있다'라고 할 수 있다. 정렬, 방향, 순서, 크기 등을 유연하게 조절할 수 있기 때문에 별도의 분기 처리를 줄일 수 있고, CSS만으로 다양한 레이아웃을 구현할 수 있습니다.

flexbox는 복수의 자식 요소인 flex item과 그 상위 부모 요소인 flex container로 구성됩니다.

부모 요소와 자식 요소에 정의하는 속성 구분

flexbox에서 사용하는 속성은 부모 요소인 flex container에 정의하는 속성과 자식 요소인 flex item에 정의하는 속성으로 나누어집니다.. 전체적인 정렬이나 흐름에 관련된 속성은 flex container에 정의하고, 자식 요소의 크기나 순서에 관련된 속성은 flex item에 정의합니다. 이를 분리해 적용하는 것이 중요합니다.

  • flex container 속성: flex-direction, flex-wrap, justify-content, align-items, align-content
  • flex item 속성: flex, flex-grow, flex-shrink, flex-basis, order

flexbox 지원 범위

flexbox는 Internet Explorer 10 이상이 지원합니다. 하지만 Internet Explorer 10 이상이 완전히 지원하지는 않아 Internet Explorer 10과 Internet Explorer 11에서 버그가 발견되기도 합니다. 그래서 PC용 서비스에 flexbox를 적용하기에는 아직 이른 감이 있으며, 만약 Internet Explorer를 지원하지 않는 서비스를 운영한다면 flexbox를 적용해 봐도 좋습니다.

flex 속성
속성 설명
align-content align-content 속성은 콘텐츠의 상하관계 정렬 상태를 정의합니다.
align-items align-items 속성은 콘텐츠 내부의 정렬 상태를 정의합니다.
align-self align-self 속성은 콘텐츠의 정렬 상태를 정의합니다.
flex flex 속성은 콘텐츠의 성질을 flex로 정의합니다.
flex-basis flex-basis 속성은 요소의 기본 단위를 정의합니다.
flex-direction flex-direction 속성은 요소의 정렬 방향을 정의합니다.
flex-flow flex-flow 속성은 요소의 정렬 방향과 줄 속성을 설정합니다.
flex-grow flex-grow 속성은 요소의 크기를 숫자를 통해 정의합니다.
flex-shrink flex-shrink 속성은 요소의 크기를 숫자를 통해 줄여줍니다.
flex-wrap flex-wrap 속성은 요소의 줄 속성을 설정합니다.
justify-content justify-content 속성은 콘텐츠의 좌우 관계 정렬 상태를 정의합니다.
order order 속성은 flex 콘텐츠의 순서를 정의합니다.

공유하기(Share) 더보기

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기

공감하기(Like) 더보기

UP NEXT : Ads by Google

질문하기(Questions)
댓글쓰기 폼