소개
CSS 슈도, 표준 모드에서 기괴한 박스 모델 IE 박스 모델의 존재 중. 프로그램을 대표하는이 두 상자 모델 렌더링 모드입니다. 새로운 박스 모델 중 CSS3에서 반발 탄성 박스 모델이 강하고 유연한 레이아웃 프로그램의 신규 추가 증가이다. 탄성 박스 모델은 제안 된 새로운 레이아웃 방식 CSS3이다. 다른 화면 다른 장치의 새로운 프로그램 레이아웃 폭에 응답. 하위 요소는 컨테이너에 배치 된 중심에 정렬 조정 프로그램은 빈 공간을 할당.
구약과 탄성 박스 모델의 새 버전은
이전에, CSS3는 탄성 박스 모델의 이전 버전을 출시했다. 탄성 박스 모델의 새 버전을 기준으로, 내용의 새로운 버전으로 이전 버전은 약간 다릅니다. 또한, 기능적으로 말하기, 탄성 박스 모델의 이전 버전 호환성, 모두 PC 측에서 IE9 호환성 문제가 있지만, 모바일 단말에서, 이전 버전의 우려에서, 박스 모델의 강력한 새 버전에서 멀리 유연한 박스 모델 호환성이 조금 더 낫다. 그러나 우리를 위해, 우리가 새 버전의 탄성 박스 모델, 휴대 전화 측과의 호환성이 점차 불가피 업그레이드 된 박스 모델 중 탄성 때문에 이전 버전의 본체에 초점을 맞추고 자, 이전 버전이 제거됩니다 . 또한, 새로운 버전은 더 강력한뿐만 아니라 가치있는 우리의 심도있는 연구가 있습니다. 그래서 우리는 두 개의 탄성 박스 모델의 이전 및 새 버전의 경우, 우리가 새 버전을, 정신 대비를 개최 취득 배울 필요, 이전 버전 이해하는, 그래서 우리는 이전 버전을 사용할 필요도 일일 경우, 또한 이전 버전을 매우 쉽게 배울 수 있습니다 유연한 박스 모델.
관련 개념
- 축
우리는, 예를 들어 요소가 연속으로 배열 될 때 주축 모두 요소, 수평 배열, 수평 라인으로서 이해 될 수있는 스핀들의 배열 방향을 지시 할 때, 우리는 소자 기본 때문에 왼쪽에서 오른쪽으로 그리고, 배치되어있는 요소와 일치했다 우리는 방향이 옳다, 아니라 오른쪽 끝을 위해 동안 기본의 경우, 스핀들 요소의 시작 위치가 왼쪽에 있다고 말할 수 있습니다.
- 사이드 샤프트
상기 샤프트 부재의 측면에 수직 인 방향이다. 끝 지점에서 시작 지점으로 기본.
- 탄성 용기
우리는 탄성 박스 모델을 사용하려면, 당신은 탄성 용기에 용기를 변환해야합니다, 우리는 컨테이너의 자식 요소가 설정 디스플레이에 포함 된 말 : 플렉스, 다음이 컨테이너 선박 탄성이 될 것입니다.
- 탄성 하위 요소
때 탄력 용기에 부모 요소의 자식 요소는 다음 자식의 모든 요소는의도 자연스럽게 탄력 자녀가된다.
탄력있는 컨테이너를 만드는 방법 : 실행 화면 : 플렉스 | 인라인 플렉스
탄성 컨테이너 속성
- 플렉스 방향
중성자 탄성 컨테이너 요소 (스핀들 장치)의 구성은
속성치 : 행은 하나 개의 행에 배열되는 기본 행 반전을 가로 방향으로 배치 된 진단 (. 오른쪽 맞춤, 순방향 행의 맨 마지막 행) 칼럼 : 종렬. 칼럼 - 역방향 : 역 수직 배열, 아래에서 위로 배출하고, 마지막으로 최상부 행
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>flex-direction</title> <style> html,body { margin:0; padding:0; } nav { height: 500px; background-color: lightcyan; display: flex; flex-direction: row-reverse;/*居左1234 变成居右4321*/ flex-direction: column;/*居左1234变成上下1234*/ flex-direction: column-reverse;/*变成下上1234*/ } nav div { width: 100px; height: 100px; background-color: lightblue; line-height: 100px; text-align: center; font-weight: bold; margin-right: 10px; } </style> </head> <body> <nav> <div class="d1">1</div> <div class="d2">2</div> <div class="d3">3</div> <div class="d4">4</div> </nav> </body> </html>
- 플렉스 랩
부모 컨테이너 이후 탄성 포장 상자 부 요소 여부
: 속성 값
넘김 : 기본. 행 또는 열을 제거하지 않고 요소들의 제공은 제거되지 않는다.
랩 : 지정된 요소 때 행 또는 열 해체 철거 필요한.
랩 리버스 소자 파괴 필요한 열이지만 역순으로 소정의 행 또는 스플릿.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex-wrap</title> <style> .box { height: 600px; background-color: lightgoldenrodyellow; display: flex; /*设置了属性为wrap，那么一行放不下的时候会自动的去下一行*/ /*flex-wrap:wrap;*/ /*设置了属性为wrap-reverse会让排序发生一个反转，虽然同样是多行，但是会变成从下到上*/ flex-wrap: wrap-reverse; } .box div { width: 100px; height: 100px; background-color: lightblue; line-height: 100px; text-align: center; font-weight: bold; margin: 10px; } </style> </head> <body> <div class="box"> <!--此时元素如果不换行，那么当一行的整体放不下时，每个元素就会相应的缩小--> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div> </body> </html>
- 플렉스 흐름
플렉스 방향 및 플렉스 랩 속기
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>flex-wrap</title> <style> .box { height: 600px; background-color: lightgoldenrodyellow; display: flex; flex-flow: row wrap; } .box div { width: 100px; height: 100px; background-color: lightblue; line-height: 100px; text-align: center; font-weight: bold; margin: 10px; } </style> </head> <body> <div class="box"> <!--此时元素如果不换行，那么当一行的整体放不下时，每个元素就会相应的缩小--> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div> </body> </html>
- 정렬 항목
(길이 방향)의 배향 방향 박스 측 축에 배치되는 탄성 요소
관련 특성 값 :
플렉스 스타트 : 라이브 시작 경계선의 샤프트의 한쪽에 테두리 측 샤프트 카세트 탄성체의 위치 (세로축)를 시작 .
플렉스 단부 : 경계선의 박스 측 축 단부에 접촉 탄성체 측 샤프트 개시 위치의 경계 (세로축).
센터 : 행 (세로축)의 샤프트의 박스 측의 상단을 중심으로 탄성 부재. (크기는 양 방향으로 동일한 길이를 오버플 상자 부재의 탄성 라인의 사이즈보다 작은 경우).
기준 : 탄성 상자 소자 로우 측 내부 샤프트와 동일한 축선 '플렉스 시작'환산 값. 다른 경우, 값은 기본 정렬을 참여한다.
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>align-item</title> <style> .box { height: 600px; background-color: lemonchiffon; display: flex; /*默认 侧轴起点横向排列*/ /*align-items: flex-start;*/ /*侧轴终点横向排列*/ /*align-items: flex-end;*/ /*侧轴终点横向排列*/ /*align-items: center;*/ align-items: baseline; } .box div{ width: 100px; height: 100px; background-color: lightsalmon; text-align: center; line-height: 100px; font-weight: bold; margin:10px; } </style> </head> <body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> </body> </html>
- 정렬-내용
동작을 수정 플렉스 랩 특성은 유사 - 아이템을 정렬하는 아닌 하위 요소는 정렬 배치되지만 정렬 행 (행 사이 길)을 배치.
관련 특성 :
플렉스 스타트 없음 행 간격되지
플렉스 엔드 : 끝을 라인 간격은 정렬되지 않은
중심 : 중심선 간격이 더없는
공간 사이 : 정당성 중심 자동 할당
공간 주위 : 자동로부터 할당
이 신축 용기의 하나의 라인의 특성에 영향을주지 않는다는 점에 유의한다.
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>align-content</title> <style> nav { height: 600px; background-color: lemonchiffon; display: flex; /*开启多行*/ flex-wrap: wrap; /*侧轴起点上下两行对齐，没有行间距*/ /*align-content: flex-start;*/ /*侧轴终点上下两行对齐，没有行间距，第一行依然在上*/ /*align-content: flex-end;*/ /*侧轴终点对齐，第一行依然在上，没有行间距*/ /*align-content:center;*/ /*两端对齐，中间自动分配*/ /*align-content: space-between;*/ /*自动分配距离*/ align-content:space-around; } nav div { width: 100px; height: 100px; background-color: lightcoral; margin:10px; } </style> </head> <body> <nav> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div> <div>13</div> </nav> </body> </html>
- 정당화 콘텐츠
탄성 요소는 카세트 축 (횡축) 방향으로 정렬된다
: 관련 특성
플렉스 스타 : T 기본, 상부 배향
플렉스 엔드 : 단부 정렬
센터 : 중앙 정렬
공간 사이 중간체 자동으로 할당 정당화
공간 -을 주위 : 자동에서 할당
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>justify-content</title> <style> nav { height: 600px; background-color: lightgoldenrodyellow; display: flex; /*justify-content: flex-start;*/ /*主轴对齐，贴右 1234*/ /*justify-content: flex-end;*/ /*主轴对齐，居中*/ /*justify-content: center;*/ /*两端对齐，中间自动分配*/ /*justify-content: space-between;*/ /*自动分配距离*/ justify-content: space-around; } nav div { width: 100px; height: 100px; background-color: lightblue; margin:10px; } </style> </head> <body> <nav> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </nav> </body> </html>
하위 요소의 탄성
- 주문
순서 상자 탄성 하위 요소. 다음 행 숫자 정렬 우선 순위 번호, 높은, 기본값은 0, 음의 지원이다.
- 플렉스 - 성장
설정 또는 상자 부재의 탄성 변형 비를 검색한다.
부동산 값 : INT
- 플렉스 축소
탄성 수축 비율을 설정하거나 상자 요소를 검색 할 수 있습니다.
부동산 값 : INT
- 플렉스 기준
설정 또는가요 성 파우치 신축 기준값 검색하는 데 사용되는
속성 값 : INT
- 굽힘
할당 된 공간 탄성 하위 요소 카세트를 설정하는 방법
, 약식 속성은 플렉스의 성장이다 특성과 플렉스 기초 플렉스 축소
- 정렬 - 자기
탄성 하위 요소에 사용된다. 컨테이너 정렬 - 항목의 속성을 커버.
컨테이너의 속성 값과 마찬가지로, 그러나 이것은 별도 설정 요소이다.