CSS3 유연한 상자
CSS3 유연한 상자는 새로운 레이아웃 모드입니다.
CSS3 유연한 상자 페이지 요소가 적절한 행동 레이아웃을 확인해야 할 때 화면 크기와 장치 유형 다른에 적응하는 것이 필요하다 (유연한 상자 또는 인 flexbox).가요 성 파우치 레이아웃 모델을 도입하는 목적은 공백의 컨테이너의 하위 요소 정렬 및 분배를 준비하는보다 효과적인 방법을 제공하는 것이다.
브라우저 지원
표의 수치 속성 버전 번호를 먼저 지원 브라우저를 나타낸다.
바로 수 -webkit- 브라우저 또는 -moz- 지정된 접두사 후.
재산 | |||||
---|---|---|---|---|---|
기본 지원 (한 줄 인 flexbox) | 29.0 21.0 -webkit- | 11.0 | 22.0 18.0 -moz- | 6.1 -webkit- | 12.1 -webkit- |
멀티 라인 인 flexbox | 29.0 21.0 -webkit- | 11.0 | 28.0 | 6.1 -webkit- | 17.0 15.0 -webkit- 12.1 |
CSS3 유연한 상자의 내용
탄성 용기 (플렉스 컨테이너) 및 탄성 하위 요소 (플렉스 항목) 구성 요소로 만들어진 유연한 상자.
디스플레이 속성을 설정하여 탄성 컨테이너는 플렉스 또는 인라인 플렉스는 탄성 컨테이너로 정의됩니다.
탄성 컨테이너는 하나 이상의 탄성 하위 요소가 포함되어 있습니다.
참고 : 탄성 외부 용기와 탄성 요소는 일반 렌더링의 자식입니다. 유연한 상자가 탄성 컨테이너의 레이아웃 내에서만 방법 탄력 자식 요소를 정의합니다.
유연한 하위 요소는 일반적으로 탄성 라인 상자에 표시됩니다. 기본적으로 각 컨테이너는 하나의 라인입니다.
다음은 자식 요소는 오른쪽으로, 한 줄에 표시 남아있는 탄성 요소를 보여줍니다
예
<HTML>
<헤드>
<스타일>
.flex 컨테이너 {
디스플레이 : -webkit-플렉스;
디스플레이 : 플렉스;
폭 : 400 픽셀;
높이 : 250 픽셀;
배경 색상 : lightgrey;
}
.flex 항목 {
배경 색상 : cornflowerblue;
폭 : 100 픽셀;
높이 : 100 픽셀;
여백 : 10px;
}
</ 스타일>
</ 헤드>
<바디>
<사업부 클래스 = "플렉스 용기">
<사업부 클래스 = "플렉스 항목"> 플렉스 항목 1 </ DIV>
<사업부 클래스 = "플렉스 항목"> 플렉스 항목이 </ DIV>
<사업부 클래스 = "플렉스 항목"> 플렉스 항목 3 </ DIV>
</ DIV>
</ BODY>
</ HTML>
»시도
물론, 우리는 배열을 수정할 수 있습니다.
우리가 설정 한 경우 direction
에 등록 rtl
(오른쪽에서 왼쪽), 탄성 하위 요소의 배치가 변경됩니다, 변경 페이지 레이아웃은 다음 :
예
방향 : RTL;
}
.flex 컨테이너 {
디스플레이 : -webkit-플렉스;
디스플레이 : 플렉스;
폭 : 400 픽셀;
높이 : 250 픽셀;
배경 색상 : lightgrey;
}
.flex 항목 {
배경 색상 : cornflowerblue;
폭 : 100 픽셀;
높이 : 100 픽셀;
여백 : 10px;
}
»시도
플렉스 방향
flex-direction
순서는 부모 컨테이너의 탄성 하위 요소를 지정합니다.
문법
flex-direction: row | row-reverse | column | column-reverse
flex-direction
값은 다음과 같습니다
- 행 : 오른쪽 (왼쪽) 왼쪽 측면에서 기본 배열.
- 행 반대 : 측면 뒷줄, 상단의 마지막에서 앞으로 (오른쪽 정렬 정렬 리버스.
- 열 : 수직 배열.
- 마지막으로 상단에 행을 앞으로 뒷줄에서, 수직 배치를 반대하고 : 열 역.
다음은 예시 row-reverse
사용 :
예
디스플레이 : -webkit-플렉스;
디스플레이 : 플렉스;
-webkit-플렉스 방향 : 행 - 역방향
플렉스 방향 : 행 역;
폭 : 400 픽셀;
높이 : 250 픽셀;
배경 색상 : lightgrey;
}
다음은 설명 column
사용을 :
예
디스플레이 : -webkit-플렉스;
디스플레이 : 플렉스;
-webkit-플렉스 방향 : 열;
플렉스 방향 : 열;
폭 : 400 픽셀;
높이 : 250 픽셀;
배경 색상 : lightgrey;
}
»시도
다음 예는 보여 column-reverse
사용 :
예
디스플레이 : -webkit-플렉스;
디스플레이 : 플렉스;
-webkit-플렉스 방향 : 열이-역;
플렉스 방향 : 열 역;
폭 : 400 픽셀;
높이 : 250 픽셀;
배경 색상 : lightgrey;
}
»시도
정당화 콘텐츠 속성
애플리케이션 컨테이너의 탄성 콘텐츠 얼라이먼트 (정당화 콘텐츠)를 탄성 신축 용기 아이템은 메인 축 (주축)을 따라 정렬.
다음과 같이 정당화 콘텐츠 구문은 다음과 같습니다
justify-content: flex-start | flex-end | center | space-between | space-around
각 값 분석 :
- 플렉스 시작 :
충전 옆에있는 첫 번째 줄에 유연한 프로젝트. 이 값이 기본값입니다. 탄성 항목의 외부 가장자리에서 제 1 주 스타트 라인의 주요 시작 가장자리에 배치되고, 차례로 후속 플러시 탄성 기간을 날 렸습니다.
- 플렉스 엔드 :
충전 옆 라인의 마지막에 유연한 프로젝트. 탄성 스레드 외부로부터 제 1 주 엔드 항목 선의 주 단부 가장자리에 배치되고, 차례로 연속 플러시 탄성 기간을 두었다.
- 센터 :
유연한 프로젝트는 채우기 옆에 중심. (나머지 여유 공간이 부정적인 경우, 프로젝트는 양 방향으로 탄성을 오버플로).
- 공간 사이 :
유연한 프로젝트는 균등 행에 분산. 공간은 부정적이거나 단지 탄성 용어, 플렉스 - 시작의 가치와 동일합니다. 그렇지 않다면, 첫 번째 행과 탄성 부품 정렬의 외부 가장자리 주 시작 주 끝선 탄성 라인의 최근 탄성 용어 배향되고 나머지 항목 분포 사이드 마진에 인접하면서 동일 항목을 간격.
- 공간 주위 :
flexible 프로젝트 균등 공간의 좌측 절반의 양쪽 라인에 분포. 공간 또는 마이너스 만 탄성 용어되면, 값은 중심에 상당한다. 양쪽 탄성 용기의 헤드와 꼬리 사이의 간격의 절반 (1/2 * 20 픽셀 = 10px) 남기고 그렇지 분배 라인을 따라 프로젝트의 탄력성과 동등 (예를 들어 20 픽셀이다) 서로 이격.
렌더링은 보여
다음은 보여 flex-end
사용 :
예
디스플레이 : -webkit-플렉스;
디스플레이 : 플렉스;
-webkit-정당화 - 내용 : 엔드 플렉스;
정당화-콘텐츠 : 플렉스 엔드;
폭 : 400 픽셀;
높이 : 250 픽셀;
배경 색상 : lightgrey;
}
»시도
다음 예는 보여줍니다 center
의 사용 :
예
디스플레이 : -webkit-플렉스;
디스플레이 : 플렉스;
-webkit-정당화-내용 : 센터;
정당화-내용 : 센터;
폭 : 400 픽셀;
높이 : 250 픽셀;
배경 색상 : lightgrey;
}
»시도
다음 예는 보여 space-between
의 사용 :
예
디스플레이 : -webkit-플렉스;
디스플레이 : 플렉스;
-webkit-정당화-내용 : 공간 사이를;
정당화-내용 : 공간 사이를;
폭 : 400 픽셀;
높이 : 250 픽셀;
배경 색상 : lightgrey;
}
»시도
다음 예는 보여 space-around
사용합니다 :
예
디스플레이 : -webkit-플렉스;
디스플레이 : 플렉스;
-webkit-정당화-내용 : 공간의 주위에;
정당화-내용 : 공간의 주위에;
폭 : 400 픽셀;
높이 : 250 픽셀;
배경 색상 : lightgrey;
}
»시도
정렬-항목 속성
align-items
세트 또는 상자 축 (수직축)의 배향 방향의 측면에 탄성 요소를 검색한다.
문법
align-items: flex-start | flex-end | center | baseline | stretch
각 값 분석 :
- 플렉스 시작 : 시작 라인 경계의 라이브 측 축선의 시작 위치에 대한 상자 부재의 탄성 축 (수직축)의 경계 측면.
- 플렉스 엔드 : 라인 경계의 측면 샤프트 끝을 살기 시작 위치에 대한 상자 요소 축 (세로축)의 탄성 경계 쪽.
- 센터 :상의 라인 측 축 (수직축)의 중간에 위치 된 탄성 요소를 상자. (크기가 상자 부재의 탄성 라인의 크기보다 작은 경우, 양방향 오버플 동일한 길이이다).
- 기준 : 탄성 내부 샤프트와 측면 축선 같은 상자 요소 '플렉스 시작'등가의 동일한 값이다. 다른 경우에, 값은 초기 배향에 관련된다.
- 스트레칭 : 여백 상자 속성의 크기는 그 값이 크기 광고 항목 가까이되지만, "최소 / 최대 너비 / 높이 '속성을 따를 샤프트 측의 크기가'자동 '인 지정하면 제한.
다음의 예를 보여줍니다 stretch(默认值)
의 사용을 :
예
디스플레이 : -webkit-플렉스;
디스플레이 : 플렉스;
-webkit-정렬 - 항목 : 스트레칭;
정렬 - 항목 : 스트레칭;
폭 : 400 픽셀;
높이 : 250 픽셀;
배경 색상 : lightgrey;
}
»시도
다음은 보여 flex-start
사용 :
예
디스플레이 : -webkit-플렉스;
디스플레이 : 플렉스;
-webkit-정렬 - 항목 : 플렉스 - 시작;
정렬 - 항목 : 플렉스 시작;
폭 : 400 픽셀;
높이 : 250 픽셀;
배경 색상 : lightgrey;
}
»시도
다음은 보여 flex-end
사용 :
예
디스플레이 : -webkit-플렉스;
디스플레이 : 플렉스;
-webkit-정렬 - 항목 : 플렉스 엔드;
정렬 - 항목 : 플렉스 엔드;
폭 : 400 픽셀;
높이 : 250 픽셀;
배경 색상 : lightgrey;
}
»시도
다음 예는 보여줍니다 center
의 사용 :
예
디스플레이 : -webkit-플렉스;
디스플레이 : 플렉스;
-webkit-정렬 - 항목 : 센터;
정렬 - 항목 : 센터;
폭 : 400 픽셀;
높이 : 250 픽셀;
배경 색상 : lightgrey;
}
»시도
다음 예는 보여줍니다 baseline
사용 :
예
디스플레이 : -webkit-플렉스;
디스플레이 : 플렉스;
-webkit-정렬 - 항목 : 기준;
정렬 - 항목 : 기준을;
폭 : 400 픽셀;
높이 : 250 픽셀;
배경 색상 : lightgrey;
}
»시도
플렉스 랩 속성
플렉스 랩 속성은 탄성 상자 자식 요소 랩 모드를 지정하는 데 사용됩니다.
문법
flex-flow: ||
각 값 분석 :
- 파라미터 nowrap - 기본적으로 하나의 라인으로 탄성 컨테이너입니다.이 경우 탄력 아이가 컨테이너를 오버플로 할 수 있습니다.
- 포장 - 탄성 컨테이너에 여러 줄을.탄성 아이의 오버 플로우 부분은 새로운 라인이 경우에 위치를 내부 줄 바꿈이 하위 키를 발생
- 랩 역 - 랩 순서를 반대로.
다음 예는 보여줍니다 nowrap
사용 :
예
디스플레이 : -webkit-플렉스;
디스플레이 : 플렉스;
-webkit-플렉스 랩 : 파라미터 nowrap;
플렉스 랩 : 파라미터 nowrap;
폭 : 300 픽셀;
높이 : 250 픽셀;
배경 색상 : lightgrey;
}
»시도
다음 예는 보여줍니다 wrap
사용을 :
예
디스플레이 : -webkit-플렉스;
디스플레이 : 플렉스;
-webkit-플렉스 포장 : 포장;
플렉스 - 랩 : 랩;
폭 : 300 픽셀;
높이 : 250 픽셀;
배경 색상 : lightgrey;
}
»시도
다음의 예는 보여줍니다 wrap-reverse
사용 :
예
디스플레이 : -webkit-플렉스;
디스플레이 : 플렉스;
-webkit-플렉스 랩 : 랩 역;
플렉스 랩 : 랩 역;
폭 : 300 픽셀;
높이 : 250 픽셀;
배경 색상 : lightgrey;
}
»시도
정렬 콘텐츠 속성
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
의 사용 :
예
디스플레이 : -webkit-플렉스;
디스플레이 : 플렉스;
-webkit-플렉스 포장 : 포장;
플렉스 - 랩 : 랩;
-webkit-정렬 - 내용 : 센터;
정렬-내용 : 센터;
폭 : 300 픽셀;
높이 : 300 픽셀;
배경 색상 : lightgrey;
}
»시도
유연한 하위 요소의 특성
순서
문법
order:
각 값 분석 :
- <정수>의 순서를 정의하는 데 사용되는 정수 값있는 상면의 작은 값. 그것은 음수가 될 수 있습니다.
order
탄성 컨테이너 하위 요소의 탄성 내에서 속성을 설정할 수 :
예
배경 색상 : cornflowerblue;
폭 : 100 픽셀;
높이 : 100 픽셀;
여백 : 10px;
}
좁은 방 {
-webkit-순서 : -1;
순서 : -1;
}
»시도
정렬
설정 "여유"인 "자동"값을 자동으로 나머지 공간에 탄성 용기를 얻을 수 있습니다. 그래서 "AUTO"의 수직 마진 값을 설정, 상기 탄성 부 요소가 완전 탄성 용기의 2 축 방향에 집중되어 있습니다.
다음 예는 제 1 서브 탄성 요소 집합에있는 margin-right: auto;
. 나머지 공간은 오른쪽 요소에 배치됩니다 :
예
배경 색상 : cornflowerblue;
폭 : 75px;
높이 : 75px;
여백 : 10px;
}
.flex 항목 : 첫 아이 {
마진 오른쪽 : 자동;
}
»시도
완벽한 센터
다음의 예는 우리가 일반적으로 센터를 발생하는 문제에 대한 완벽한 솔루션이 될 것입니다.
탄성 박스, 센터는 바로 설정할 매우 간단하게 margin: auto;
이 완벽하게 중심에 축 방향으로 탄성 하위 요소를 만들 수 있습니다 :
정렬 - 자기
align-self
특성은 축 (수직축)의 측면에 탄성체 자체의 배향 방향을 설정하는데 사용된다.
문법
align-self: auto | flex-start | flex-end | center | baseline | stretch
각 값 분석 :
- 자동 : 그것은 부모의 '스트레치'의 계산 된 값이없는 경우 '정렬 - 자신을'값 '자동', 요소의 부모 요소의 계산 된 값이 값 '- 항목 정렬'을합니다.
- 플렉스 시작 : 시작 라인 경계의 라이브 측 축선의 시작 위치에 대한 상자 부재의 탄성 축 (수직축)의 경계 측면.
- 플렉스 엔드 : 라인 경계의 측면 샤프트 끝을 살기 시작 위치에 대한 상자 요소 축 (세로축)의 탄성 경계 쪽.
- 센터 :상의 라인 측 축 (수직축)의 중간에 위치 된 탄성 요소를 상자. (크기가 상자 부재의 탄성 라인의 크기보다 작은 경우, 양방향 오버플 동일한 길이이다).
- 기준 : 탄성 내부 샤프트와 측면 축선 같은 상자 요소 '플렉스 시작'등가의 동일한 값이다. 다른 경우에, 값은 초기 배향에 관련된다.
- 스트레칭 : 여백 상자 속성의 크기는 그 값이 크기 광고 항목 가까이되지만, "최소 / 최대 너비 / 높이 '속성을 따를 샤프트 측의 크기가'자동 '인 지정하면 제한.
다음의 예는 탄성 하위 요소가 정렬 - 자기 서로 다른 값의 적용 효과를 보여줍니다
예
배경 색상 : cornflowerblue;
폭 : 60 픽셀;
최소 높이 : 100 픽셀;
여백 : 10px;
}
.item1 {
-webkit-정렬 - 자기 : 플렉스 - 시작;
정렬 - 자기 : 플렉스 시작;
}
.item2 {
-webkit-정렬 - 자기 : 엔드 플렉스;
정렬 - 자기 : 플렉스 엔드;
}
.item3 {
-webkit-정렬 - 자기 : 센터;
정렬 - 자기 : 센터;
}
.item4 {
-webkit-정렬 - 자기 : 기준;
정렬 - 자기 : 기준을;
}
.item5 {
-webkit-정렬 - 자기 : 스트레칭;
정렬 - 자기 : 스트레칭;
}
»시도
굽힘
flex
속성은 탄성 하위 요소에 대한 공간을 할당하는 방법을 지정하는 데 사용됩니다.
문법
flex:none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
각 값 분석 :
- 없음 : 없음 계산의 키워드 : 0 0 자동차
- [플렉스 - 성장] 변형체 박스 팽창비 정의.
- [플렉스 수축] 변형체 상자 수축률의 정의.
- [플렉스 기준] : 기본 기준값 박스의 탄성 요소를 정의한다.
다음 예는, 제 1 서브 탄성 요소는 공간의 2/4 다른 두 각 1/4 공간 점유 :
예
배경 색상 : cornflowerblue;
여백 : 10px;
}
.item1 {
-webkit-플렉스 : 2;
플렉스 : 2;
}
.item2 {
-webkit-플렉스 : 1;
플렉스 : 1;
}
.item3 {
-webkit-플렉스 : 1;
플렉스 : 1;
}
»시도
더 많은 예제
CSS3 유연한 상자 속성
다음 표는 일반적으로 탄성 속성 상자에 사용되는 :
재산 | 기술 |
---|---|
디스플레이 | 되는 HTML 요소 상자 유형을 지정합니다. |
플렉스 방향 | 중성자 탄성 용기의 요소를 배치하는 방법을 지정 |
정당화 콘텐츠 | 배향 스핀들 상자 (가로) 방향으로 탄성체. |
- 항목을 정렬 | 박스 측 축의 탄성체 (세로축) 배향 방향. |
플렉스 랩 | 부모 컨테이너를 넘어 탄성 포장 상자의 하위 요소 여부. |
정렬 콘텐츠 | 플렉스 랩 속성의 동작을 수정, 유사 - 아이템을 정렬 할 수 있지만 서브 요소 정렬 설정하지만, 광고 세트의 정렬 |
플렉스 흐름 | 플렉스 방향 및 플렉스 랩 속기 |
순서 | 탄성 상자 자식 요소 순서. |
정렬 - 자기 | 탄성 자식 요소를 사용합니다. 용기 정렬-항목 속성을 커버. |
굽힘 | 어떻게 탄성 상자 자식 요소에게 할당 된 공간을 설정합니다. |