CSS 가변 상자 레이아웃

CSS Flexible Box Layout
플렉스박스
CSS 가변 상자 레이아웃
약어플렉스박스
네이티브 이름
CSS 가변 상자 레이아웃
상태후보 추천(CR)
년도시작2009년 7월 23일(2009-07-23)[1]
최신 버전레벨[2] 1
2018년 11월 9일 (2018-11-09)[2]
미리보기 버전워킹 드래프트
2021년 3월 25일 (2021-03-25)[3]
조직
위원회CSS 작업 그룹[2]
편집자
  • 탭 앳킨스 주니어
  • 엘리카 J. 에테마드
  • 로센 아타나소프
이전 편집자
    • 알렉스 모길렙스키
    • L. 데이비드 배런
    • 닐 디킨
    • 이언 힉슨
    • 데이비드 하얏트
[2]
기준 표준CSS
웹사이트www.w3.org/TR/css-flexbox-1/

일반적으로 Flexbox로 알려진 CSS Flexible Box Layout은 CSS 3 웹 레이아웃 모델이다.[2][4] W3C의 후보 추천(CR) 단계에 있다.[2] 유연한 레이아웃은 용기 내의 반응 요소가 화면 크기(또는 장치)에 따라 자동으로 배열되도록 한다.

계단식 스타일 시트
개념
철학
도구들
비교

개념

대부분의 웹 페이지는 HTML(Hypertext Markup Language)과 CSS(Cascading Style Sheets)의 조합으로 작성된다. 간단히 말해서, HTML은 페이지의 내용과 논리적 구조를 지정하는 반면, CSS는 페이지의 색상, 글꼴, 서식, 레이아웃, 스타일링 등 페이지의 모양을 지정한다.

CSS flex-box 레이아웃은 HTML 페이지의 레이아웃을 지정하는 특별한 방법이다.

플렉스 레이아웃의 가장 결정적인 특징 중 하나는 뷰 환경을 기반으로 폼핏 기능을 한다는 것이다. 플렉스 박스는 크기를 조정할 수 있다. 즉, 감소하거나, 불필요하게 공간을 독점하지 않도록 하거나, 콘텐츠가 그 경계 내에서 제약될 수 있는 공간을 만들기 위해 증가할 수 있다. 더욱이 플렉시블 레이아웃은 일반적으로 단방향인 블록 및 인라인 디스플레이 형식에 비해 콘텐츠 흐름 측면에서 제약이 적다. 유연한 방향 흐름은 오른쪽, 왼쪽, 위쪽 또는 아래쪽으로 지정할 수 있다. 플렉스 용기 내의 개별 품목도 사용 가능한 배치 공간에 맞게 자동으로 순서를 변경하고 재배열할 수 있다.[3]

역사

2000년대에 모바일 에이전트에 의한 웹의 집중적인 사용은 "액정 레이아웃"과 증가하는 화면 크기에 대한 반응 요소들을 자극했다.[5] 2010년대에 부트스트랩과 같은 인기 있는 자바스크립트 레이아웃 프레임워크의 집중적인 사용은 CSS 플렉스 박스와 그리드 레이아웃 사양에 영감을 주었다.[6]

CSS 3 모듈에는 플렉스박스와 그리드[2] 같은 이와 유사한 솔루션이 포함되었다.[7]

2020년 9월 현재 설치된 브라우저 중 98.69%(데스크탑 브라우저 99.29%·모바일 브라우저 100%)가 CSS 플렉시블 박스 레이아웃을 지원한다.[8]

용어.

다음 항은 플렉스박스 레이아웃 모델과 연관되어 있다.

플렉스 용기
모든 유연한 항목을 포함하는 상위 요소. CSS 디스플레이 속성을 사용하여 컨테이너를 플렉스 또는 인라인 플렉스로 정의할 수 있다.
플렉스 아이템
플렉시블 컨테이너 안에 있는 모든 직접 하위 요소는 플렉시블 항목으로 간주된다. 컨테이너 요소 내의 모든 텍스트는 알 수 없는 플렉스 항목으로 포장된다.
축
각 플렉스 박스에는 메인 축과 크로스 축의 두 축이 들어 있다. 주축은 항목들이 서로 정렬하는 축이다. 가로축은 주축에 수직이다.
플렉시
주축을 설정한다. 가능한 인수: 행(기본값), 행-역행, 열, 열-역행.
정당성-내용
내용을 현재 줄의 주 축에 배치하는 방법을 결정한다. 선택적 인수: 왼쪽, 오른쪽, 가운데, 간격, 둘레.
맞춤 항목
플렉스 항목이 각 선의 횡단 축에 배치되는 방법에 대한 기본값을 결정한다.
정렬-내용
횡단 축 선이 정렬되는 방식에 대한 기본값을 결정한다.
정렬 자체
단일 항목이 크로스 축을 따라 배치되는 방식을 결정한다. 이것은 맞춤 항목으로 설정된 모든 기본값을 재정의한다.

방향.

크로스 스타트
십자형의
크로스 스타트/크로스엔드 측면은 플렉스 라인이 크로스 스타트부터 크로스엔드까지 플렉스 품목으로 채워지는 지점을 결정한다.
주동자
메인엔드
메인-스타트/메인-엔드 측면은 메인-엔드에서 시작하여 메인-엔드까지 플렉시블 용기 내에 플렉시블 항목을 배치하기 시작할 위치를 결정한다.
주문
요소를 그룹으로 배치하고 용기 내에 배치할 순서를 결정한다.
플렉스 플로우
플렉시블 콘텐츠를 배치하기 위해 플렉시블 방향 및 플렉시블 와프를 속기하십시오.

줄들

줄들
플렉스 품목은 플렉스-랩 속성에 의해 정의된 대로 단일 선이나 여러 선에 배치할 수 있으며, 이는 크로스 축의 방향과 용기 내에 선이 쌓이는 방식을 모두 제어한다.

치수

메인 사이즈
크로스 사이즈
메인 사이즈와 크로스 사이즈는 각각 메인 축과 크로스 축을 다루는 플렉스 용기의 높이와 폭이다.

사용법

요소를 플렉시블 요소로 지정하려면 다음과 같이 요소의 CSS 디스플레이 속성을 플렉시블 또는 인라인 플렉시블 중 하나로 설정해야 한다. 

전시하다: 굴곡이 지다;

또는: 

전시하다: 인라인 플렉시블;

디스플레이를 위의 두 값 중 하나로 설정하면 요소가 플렉스 용기가 되고 그 하위 항목이 플렉스 컨테이너가 된다. 디스플레이를 플렉스로 설정하면 용기가 블록 레벨 요소가 되는 반면 디스플레이를 인라인 플렉스로 설정하면 용기가 인라인 레벨 요소가 된다.[4]

가운데 맞춤

플렉시블 박스의 장점 중 하나는 용기 내의 항목을 페이지 중앙에 수직 및 수평으로 쉽게 정렬할 수 있다는 점이다.

전시하다: 굴곡이 지다; 얼라인먼트: 중심; 정당성-내용성: 중심;

참조

  1. ^ "CSS Flexible Box Layout Module Level 1 Publication History - W3C". W3C. n.d. Retrieved 2021-04-08.
  2. ^ a b c d e f g Atkins Jr., Tab; Etemad, Elika J.; Atanassov, Rossen; Mogilevsky, Alex; Baron, L. David; Deakin, Neil; Hickson, Ian; Hyatt, David, eds. (2018-11-09). "CSS Flexible Box Layout Module Level 1". W3C. Retrieved 2021-04-08.
  3. ^ a b Atkins Jr, Tab; Etemad, Elika J.; Atanassov, Rossen; Mogilevsky, Alex; Baron, L. David; Deakin, Neil; Hickson, Ian; Hyatt, David, eds. (2021-03-25). "CSS Flexible Box Layout Module Level 1". CSS Working Group Editor Drafts. Retrieved 2021-04-08.
  4. ^ a b "Basic concepts of flexbox". MDN Web Docs. n.d. Retrieved 2021-04-08.
  5. ^ Bail, Jeff (2012-10-23). "Use CSS media queries to create responsive websites". IBM Developer. Archived from the original on 2020-10-13. Retrieved 2021-04-08.
  6. ^ Shepherd, Richard (2011-09-19). "CSS3 Flexible Box Layout: Everything I Wish I Knew When I Started". Smashing Magazine. Retrieved 2021-04-08.
  7. ^ Atkins Jr., Tab; Etemad, Elika J.; Atanassov, Rossen; Brufau, Oriol; Mogilevsky, Alex; Cupp, Phil, eds. (2020-12-18). "CSS Grid Layout Module Level 1". W3C. CSS Working Group. Retrieved 2021-04-08.
  8. ^ "CSS Flexible Box Layout Module". Can I use. Retrieved 2020-09-03.