CSS3 유연한 상자

CSS3 유연한 상자는 새로운 레이아웃 모드입니다.

가요 성 파우치 레이아웃 모델을 도입하는 목적은 공백의 컨테이너의 하위 요소 정렬 및 분배를 준비하는보다 효과적인 방법을 제공하는 것이다.

브라우저 지원

표의 수치 속성 버전 번호를 먼저 지원 브라우저를 나타낸다.

바로 수 -webkit- 브라우저 또는 -moz- 지정된 접두사 후.

CSS3 유연한 상자의 내용

탄성 용기 (플렉스 컨테이너) 및 탄성 하위 요소 (플렉스 항목) 구성 요소로 만들어진 유연한 상자.

디스플레이 속성을 설정하여 탄성 컨테이너는 플렉스 또는 인라인 플렉스는 탄성 컨테이너로 정의됩니다.

탄성 컨테이너는 하나 이상의 탄성 하위 요소가 포함되어 있습니다.

참고 : 탄성 외부 용기와 탄성 요소는 일반 렌더링의 자식입니다. 유연한 상자가 탄성 컨테이너의 레이아웃 내에서만 방법 탄력 자식 요소를 정의합니다.

유연한 하위 요소는 일반적으로 탄성 라인 상자에 표시됩니다. 기본적으로 각 컨테이너는 하나의 라인입니다.

다음은 자식 요소는 오른쪽으로, 한 줄에 표시 남아있는 탄성 요소를 보여줍니다

물론, 우리는 배열을 수정할 수 있습니다.

우리가 설정 한 경우 direction 에 등록 rtl (오른쪽에서 왼쪽), 탄성 하위 요소의 배치가 변경됩니다, 변경 페이지 레이아웃은 다음 :

플렉스 방향

flex-direction 순서는 부모 컨테이너의 탄성 하위 요소를 지정합니다.

문법

flex-direction: row | row-reverse | column | column-reverse

flex-direction 값은 다음과 같습니다

• 행 : 오른쪽 (왼쪽) 왼쪽 측면에서 기본 배열.
• 행 반대 : 측면 뒷줄, 상단의 마지막에서 앞으로 (오른쪽 정렬 정렬 리버스.
• 열 : 수직 배열.
• 마지막으로 상단에 행을 앞으로 뒷줄에서, 수직 배치를 반대하고 : 열 역.

다음은 예시 row-reverse 사용 :

다음은 설명 column 사용을 :

다음 예는 보여 column-reverse 사용 :

정당화 콘텐츠 속성

애플리케이션 컨테이너의 탄성 콘텐츠 얼라이먼트 (정당화 콘텐츠)를 탄성 신축 용기 아이템은 메인 축 (주축)을 따라 정렬.

다음과 같이 정당화 콘텐츠 구문은 다음과 같습니다

justify-content: flex-start | flex-end | center | space-between | space-around

각 값 분석 :

• 플렉스 시작 :
  

  충전 옆에있는 첫 번째 줄에 유연한 프로젝트. 이 값이 기본값입니다. 탄성 항목의 외부 가장자리에서 제 1 주 스타트 라인의 주요 시작 가장자리에 배치되고, 차례로 후속 플러시 탄성 기간을 날 렸습니다.

• 플렉스 엔드 :
  

  충전 옆 라인의 마지막에 유연한 프로젝트. 탄성 스레드 외부로부터 제 1 주 엔드 항목 선의 주 단부 가장자리에 배치되고, 차례로 연속 플러시 탄성 기간을 두었다.

• 센터 :
  

  유연한 프로젝트는 채우기 옆에 중심. (나머지 여유 공간이 부정적인 경우, 프로젝트는 양 방향으로 탄성을 오버플로).

• 공간 사이 :
  

  유연한 프로젝트는 균등 행에 분산. 공간은 부정적이거나 단지 탄성 용어, 플렉스 - 시작의 가치와 동일합니다. 그렇지 않다면, 첫 번째 행과 탄성 부품 정렬의 외부 가장자리 주 시작 주 끝선 탄성 라인의 최근 탄성 용어 배향되고 나머지 항목 분포 사이드 마진에 인접하면서 동일 항목을 간격.

• 공간 주위 :
  

  flexible 프로젝트 균등 공간의 좌측 절반의 양쪽 라인에 분포. 공간 또는 마이너스 만 탄성 용어되면, 값은 중심에 상당한다. 양쪽 탄성 용기의 헤드와 꼬리 사이의 간격의 절반 (1/2 * 20 픽셀 = 10px) 남기고 그렇지 분배 라인을 따라 프로젝트의 탄력성과 동등 (예를 들어 20 픽셀이다) 서로 이격.

렌더링은 보여

다음은 보여 flex-end 사용 :

다음 예는 보여줍니다 center 의 사용 :

다음 예는 보여 space-between 의 사용 :

다음 예는 보여 space-around 사용합니다 :

정렬-항목 속성

align-items 세트 또는 상자 축 (수직축)의 배향 방향의 측면에 탄성 요소를 검색한다.

문법

align-items: flex-start | flex-end | center | baseline | stretch

각 값 분석 :

• 플렉스 시작 : 시작 라인 경계의 라이브 측 축선의 시작 위치에 대한 상자 부재의 탄성 축 (수직축)의 경계 측면.
• 플렉스 엔드 : 라인 경계의 측면 샤프트 끝을 살기 시작 위치에 대한 상자 요소 축 (세로축)의 탄성 경계 쪽.
• 센터 :상의 라인 측 축 (수직축)의 중간에 위치 된 탄성 요소를 상자. (크기가 상자 부재의 탄성 라인의 크기보다 작은 경우, 양방향 오버플 동일한 길이이다).
• 기준 : 탄성 내부 샤프트와 측면 축선 같은 상자 요소 '플렉스 시작'등가의 동일한 값이다. 다른 경우에, 값은 초기 배향에 관련된다.
• 스트레칭 : 여백 상자 속성의 크기는 그 값이 크기 광고 항목 가까이되지만, "최소 / 최대 너비 / 높이 '속성을 따를 샤프트 측의 크기가'자동 '인 지정하면 제한.

다음의 예를 보여줍니다 stretch(默认值) 의 사용을 :

다음은 보여 flex-start 사용 :

다음은 보여 flex-end 사용 :

다음 예는 보여줍니다 center 의 사용 :

다음 예는 보여줍니다 baseline 사용 :

플렉스 랩 속성

플렉스 랩 속성은 탄성 상자 자식 요소 랩 모드를 지정하는 데 사용됩니다.

문법

flex-flow:  || 

각 값 분석 :

• 파라미터 nowrap - 기본적으로 하나의 라인으로 탄성 컨테이너입니다.이 경우 탄력 아이가 컨테이너를 오버플로 할 수 있습니다.
• 포장 - 탄성 컨테이너에 여러 줄을.탄성 아이의 오버 플로우 부분은 새로운 라인이 경우에 위치를 내부 줄 바꿈이 하위 키를 발생
• 랩 역 - 랩 순서를 반대로.

다음 예는 보여줍니다 nowrap 사용 :

다음 예는 보여줍니다 wrap 사용을 :

다음의 예는 보여줍니다 wrap-reverse 사용 :

정렬 콘텐츠 속성

align-content 속성은 수정하는 데 사용됩니다 flex-wrap 속성 동작을. 유사 align-items 하지만, 탄성 하위 요소의 배향을 설정하지만, 각 행의 배향을 설정하지 않는다.

문법

align-content: flex-start | flex-end | center | space-between | space-around | stretch

각 값 분석 :

• stretch - 기본. 각 행은 남은 공간을 차지하기 위해 스트레칭합니다.
• flex-start - 누적 된 상자의 행을 탄성 컨테이너의 시작 위치로.
• flex-end - 누적 된 상자의 행을 탄성 컨테이너의 마지막 위치로.
• center - 탄성 컨테이너의 중간 위치에 쌓인 상자의 행.
• space-between - 유연한 파우치 용기의 각 행은 고르게 분포.
• space-around -가요 성 파우치 용기의 각 행은 동일 서브 - 소자 크기 간격 하위 요소의 절반을 유지하도록 양단 사이에 분포.

다음 예는 보여줍니다 center 의 사용 :

유연한 하위 요소의 특성

순서

문법

order: 

각 값 분석 :

• <정수>의 순서를 정의하는 데 사용되는 정수 값있는 상면의 작은 값. 그것은 음수가 될 수 있습니다.

order 탄성 컨테이너 하위 요소의 탄성 내에서 속성을 설정할 수 :

정렬

설정 "여유"인 "자동"값을 자동으로 나머지 공간에 탄성 용기를 얻을 수 있습니다. 그래서 "AUTO"의 수직 마진 값을 설정, 상기 탄성 부 요소가 완전 탄성 용기의 2 축 방향에 집중되어 있습니다.

다음 예는 제 1 서브 탄성 요소 집합에있는 margin-right: auto; . 나머지 공간은 오른쪽 요소에 배치됩니다 :

완벽한 센터

다음의 예는 우리가 일반적으로 센터를 발생하는 문제에 대한 완벽한 솔루션이 될 것입니다.

탄성 박스, 센터는 바로 설정할 매우 간단하게 margin: auto; 이 완벽하게 중심에 축 방향으로 탄성 하위 요소를 만들 수 있습니다 :

정렬 - 자기

align-self 특성은 축 (수직축)의 측면에 탄성체 자체의 배향 방향을 설정하는데 사용된다.

문법

align-self: auto | flex-start | flex-end | center | baseline | stretch

각 값 분석 :

• 자동 : 그것은 부모의 '스트레치'의 계산 된 값이없는 경우 '정렬 - 자신을'값 '자동', 요소의 부모 요소의 계산 된 값이 값 '- 항목 정렬'을합니다.
• 플렉스 시작 : 시작 라인 경계의 라이브 측 축선의 시작 위치에 대한 상자 부재의 탄성 축 (수직축)의 경계 측면.
• 플렉스 엔드 : 라인 경계의 측면 샤프트 끝을 살기 시작 위치에 대한 상자 요소 축 (세로축)의 탄성 경계 쪽.
• 센터 :상의 라인 측 축 (수직축)의 중간에 위치 된 탄성 요소를 상자. (크기가 상자 부재의 탄성 라인의 크기보다 작은 경우, 양방향 오버플 동일한 길이이다).
• 기준 : 탄성 내부 샤프트와 측면 축선 같은 상자 요소 '플렉스 시작'등가의 동일한 값이다. 다른 경우에, 값은 초기 배향에 관련된다.
• 스트레칭 : 여백 상자 속성의 크기는 그 값이 크기 광고 항목 가까이되지만, "최소 / 최대 너비 / 높이 '속성을 따를 샤프트 측의 크기가'자동 '인 지정하면 제한.

다음의 예는 탄성 하위 요소가 정렬 - 자기 서로 다른 값의 적용 효과를 보여줍니다

굽힘

flex 속성은 탄성 하위 요소에 대한 공간을 할당하는 방법을 지정하는 데 사용됩니다.

문법

flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

각 값 분석 :

• 없음 : 없음 계산의 키워드 : 0 0 자동차
• [플렉스 - 성장] 변형체 박스 팽창비 정의.
• [플렉스 수축] 변형체 상자 수축률의 정의.
• [플렉스 기준] : 기본 기준값 박스의 탄성 요소를 정의한다.

다음 예는, 제 1 서브 탄성 요소는 공간의 2/4 다른 두 각 1/4 공간 점유 :

더 많은 예제

탄성 상자를 사용하여 응답 페이지 만들기

CSS3 유연한 상자 속성

다음 표는 일반적으로 탄성 속성 상자에 사용되는 :