CSS Keywords

{object_name}

CSS Flexible Box Layout Modlue

  • Flex

    • auto

      flex-grow 값은 1, flex-shrink 값은 1, flex-basis 값은 auto로 지정된다.

    • none

      flex-grow 값은 0, flex-shrink 값은 0, flex-basis 값은 auto로 지정된다.

  • Flex Basis

    • auto

      자신의 width와 height 속성 값을 사용한다.

    • content

      콘텐츠의 크기에 따라 자동으로 계산한다.

  • Flex Direction

    • column

      플렉스 컨테이너의 주축은 현재 writing-mode의 블록축과 같은 방향이다. main-start 및 main-end 방향은 각각 현재 writing-mode의 블록 시작 및 블록 종료 방향과 동일하다.

    • column-reverse

      column과 동일하나 main-start와 main-end 방향이 바뀐다.

    • row

      플렉스 컨테이너의 주축은 현재 writing-mode의 인라인 축과 같은 방향이다.

    • row-reverse

      row와 동일하나 main-start와 main-end가 바뀐다.

  • Flex Wrap

    • nowrap

      플렉스 레이아웃 항목들이 한 줄로 나열된다.

    • wrap

      플렉스 레이아웃 항목들을 필요하다면 여러 줄에 걸처 나열한다.

    • wrap-reverse

      wrap과 동일하나 순서가 역순으로 나열된다.

©2024 devdic.com, Korea

출처를 밝힌 리소스 이외의 본 레퍼런스에 사용된 모든 생성물의 소유 및 저작권은 devdic.com에 있습니다. 특별히 재배포를 금지한 것 이외는 재배포가 가능하며 반드시 출처를 표기해 주시기 바랍니다.
현재는 베타 버전으로 미등록 및 불완전한 콘텐츠가 일부 있을 수 있습니다. 오류 및 기술 자료 제보(건의)는 언제든지 환영하며 감사드립니다.
기본적으로 W3C 기술 사양을 기준으로 작성하였으며 일반적이지 않은 기술 설명에 대한 내용의 일부는 Mozilla의 MDN web docs에서 도움 받았음을 밝힙니다. 그들을 존경합니다.

master@cydemy.com